Webdesign

Narzędzia do optymalizacji i kompresji obrazów

Choć w dzisiejszych czasach do dyspozycji mamy coraz więcej narzędzi do sprawnego budowania, testowania i wdrażania stron internetowych, to ciągle spoczywa na nas duża…

Choć w dzisiejszych czasach do dyspozycji mamy coraz więcej narzędzi do sprawnego budowania, testowania i wdrażania stron internetowych, to ciągle spoczywa na nas duża odpowiedzialność za jakość końcowego produktu. Tak jest między innymi w przypadku optymalizacji tworzonych witryn, aby działały szybko i nie obciążały zarówno samego serwera jak i łącza internetowego odwiedzających. Jednym z ważnych aspektów tego typu optymalizacji jest odpowiednia kompresja obrazów, którymi często przeładowane są nasze strony internetowe. Z tego właśnie względu, w tym wpisie przyjrzymy się kilku ciekawym narzędziom do optymalizacji obrazów, zarówno poprzez serwisy online jak i aplikacje natywne.

Czy można obejść się bez omawianych aplikacji?

Tak, można. W tym celu ogromną uwagę, a także sporą ilość czasu poświęcić musimy na odpowiednią optymalizację obrazów, które zapisujemy do sieci np. z programu Photoshop. Jeśli zapisując grafikę, której przeznaczeniem jest wyświetlanie w sieci nie używasz menu „Zapisz dla internetu i urządzeń / Save for Web…” w Photoshopie, to powinieneś ten nawyk zmienić. Przy odpowiednich ustawieniach Twoje grafiki nie stracą na jakości, ale na pewno stracą na swojej wadze. W okienku tym jednak mamy dużo ustawień, od prostych, typu wybór odpowiedniego formatu obrazka i jego jakości w procentach, do bardziej zaawansowanych jak wybór ilości kolorów i odpowiednich profilów. Oczywiście warto z tymi ustawieniami poeksperymentować i warto również zapamiętać powszechną zasadę, że zdjęcia najlepiej zapisywać w formacie JPG, a inne obrazki do sieci, np. ikonki w PNG, który to format jest rekomendowany przez organizację W3C.

Optymalizujmy obrazy na dwa sposoby jednocześnie

Osobiście polecam jak najbardziej korzystanie z wyżej wymienionego narzędzia programu Photoshop, a w następnym kroku również z jednego z opisanych poniżej rozwiązań. Photoshop stworzy dla nas całkiem nieźle skompresowane pliki, natomiast dzięki odpowiednim narzędziom jeszcze sporo możemy zyskać, oczywiście nie tracąc na jakości stworzonej grafiki. Oto obrazek zapisany w standardowy sposób „Zapisz jako / Save as” (po lewej), a także poprzez „Zapisz dla internetu i urządzeń / Save for Web…” (po prawej). Widzisz różnicę w jakości? A ilość miejsca zajmowanego przez te pliki to kolejno 106KB i 68,7KB przy zapisie jako JPG i 80% jakości.

106KB
68,7KB

Przyjrzyjmy się zatem kilku z ciekawszych narzędzi, dzięki którym jeszcze bardziej zoptymalizujemy powyższą grafikę. Bazować będziemy na obydwu z przedstawionych wersji obrazów, gdzie po lewej stronie umieszczać będziemy zoptymalizowaną wersję pierwszego obrazka, a po prawej zapisanego z Photoshopa dla sieci.

smush.it

Smush.it jest popularnym narzędziem stworzonym przez inżynierów Yahoo!. Niestety od pewnego czasu nie możemy już uploadować bardzo wielu obrazów jednocześnie, a musimy to robić po kolei, stąd nie jestem już tak wielkim jego fanem. Sprawdźmy jednak jak smush.it poradził sobie z naszym obrazkiem:

99.9KB = 5,83% oszczędności
66.3KB = 3,49% oszczędności

Kraken.io

Kraken pozwala na wgrywanie wielu obrazów jednocześnie, a także wybranie trybu z dwóch dostępnych opcji – Lossy oraz Lossless. Pierwsza z nich pozwala uzyskać świetne rezultaty, nawet do 90% mniejsze pliki. Druga opcja, jak obiecują twórcy Krakena, nie zmieni żadnego pixela w grafice, stąd możemy z niej korzystać, gdy jakość obrazka jest dla nas absolutnie najważniejsza. Oto jakie rezultaty uzyskaliśmy tym razem:

48.5KB = 54% oszczędności
51.4KB = 25% oszczędności

Optimizilla

Optimizilla pozwala na wgranie do 20-stu obrazów jednocześnie i obsługuje formaty JPG oraz PNG, czyli te najczęściej wykorzystywane w sieci. Twórcy promują narzędzie jako „wyprzedzające inne serwisy i programy”. Rezultaty możesz zobaczyć sam:

31KB = 70,75% oszczędności
31KB = 54,9% oszczędności

Compressnow

Compressnow obsługuje zarówno wysyłanie wielu plików jednocześnie (do 9MB każdy) jak i popularne formaty, tj. JPG, PNG i GIF. Oto uzyskane efekty:

32.9KB = 69% oszczędności
33.1KB = 51,8% oszczędności

RIOT

RIOT, czyli Radical Image Optimization Tool to tym razem program instalowany na komputerze użytkownika, dedykowany dla systemu Windows. Aplikacja wspiera formaty JPG, PNG oraz GIF i jest prosta w użyciu, choć zapewnia wiele przydatnych ustawień, np. usunięcie metadanych z kompresowanych plików. Rezultaty pracy tego programu są następujące:

31.1KB = 70,66% oszczędności
31.1KB = 54,7% oszczędności

ImageOptim

ImageOptim to aplikacja dedykowana dla użytkowników systemu Mac OS X, która jest dziecinnie prosta w użyciu. Wystarczy przeciągnąć do okienka interesujące nas obrazki, a zostaną one automatycznie zoptymalizowane. Warto tutaj pamiętać, że obrazki zostaną bez pytania nadpisane nowymi, skompresowanymi, a więc warto wcześniej zrobić kopię zapasową folderu. A oto rezultat:

65.2KB = 38,5% oszczędności
65.1KB = 5,24% oszczędności

Który serwis / program wybrać?

W naszym przypadku przetestowaliśmy kilka serwisów i dwie aplikacje wyłącznie na jednym obrazku, a więc trudno tutaj o rozstrzygnięcie. W serwisach, które umożliwiały wybranie procentowej jakości pliku wyjściowego, wybierałem 80%, ale i z tym ustawieniem warto poeksperymentować. Do czasu, aż jakość obrazków będzie na akceptowalnym poziomie. Z własnego doświadczenia mogę jednak polecić szczególnie program RIOT, ImageOptim i serwis Optimizilla.

Podsumowanie

Zachęcam Cię gorąco do przetestowania wszystkich wymienionych w tym wpisie narzędzi na wielu obrazkach jednocześnie i wybraniu dla siebie tego, które najbardziej przypadnie Ci do gustu. Polecam zawsze zapisywanie obrazków z Photoshopa poprzez „Zapisz dla internetu i urządzeń / Save for Web…”, co jest dobrą i skuteczną praktyką szczególnie w przypadku używania narzędzia do cięcia layoutów na plasterki, a następnie na samym końcu do optymalizacji wszystkich obrazów poprzez któreś z wybranych narzędzi.

W naszym teście wybraliśmy obrazek JPG, który można również nieźle zoptymalizować przy zapisywaniu dla sieci w Photoshopie, gdyż mamy tam możliwość wyboru jakości w procentach. Inaczej jest jednak w przypadku PNG, gdzie procentowych wartości już nie wybieramy. Osobiście zapisuję większość obrazków jako PNG8, bez przestawiania domyślnych ustawień, a na samym końcu wszystkie kompresuję w wybranym narzędziu, co daje zawsze świetne rezultaty.

Z moich codziennych obserwacji wynika, że przy przeciętnym projekcie możemy zaoszczędzić od 80 do 300KB, optymalizując obrazki. Oczywiście im ich więcej, tym większe zyski. Wyobraź sobie, że na jednym wyświetleniu naszej strony zyskujemy np. 100KB, na 10-ciu jest to już ok. 1MB, na kilkuset czy kilku tysiącach – ogromne oszczędności. Warto również pamiętać, że dobrze zoptymalizowana strona internetowa jest cenniejsza z punktu widzenia nie tylko odwiedzających, ale także robotów indeksujących wyszukiwarek, a więc im szybciej witryna się ładuje, tym większa szansa na pokonanie w wynikach wyszukiwania konkurencji.

Opisane narzędzia do optymalizacji obrazów to oczywiście nie wszystko, jeśli chodzi o przyspieszanie witryny. Natomiast pozostając w kwestii obrazów, polecam Ci również zapoznać się z techniką CSS Sprites, którą również opisaliśmy na naszym blogu. A jeśli znasz lepsze narzędzia do kompresji obrazów lub chcesz podzielić się z innymi własnymi przemyśleniami – zapraszamy do komentowania!

UDOSTĘPNIJ ARTYKUŁ:

Powiązane artykuły

Grafika i Interfejsy

Sub Brushes w Affinity Photo – tutorial

Z każdą nową aktualizacją aplikacje Affinity przedstawia swoje nowe narzędzia. Nie inaczej jest z updatem 1.7.1, gdzie w Affinity Photo mamy między innymi możliwość tworzenia kombinowanych pędzli…

Nowości

Black Friday 2018 – najlepsze promocje

Fotografia i Photoshop

Kurs Adobe Illustrator – Techniki Zaawansowane już na eduweb.pl!

Pozostań na bieżąco!

Już nigdy nie przegapisz ważnych informacji, promocji oraz nowych kursów. Zapisz się na newsletter już teraz!

Zapisując się do newslettera akceptujesz naszą politykę prywatności