Zaufaj mi, nie chcesz, żeby Google znienawidził Twoją stronę internetową, a może się tak stać, jeśli nie zadbasz o odpowiednią optymalizację zdjęć.
Niezoptymalizowane zdjęcia mocno obniżają wydajność stron internetowych, co wpływa negatywnie na ich pozycjonowanie w wyszukiwarkach internetowych (tzw. SEO).
Mówiąc prościej:
Bez optymalizacji zdjęć Twoja strona będzie wolna i Google (i inne przeglądarki też) nie będzie jej wyświetlał w swoich wynikach wyszukiwań.
Na szczęście obrabianie zdjęć nie jest trudne. Każdy może sobie z tym poradzic, jesli wie jak.
Można nawet ten cały proces całkowicie zautomatyzować, powierzając go odpowiednim narzędziom.
Tego wszystkiego dowiesz się z poniższego artykułu, więc zapraszam do lektury.
Optymalizacja zdjęć dla internetu, to zmniejszanie rozmiaru plików graficznych, przy jednoczesnym zachowaniu jak najlepszej jakości obrazu.
Pamiętaj, że strone internetowa (razem ze zdjęciami) trzeba pobrać z internetu, tak samo jak każdy inny plik, a im większy rozmiar pobieranych plików, tym dłużej trzeba czekać…
I właśnie tego długiego czekania nikt nie lubi, zarówno Google, jak i osoby odwiedzające taka stronę.
Pliki graficzne możemy zmniejszać w nieskończoność, problem w tym, że im mniejszy plik, tym gorsza jakość obrazu, a kiepskie zdjęcia na stronie, to tez problem…
Optymalizując obrazy szuka się tego tzw. “sweet spot”, czyli idealnego punkt, pomiędzy rozmiarem zdjęcia i jego jakością – tak, żeby Twoja strona była szybka i ładna, a przez to lubiana zarówno przez Google, jak i osoby ja odwiedzające.
Optymalizacja zdjęć poprawia SEO Twojej strony. Optymalizując zdjęcia poprawiamy wydajność strony, a Google otwarcie mówi o tym, że prędkość strony ma wpływ na jej ranking, czyli na jej pozycje w wynikach wyszukiwania (pozycjonowanie).
Według HTTP Archive z października 2019 roku obrazy stanowią średnio 33% całkowitej wagi (rozmiaru) strony. Więc jeśli chodzi o optymalizację stron internetowych, to obrazy są zdecydowanie pierwszym elementem, od którego powinniśmy zacząć!
Optymalizacja zdjęć jest ważniejsza niż optymalizacja skryptów i czcionek.
Mimo, że treści video zajmują więcej pamięci, to zdjęcia są zdecydowanie łatwiejsze w obróbce. Proces optymalizacji obrazu jest jedną z najłatwiejszych do zaimplementowania metod na zwiększenie wydajności strony internetowej, ale wielu właścicieli stron internetowych tego nie zauważa.
Dla sklepów internetowych eCommerce poprawa szybkości ładowania strony internetowej oznacza większe obroty w sklepie. Jeśli ładowanie strony trwa zbyt długo, potencjalny klient może znudzić się czekaniem i przejść do kolejnej pozycji w wyszukiwarce internetowej. W ten sposób zwiększa się współczynnik odrzuceń Twojej strony - tracisz więcej klientów!
Z badań przeprowadzonych przez Google wynika, że jeśli czas ładowania się strony wydłuży się z 1 sekundy do 5 sekund, to prawdopodobieństwo, że potencjalny klient wyjdzie ze strony zanim zobaczy ofertę wzrasta aż o 90%.
Pozostałe korzyści wynikające z optymalizacji zdjęć:
Generalnie optymalizację zdjęć możemy podzielić na cztery etapy:
Odpowiednio przycinając i skalując zdjęcie przed wykorzystaniem go na stronie możesz zredukować jego rozmiar i czas wczytywania strony internetowej nawet o 30% – 40%. Wybierając odpowiednią kombinację formatu pliku i typu kompresji, możesz dodatkowo zmniejszyć rozmiar obrazu nawet 5-cio krotnie. Pamiętaj jednak, że nie ma jednej, najlepszej metody, wszystko zależy od konkretnego zdjęcia, dlatego musisz eksperymentować z każdym obrazem lub formatem pliku, aby zobaczyć, co działa najlepiej i jaka kombinacja daje najlepszy efekt końcowy.
Wybieramy najistotniejszy element zdjęcia i skupiamy się na nim. W miarę możliwości przycinamy boki zdjęcia, pozbywając się w ten sposób nieistotnych fragmentów i marginesów.
Białe marginesy zdjęć powinno się obcinać, ponieważ można je bardzo łatwo odtworzyć w każdym edytorze stron za pomocą zaawansowanych funkcji pozycjonowania.
Nie wszystko na zdjęciu jest ważne. Często wstawiając zdjęcie na stronę, chodzi nam jedynie o konkretny element na pierwszym planie.
Zastanów się, jak to zdjęcie umieścisz na swojej stronie internetowej i czy nie warto przyciąć trochę niektóre boki (drugi plan zdjęcia/tło).
Pamiętaj, że przeglądarki ładują pełny obraz dla zdjęć przyciętych w ten sposób przez twoją stronę internetową (przycięte za pomocą arkusza stylów witryny).
Aby zmniejszyć rozmiar dużych obrazów, lepiej najpierw przyciąć je blisko zamierzonego rozmiaru ręcznie za pomocą edytora graficznego jak Adobe Photoshop, albo chociażby wbudowanego edytora obrazów w Twoim komputerze.
Sprawdzamy wymiary miejsca docelowego (ramki) dla zdjęcia na stronie internetowej i odpowiednio zmniejszamy rozmiar obrazu.
W przeszłości bardzo ważne było, skalowanie obrazów i wysyłanie ich na serwer w dokładnie takim rozmiarze, w jakim będą wyświetlane one na stronie internetowej. Chodziło o to, żeby unikać sytuacji, gdzie to nasz serwer musiał dokonywać skalowania za pomocą CSS.
W tej chwili nie jest to już takie ważne, bo WordPress od wersji 4.4 obsługuje już responsywne obrazy (nie skalowane przez CSS za każdym razem). WordPress automatycznie tworzy kilka rozmiarów każdego obrazu przesyłanego do biblioteki multimediów na podstawie Twoich ustawień. Jednak oryginalny plik jest zawsze zachowywany i pozostaje nietknięty.
Jeśli chcesz, żeby WordPress sam automatycznie zmieniał rozmiary zdjęć wysyłanych na serwer i usuwał oryginalne pliki po skalowaniu (oszczędność miejsca na dysku serwera), możesz użyć bezpłatnej wtyczki, takiej jak Imsanity.
Uwzględniając dostępne rozmiary obrazu w atrybucie srcset, przeglądarki mogą teraz same wybrać sobie najbardziej odpowiedni rozmiar i zignorować pozostałe.
Zobacz przykładowy wygląd Twojego kodu poniżej.
W związku z tym, że w dzisiejszych czasach mamy coraz więcej wyświetlaczy o zwiększonej rozdzielczości (HiDPI i Retina), nie powinniśmy stosować zbyt małych rozmiarów zdjęć. Przy zbyt małym rozmiarze zdjęcia na ekranach typu Retina może pojawić się efekt pikselizacji (zobacz przykład poniżej).
Zbyt duże zdjęcie to też niedobrze, bo zwiększamy niepotrzebnie rozmiar strony i obniżamy jej wydajność (prędkość) – dobrze jest celować gdzieś w środek. Powiedzmy 2x lub 3x rozmiar kolumny lub div witryny, ale wciąż mniej niż oryginalny rozmiar zdjęcia.
Przeglądarka internetowa sama dobierze sobie i wyświetli optymalny rozmiar zdjęcia w oparciu o rozdzielczość urządzenia.
W zależności od zawartości obrazu dobieramy odpowiedni format pliku i zapisujemy zdjęcie w optymalnym dla niego formacie.
Dobierając odpowiednio format pliku graficznego możemy znacznie zmniejszyć jego rozmiar (pod warunkiem, że dobrze dobierzemy format do rodzaju zawartości zdjęcia)
Istnieje kilka formatów plików graficznych, których możesz użyć:
Istnieje kilka innych formatów, takich jak JPEG XR i WebP, ale nie są one powszechnie obsługiwane przez wszystkie przeglądarki. Najlepiej jest używać formatu JPEG lub JPG w przypadku obrazów z dużą ilością kolorów, a PNG w przypadku prostych obrazów.
Więcej szczegółowych informacji na temat różnych formatów zdjęć znajdziesz w artykule Pawła Mansfelda - optymalizacja zdjęć i grafiki na stronę www, albo na stronie Googla - optymalizacja obrazów (po angielsku)
Kompresja obrazów dotyczy przeważnie formatu JPG/JPEG, ale format PNG też można skompresować przez zmniejszanie rozmiaru palety (ilości) kolorów.
Ogólnie im mocniejsza kompresja, tym więcej informacji jest usuwanych ze zdjęcia, a to powoduje pogorszenie jakości obrazu. Naszym zadaniem jest dobrać optymalny rodzaj i poziom kompresji, żeby nie pogorszyć tej jakości zbyt mocno.
Poniżej znajdziesz przykłady różnych rodzajów kompresji i co może się zdarzyć, gdy zbyt mocno skompresujesz obraz.
Pierwszy przykład wykorzystuje bardzo niski stopień kompresji, co daje najwyższą jakość (ale większy rozmiar pliku).
Drugi wykorzystuje bardzo wysoki stopień kompresji, co powoduje, że obraz jest bardzo niskiej jakości (ale mniejszy rozmiar pliku).
Uwaga: nietknięty, oryginalny obraz ma 2,06 MB.
Jak widać pierwszy obrazek powyżej ma rozmiar 330 KB. To dość dużo jak na jedno zdjęcie! Ogólnie najlepiej jest utrzymać całkowitą wagę strony poniżej 1 lub 2 MB. 330 KB to aż jedna szósta tego.
Drugi obraz oczywiście wygląda okropnie, ale ma za to jedynie 68 KB. To, co musimy zrobić, to znaleźć idealny środek między stopniem kompresji (jakością) a rozmiarem pliku.
Przykład takiego idealnego punktu między jakością, a rozmiarem obrazu widać na zdjęciu poniżej. Zastosowano tam średni stopień kompresji i jak widać, jakość jest nadal bardzo dobra, a rozmiar pliku to tylko 151 KB. Taki rozmiar jest dopuszczalny w przypadku zdjęcia w wysokiej rozdzielczości. Jest to 2x mniej niż oryginalne zdjęcie z niską kompresją. Prostsze obrazy, takie jak PNG, zwykle powinny mieć poniżej 100 KB.
Ważne jest również, aby zrozumieć, że istnieją dwa rodzaje kompresji zdjęć, których można użyć, kompresja stratna (ang. lossy) i kompresja bezstratna (ang. lossless).
Kompresja Stratna – jest to filtr, który eliminuje niektóre dane. Powoduje to degradację obrazu, więc musisz uważać, jak mocno chcesz go zmniejszyć (pamiętaj, żeby zawsze mieć kopię zapasową oryginału). Optymalizacja stratna zdjęć pozwala na znaczne zmniejszenie rozmiaru pliku. Do tego typu optymalizacji możesz użyć narzędzi takich jak Adobe Photoshop, Affinity Photo, GIMP, lub innych podobnych edytorów obrazów.
Kompresja Bezstratna – jest to filtr kompresujący dane. Nie obniża on jakości, ale będzie wymagało rozpakowania obrazów przed ich renderowaniem.
Najlepiej poeksperymentuj z różnymi technikami kompresji, aby zobaczyć co działa najlepiej dla każdego obrazu lub formatu. Sprawdź czy program graficzny, którego używasz ma opcję zapisywania obrazu dla internetu i jeśli tak, to korzystaj z niej za każdym razem. Jest to opcja dostępna w wielu edytorach obrazów (Adobe Photoshop ma coś takiego) i umożliwia dostosowanie jakości (mamy podgląd na żywo) oraz widzimy na bieżąco, jak poszczególne ustawienia wpływają na końcowy rozmiar pliku. Dzięki temu można uzyskać optymalną kompresję.
Zdjęcia możemy optymalizować na kilka sposobów, a każdy z nich można wykonać trochę inaczej, lub za pomocą innych narzędzi. Ja będę się tutaj skupiał na najbardziej popularnych i najłatwiejszych metodach.
Najbardziej popularnym narzędziem do optymalizacji zdjęć przed wysłaniem ich na stronę internetową jest program Adobe Photoshop. Jego darmowym zamiennikiem jest GIMP.
Natomiast najłatwiejszym sposobem na optymalizację zdjęć dla strony internetowej opartej o system WordPress, jest wykorzystanie specjalnych wtyczek (aplikacji), które potrafią zrobić wszystko za nas - cały proces optymalizacji zdjęć delegujemy i nie martwimy się o nic.
Na końcu pokażę jak takie wtyczki działają i jak je uruchomić na własnej stronie na przykładzie wtyczki ShortPixel. Pokażę Ci również (zaskakujące) wyniki.
Istnieje wiele narzędzi i programów, zarówno płatnych, jak i darmowych, których możesz użyć do optymalizacji swoich zdjęć. Niektóre oferują narzędzia do przeprowadzania własnych optymalizacji, a inne wykonują całą pracę za Ciebie.
Oto kilka narzędzi i programów, które warto sprawdzić:
Adobe Photoshop to program z którego korzystają profesjonaliści. Oferuje on mnóstwo zaawansowanych funkcji, których większość z nas nigdy nie wykorzysta. Ale za to pracuje się w nim łatwo i co ważniejsze - szybko.
Otwieramy zdjęcie w Photoshopie i z panelu po lewej wybieramy Kadrowanie
Za pomocą uchwytów na krawędziach zaznaczamy obszar zdjęcia, który chcemy pozostawić. Obszar zacieniony zostanie obcięty.
Na koniec wciskamy Enter.
Z menu u góry wybieramy zakładkę Obraz i dalej przechodzimy do Rozmiar obrazu…
Upewniamy się, że mamy włączoną opcję zachowywania proporcji, a jednostki mamy podawane w pikselach.
Wybieramy interesujący nas rozmiar obrazu i klikamy OK.
Z menu u góry wybieramy zakładkę Plik, dalej Eksportuj i przechodzimy do Zapisz dla Internetu
W ustawieniach wybieramy inny format pliku i obserwujemy w lewym dolnym rogu, jak się zmienia przewidywany rozmiar końcowy pliku dla wybranego formatu.
Na koniec klikamy Zapisz...
Przechodzimy do okna Zapisz dla Internetu (tak jak powyżej), tylko tutaj będziemy manipulować wartością Jakość.
Zmieniamy jakość kompresji i obserwujemy jak będzie zmieniała się jakość obrazu oraz przewidywany rozmiar pliku (lewy dolny róg) dla danego poziomu kompresji.
Gdy dobierzemy optymalne ustawienia, klikamy Zapisz...
Na szczęście nie musisz wszystkiego robić ręcznie. Proces optymalizacji da się zautomatyzować, przez co nie musi on zajmować zbyt wiele czasu.
Automatyzować można poszczególne kroki optymalizacji zdjęć, lub cały proces od A do Z.
Wszystko zależy od naszych preferencji.
Automatyzację taką implementuje się bezpośrednio na stronie internetowej poprzez specjalne wtyczki (coś w rodzaju aplikacji na telefon). Dzięki temu wrzucamy po prostu zdjęcia na stronę, a serwer sam zajmuje się odpowiednią optymalizacją już na stronie.
Poniżej znajdziesz kilka tego typu wtyczek dla systemu WordPress. Dalej, pokażę Ci jak taką wtyczkę uruchomić na stronie i co ona potrafi.
Istnieje kilka wtyczek, które automatycznie zoptymalizują pliki obrazów podczas ich przesyłania na serwer. Mogą też zoptymalizować obrazy, które już znajdują się na serwerze. Jest to przydatna funkcja zwłaszcza jeśli masz już witrynę internetową z dużą ilością zdjęć.
Oto niektóre z popularniejszych wtyczek do optymalizacji zdjęć, które poprawią wydajność Twojej strony internetowej:
Są oczywiście lepsze i gorsze wtyczki do optymalizacji. Niektóre nie są w stanie zająć się wszystkim. Ja osobiście przetestowałem i używam ShortPixel.
ShortPixel to firma, która specjalizuje się w optymalizowaniu zdjęć konkretnie dla platformy WordPress. Mają oni wiele różnych wtyczek na koncie, które ułatwiają pracę ze zdjęciami, ale dzisiaj zajmiemy się tylko jedną z nich - ShortPixel Adaptive Images.
Twoja strona internetowa jest wyświetlana na wielu różnych urządzeniach (laptopach, telefonach komórkowych, tabletach), a każde z nich ma własną rozdzielczością ekranu. ShortPixel AI uwzględnia rozdzielczość urządzenia - mierzy obszar, w którym ma się znaleźć zdjęcie i następnie serwuje zdjęcie w dokładnie takim rozmiarze, jaki jest potrzebny.
Rozważmy stronę internetową z pojedynczym obrazem w rozmiarze 640 × 480 pikseli.
Obraz oglądany z laptopa zachowa rozmiar 640 x 480 pikseli, ale zostanie zoptymalizowany i udostępniony z sieci CDN (Content Delivery Network - specjalna sieć połączonych ze sobą bardzo szybkich serwerów, przeznaczonych specjalnie do serwowania zdjęć w internecie).
Gdy ta sama strona jest wyświetlana z telefonu komórkowego, obraz zostanie przeskalowany (na przykład) do 300 x 225 pikseli, następnie zoptymalizowany i wyświetlony z sieci CDN.
W ten sposób optymalizujemy zdjęcia, zmniejszamy rozmiar strony i znacznie przyspieszamy czas ładowania się zdjęć, bo zwiększamy przepustowość łączy (zdjęcia są serwowane z serwera w najbliższej lokalizacji do naszego odwiedzającego).
Pierwsze cztery kroki widać na zamieszczonym powyżej zdjęciu
Gdy mamy wtyczkę zainstalowaną
Przechodzimy do zakładki Advanced i tutaj:
Teraz musimy przejść do strony internetowej wtyczki i musimy zarejestrować u nich darmowe konto:
Wtyczka ShortPixel Adaptive Images okazała się trochę lepsza niż ja w optymalizowaniu zdjęć. Przeprowadziłem test, gdzie stworzyłem dwie identyczne strony internetowe z kiepskiej jakości zdjęciami (nie zoptymalizowane). Jedna stronę optymalizowałem ręcznie w Photoshopie, według opisanych powyżej metod. Drugą stronę zoptymalizowałem instalując i konfigurując wtyczkę ShortPixel AI, dokładnie tak, jak powyżej.
Wydajność stron sprawdzałem za pomocą GTmetrix, a strony były skanowane z serwera w Kanadzie (czasy ładowania się strony będą mocno losowe ze względu na odległość).
Oto wyniki:
Jak widać wtyczka poradziła sobie trochę lepiej niż ja, dlatego używam jej na co dzień na swojej stronie estartupy.pl.
Za darmo dostajemy tylko 100 kredytów miesięcznie, co na sam początek wystarczy, ale jak myślisz o swojej stronie na poważnie, to warto zainwestować te 45 zł i wykupić sobie jednorazowy pakiet 10 000 kredytów. Taki pakiet starczy Ci na długo.
Oto kilka dobrych praktyk dotyczących optymalizacji zdjęć pod kątem Internetu:
