Jak zoptymalizować obrazy dla witryny

1. Jak więc zoptymalizować obrazy dla witryny?
2. GUI Image Optimization Utilities
3. ImageAlpha
4. Jpegmini
5. My Workflow i ImageOptim-CLI
6. Instalacja ImageOptim-CLI
7. Uruchamianie ImageOptim-CLI
8. Wtyczka WordPress
9. Wniosek

Наша команда-партнер Artmisto

Myślę, że wszyscy wiedzą, że przed umieszczeniem obrazu na stronie, musi on zostać przeskalowany do wymaganego rozmiaru, a nie przesyłać tiffa 2,5 megabajta bezpośrednio do witryny, a następnie ustawić rozmiar tylko atrybutami szerokości i wysokości w html lub css.

Jeśli optymalizujesz przed umieszczeniem obrazu dla witryny, możesz jeszcze bardziej zmniejszyć ilość danych przesyłanych podczas otwierania witryny, aw konsekwencji zwiększyć szybkość jej otwierania. Jest to dobre dla użytkowników, którzy w tym przypadku nie opuszczą witryny, ponieważ została otwarta zbyt długo, co jest szczególnie ważne, ponieważ urządzenia mobilne generują coraz więcej ruchu. Jest to również dobre dla SEO, ponieważ, o ile wiem, inne rzeczy są równe, wyszukiwarki biorą pod uwagę szybkość otwierania witryny.

Jeśli nie masz jeszcze pewności, że obrazy zasługują na taką szczególną uwagę, spójrz na ten interesujący wykres, który pokazuje średnią liczbę bajtów przesłanych podczas otwierania strony witryny, w podziale na typ zawartości.

Optymalizacja obrazu to proces, który stosuje bardziej odpowiedni algorytm kompresji do obrazu, a także pozwala pozbyć się zbędnych informacji zapisanych w obrazie, takich jak metadane, które są zapisywane w pliku obrazu podczas zapisywania w edytorze graficznym lub aparacie podczas fotografowania.

W ten sposób optymalizacja obrazu zmniejsza ilość danych potrzebnych do przechowywania i przesyłania obrazu (na przykład przez sieć).

Istnieją zarówno metody optymalizacji stratnej, jak i bezstratnej.

Z mojego doświadczenia wynika, że ​​nawet przy optymalizacji bezstratnej okazuje się, że średnio zmniejsza się rozmiar obrazu o 5-10%, aw niektórych przypadkach liczba ta wzrasta do 15-25%, a przy szczęściu nawet do 35%. Zgadzam się, że jest to całkiem niezły przyrost ilości danych.

Jeśli korzystasz z narzędzi wykorzystujących kompresję stratną, możesz wygrać w liczbie zdjęć kilka razy. Najważniejsze jest to, że według twórców tych narzędzi automatycznie wybierają taki stopień kompresji, aby utrata jakości obrazu nie była zauważalna dla oka i nie można się obawiać, że na obrazach pojawią się ziarna lub inne niepożądane artefakty.

Otworzył obraz w optymalizatorze i bum! - Obraz zaczął ważyć o kilkadziesiąt procent mniej. To po prostu będzie w stanie schudnąć, prawda?

Jak więc zoptymalizować obrazy dla witryny?

Użyj do tego odpowiednich narzędzi. Pochodzą one w postaci aplikacji desktopowych oraz w postaci narzędzi wiersza poleceń. Ale poza faktem, że nie jest łatwo ustalić, co dzieje się z CLI, nie dają one również najlepszych wyników pod względem kompresji. Dlatego nie rozważę ich tutaj.

Istnieją również uniwersalne rozwiązania dla wszystkich trzech typów obrazów (png, jpeg, gif), a także przetwarzanie tylko w formacie png lub jpeg.

GUI Image Optimization Utilities

ImageOptim

ImageOptim Jest prostym, wydajnym i wszechstronnym narzędziem do optymalizacji obrazu dla systemu Mac OS X.

Obsługuje wszystkie niezbędne formaty obrazów: png, jpg, gif. Przeprowadza bezstratną optymalizację.

ImageOptim jednocześnie łączy najlepsze narzędzia do optymalizacji obrazu: PNGOUT , Zopfli , Pngcrush , AdvPNG przedłużony OptiPNG , JpegOptim jpegrescan jpegtran i Gifsicle . Dlatego nie widzę powodu, aby rozważać je osobno, gdy wszystkie są prezentowane w jednym programie, co jest znacznie wygodniejsze.

Jeśli z jakiegoś powodu korzystasz z systemu Windows, istnieje alternatywa dla Ciebie Zamieszka . Sam nie użyłem tego narzędzia, ale wygląda dobrze.

ImageAlpha

ImageAlpha Kompresuje pliki png przez kompresję stratną i 24-bitową konwersję PNG na PNG8, zachowując kanał alfa (przezroczystość). Jednocześnie takie obrazy są obsługiwane w systemie iOS, we wszystkich przeglądarkach, a nawet w IE6.

Narzędzie to pozwala wygrać ponad 30% oryginalnego rozmiaru obrazu, a utrata jakości jest zauważalna tylko przy bardzo dokładnym spojrzeniu pod szkłem powiększającym.

Niestety nie znam żadnych analogów w systemie Windows.

Jpegmini

Jpegmini stratne optymalizatory obrazów jpeg, ale pogorszenie po ich użyciu jest jeszcze trudniejsze do zauważenia niż po ImageAlpha. Są Wersja Windows .

Ma tylko jedną wadę - w przeciwieństwie do poprzednich narzędzi, które są darmowe i open source, JPEGmini jest płatne. To prawda, on ma wolny Wersja Lite co pozwala na przetwarzanie 20 plików dziennie.

Nie zapomnij o ImageAlpha i JPEGmini, aby pominąć obraz poprzez ImageOptim, aby zaoszczędzić kilka procent więcej miejsca.

Jeśli chcesz znaleźć „lepsze” narzędzie: porównanie skuteczności narzędzi opisanych przeze mnie z innymi popularnymi optymalizatorami obrazu.

My Workflow i ImageOptim-CLI

Optymalizacja obrazów, oprócz niezaprzeczalnych zalet, takich jak zmniejszenie przestrzeni potrzebnej do ich przechowywania (co nie jest zbyteczne na serwerze sieciowym), zmniejszenie niepotrzebnego ruchu serwera WWW i przyspieszenie otwierania witryn, ma jedną poważną wadę: obrazy muszą być zoptymalizowane.

Oznacza to, że za każdym razem, zanim umieścisz obraz na stronie, musisz wykonać tę samą kombinację czynności: uruchom ImageAplpha lub JPEGmini, otwórz w nim obraz, poczekaj na wynik, a następnie przeprowadź ten sam obraz przez ImageOptim. A jeśli obraz musiał być edytowany, to proces będzie musiał zostać powtórzony.

Wszystko to zaczyna się szybko i bardzo irytujące, a nawet powiedziałbym, wściekłość. Ale na szczęście człowiek o imieniu Jamie Mason zajął się tym problemem i owinął wszystkie trzy narzędzia w AppleScript i Shell, dzięki czemu można przetwarzać wiele plików jednocześnie, wykonując tylko jedno polecenie.

Instalacja ImageOptim-CLI

Jeśli zainstalowałeś node.js (lub raczej menedżer pakietów npm , który jest połączony z node.js), bardzo łatwo jest zainstalować ImageOptim-CLI; Terminal :

Jeśli nie masz node.js, instalacja będzie wyglądać następująco:

1. Otwórz Terminal i pobierz ImageOptim-CLI: curl -output ~ / Downloads / imageoptim-cli.zip https://codeload.github.com/JamieMason/ImageOptim-CLI/zip/1.7.10
2. Rozpakowujemy do miejsca, w którym chcemy, aby leżało, na przykład, do katalogu domowego : unzip ~ / Downloads / imageoptim-cli.zip-d ~ /
3. I dodajemy imageOptim do PATH, aby można było go uruchomić bez podania całej drogi do narzędzia: export PATH = $ PATH: ~ / ImageOptim-CLI-1.7.10 / bin

Uruchamianie ImageOptim-CLI

Teraz, aby zoptymalizować wszystkie obrazy w dowolnym katalogu, wystarczy uruchomić:
imageOptim ‑j ‑a ‑d ~ / Sites / MyProject, gdzie

• ~ / Sites / MyProject to ścieżka do twojego projektu ze zdjęciami,
• -J pomiń obrazy przez jpegmini,
• ‑A pomiń obrazy za pomocą AlphaImage,
• ‑D przetwarzaj obrazy w katalogu.

Najprawdopodobniej, aby opcja -j działała, a aplikacja JPEGmini była zautomatyzowana, należy włączyć tak zwany dostęp Enable dla urządzeń pomocniczych.

Aby to zrobić, otwórz Preferencje systemowe (Preferencje systemowe), a jeśli masz Mac OS X Mavericks (10.9), wykonaj następujące kroki:

1. W „Preferencjach systemowych” (Preferencje systemowe) kliknij „Bezpieczeństwo i prywatność”.
2. Przejdź do karty Prywatność.
3. Na liście po prawej stronie wybierz element Dostępność.
4. Kliknij ikonę kłódki w lewym dolnym rogu okna. Następnie wprowadź nazwę i hasło administratora.
5. I wreszcie, zaznacz pole wyboru przed aplikacją Terminal (Terminal).

Ci, którzy nie dokonali aktualizacji do Mavericks, jest łatwiej - po prostu otwórz „Uniwersalny dostęp” (Dostępność) natychmiast w „Preferencjach systemowych” (Preferencje systemowe). Zaznacz pole wyboru „Włącz dostęp do urządzeń pomocniczych”.

Teraz najłatwiejszy sposób na zoptymalizowanie wszystkich obrazów witryny:

1. Pobierz za pomocą katalogu klienta FTP wszystkie obrazy, na przykład folder wp-content / uploads, jeśli masz witrynę WordPress.
2. Dodaj w tym folderze ImageOptim-CLI, tak: imageOptim -j -a -d ~ / Sites / example.com / wp-content / uploads
3. Pij herbatę podczas przetwarzania obrazów.
4. Raduj się, ile miejsca zostało zapisane i odeślij zdjęcia.

Wtyczka WordPress

Jeśli Twoja witryna działa na WordPressie, nie dążysz do maksymalnego możliwego współczynnika kompresji podczas optymalizacji i nie chcesz zajmować się wszystkimi opisanymi powyżej narzędziami, wtedy masz rozwiązanie - wtyczka WordPress EWWW Image Optimizer .

Ja sam nie korzystam z tej wtyczki, ponieważ wolę robić minimum wtyczek. Dodatkowo, jako maksymalista, dążę do najwyższego możliwego stopnia optymalizacji obrazu :)

Wniosek

Optymalizacja obrazu to przetwarzanie obrazu za pomocą specjalnych narzędzi, które usuwają niepotrzebne metadane i stosują najlepszy algorytm kompresji do plików obrazów, co ostatecznie zmniejsza ilość danych, które zajmują te obrazy.

Optymalizacja jest potrzebna dla:

• przyspieszenie otwarcia witryny,
• oszczędność miejsca na obrazie
• skrócić czas tworzenia witryny kopii zapasowej,
• oszczędność ruchu na serwerze WWW.

Możesz zoptymalizować obrazy za pomocą narzędzi: ImageOptim, ImageAlpha i JPEGMini, lub możesz ich użyć razem za pomocą ImageOptim-CLI.

Podobny