Optymalizacja zdjęć na stronę internetową

Zaufaj mi, nie chcesz, żeby Google znienawidził Twojej witryny. Może się tak stać, jeśli nie zadbasz o jej prędkość działania (m.in. rozmiar). Na szczęście możesz zmniejszyć rozmiary plików graficznych, żeby poprawić wydajność swojej strony internetowej. Problem w tym, że taka redukcja rozmiaru obniża jakość obrazu, a to z kolei może sprawić, że Twoją witrynę znienawidzą osoby ją odwiedzające… 

Dlatego ważne jest, żeby znaleźć ten tzw. “sweet spot”, czyli idealny punkt, pomiędzy rozmiarem zdjęcia i jego jakością – tak, żeby zarówno Google, jak i Twoi odwiedzający pokochali Twoją stronę internetową.

Istnieje kilka sztuczek i technik, które pozwalają zmniejszyć rozmiar pliku obrazu i jednocześnie zachować dobrą jakość pod względem wizualnym. O tym właśnie przeczytasz w tym artykule. Dowiesz się jak formatować zdjęcia, nie psując ich jakości, a także jak zoptymalizować obrazy pod kątem Internetu i wydajności strony internetowej.

Korzyści z optymalizowania zdjęć

Po pierwsze, dlaczego w ogóle musisz optymalizować swoje zdjęcia? Jakie są korzyści? Optymalizacja zdjęć pod kątem wydajności ma wiele zalet. Według HTTP Archive z października 2019 r. obrazy stanowią średnio 33% całkowitej wagi (rozmiaru) strony. Więc jeśli chodzi o optymalizację stron internetowych WordPress, to obrazy są zdecydowanie pierwszym elementem, od którego powinniśmy zacząć! Mimo, że treści video zajmują więcej pamięci, to zdjęcia są zdecydowanie łatwiejsze w obróbce – lepszy efekt w krótszym czasie.

Optymalizacja zdjęć jest ważniejsza niż optymalizacja skryptów i czcionek. Dobry 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.

Oto główne korzyści wynikające z optymalizacji zdjęć:

• Poprawa szybkości ładowania strony internetowej – jeśli ładowanie strony trwa zbyt długo, odwiedzający mogą znudzić się czekaniem i przejść do kolejnej pozycji w wyszukiwarce internetowej (tzn. większy współczynnik odrzuceń dla Twojej strony).
• Wyższa pozycja w wynikach wyszukiwania – duże pliki graficzne spowalniają witrynę, a wyszukiwarki nie znoszą powolnych witryn. 
• Szybsze indeksowanie – szybka strona ułatwia i przyspiesza pracę Googlebota, przez co Twoje zdjęcia są szybciej indeksowane i pokazywane w wynikach wyszukiwania obrazów Google.
• Tworzenie kopii zapasowych będzie znacznie szybsze.
• Mniejsze rozmiary plików graficznych wymagają mniejszej przepustowości – sieci i przeglądarki docenią to.
• Mniejsze wymagania co do ilości miejsca na serwerze.

Jak optymalizować obrazy dla internetu

Podstawowym celem optymalizacji zdjęć jest znalezienie równowagi między najmniejszym rozmiarem pliku, a akceptowalną jakością obrazu. Istnieje kilka rodzajów optymalizacji zdjęć, a każdy z nich można wykonać na kilka sposobów. 

Jedną z najbardziej popularnych metod optymalizacji jest kompresja zdjęcia przed wysłaniem do WordPressa. Można to zrobić za pomocą narzędzi takich jak Adobe Photoshop lub Affinity Photo. 

Niektóre rodzaje optymalizacji można również wykonać za pomocą wtyczek WordPressa, które omówimy poniżej.

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.

Kadrowanie i Przycinanie

Nie wszystko na zdjęciu jest istotne. 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). 

Bardzo często zdarza się, że optymalizujemy zdjęcie i wrzucamy je na serwer, a dopiero później, już na stronie (projektując jej wygląd) kadrujemy to zdjęcie i przycinamy w edytorze stron (np. Elementor), żeby lepiej dopasować je do treści oraz rozmiaru i wyglądu strony. 

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ą kodu html i 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.

Skalowanie – zmiana rozmiaru zdjęć

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). Zasadniczo WordPress automatycznie tworzy kilka rozmiarów każdego obrazu przesyłanego do biblioteki multimediów. Uwzględniając dostępne rozmiary obrazu w atrybucie srcset, przeglądarki mogą teraz same wybrać najbardziej odpowiedni rozmiaru 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 HiDPI, nie powinniśmy stosować zbyt małych rozmiarów zdjęć, ale też nie za dużych – 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.

Biblioteka multimediów WordPressa automatycznie tworzy miniatury każdego zdjęcia 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, żeby na przykład zaoszczędzić miejsce na dysku serwera, możesz użyć bezpłatnej wtyczki, takiej jak Imsanity.

Wybór odpowiedniego formatu pliku

Zanim zaczniesz cokolwiek robić ze zdjęciem, upewnij się, że wybrałeś najlepszy format pliku. Istnieje kilka formatów plików graficznych, których możesz użyć:

• PNG – zapewnia obrazy o wyższej jakości, ale ma także większy rozmiar pliku. Został stworzony jako bezstratny format obrazu, chociaż może być również stratny.
• JPEG – wykorzystuje optymalizację stratną i bezstratną. Możesz dostosować poziom jakości, aby uzyskać równowagę między jakością a rozmiarem pliku.
• GIF – używa tylko 256 kolorów. To najlepszy wybór dla animowanych obrazów. Używa tylko bezstratnej kompresji.

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:

Jakość kompresji, a rozmiar

Poniżej znajdziesz przykłady różnych rodzajów kompresji i co może się zdarzyć, gdy zbyt mocno skompresujesz obraz. 

Pierwszy 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.

Kompresja obrazów stratna (lossy) i bezstratna (lossless)

Ważne jest również, aby zrozumieć, że istnieją dwa rodzaje kompresji, których można użyć: stratna (lossy) i bezstratna (lossless).

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 lub innych podobnych edytorów obrazów.

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 (podgląd na żywo). Dzięki temu można uzyskać optymalną kompresję.

Narzędzia i programy do optymalizacji obrazu

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
• Affinity Photo
• Gimp
• Paint.NET
• GIFsicle
• JPEGtran
• JPEG Mini
• OptiPNG
• pngquant
• FileOptimizer
• ImageOptim
• Trimage
• ImageResize.org

Wtyczki WordPressa do optymalizacji zdjęć

Na szczęście dzięki WordPress nie musisz wszystkiego robić ręcznie. Możesz użyć wtyczek, aby automatycznie wykonać przynajmniej część pracy. 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ą ze zdjęciami. 

Oto niektóre z najlepszych wtyczek do optymalizacji zdjęć, które poprawią wydajność Twojej strony internetowej:

• Imagify Image Optimizer
• ShortPixel Image Optimizer
• Optimole
• EWWW Image Optimizer Cloud
• Optimus Image Optimizer
• WP Smush
• TinyPNG
• ImageRecycle

Pamiętaj, żeby nie polegać wyłącznie na wtyczkach podanych powyżej. Te wtyczki generalnie zajmują się tylko kompresją plików. Oprócz kompresji, trzeba pamiętać o rozmiarze zdjęcia. Na przykład nie powinno się przesyłać 2 MB zdjęć do biblioteki multimediów WordPressa. Może to spowodować bardzo szybkie wyczerpanie limitu pojemności Twojego konta hostingowego. Najlepszą metodą jest wcześniejsza szybka zmiana rozmiaru zdjęcia w jakimś edytorze i dopiero wtedy można je wysłać na serwer, żeby któraś z powyższych wtyczek zajęła się dalszą kompresją zdjęcia.

Ewentualnie, do tego też możesz wykorzystać wtyczkę WordPress, która zmniejszy rozmiar zdjęcia za Ciebie. Na przykład wspomniana już

• Imsanity

Imsanity umożliwia ustawienie “limitu rozsądku”, aby wszystkie przesłane zdjęcia były ograniczone do rozsądnego rozmiaru, który jest nadal wystarczająco duży, aby sprostać potrzebom typowej strony internetowej. Imsanity integruje się z WordPressem i każde wysyłane na serwer zdjęcie jest najpierw sprawdzane przez Imsanity, czy mieści się w granicach rozsądku (ty ustalasz te granice). Jeśli zdjęcie jest za duże, zostaje zmniejszone, a następnie przekazane dalej do WordPressa, który tworzy wtedy odpowiednie miniatury.

Podsumowanie – Najlepsze Praktyki

Oto kilka dobrych praktyk dotyczących optymalizacji zdjęć pod kątem Internetu:

• Jeśli zamierzasz używać wtyczki WordPress do kompresji zdjęć, użyj takiej, która kompresuje i optymalizuje obrazy swoich zewnętrznych serwerach. To zmniejszy obciążenie Twojej witryny.
• W miarę możliwości używaj obrazów wektorowych SVG wraz z plikami PNG i JPG
• Jeżeli Twoja strona internetowa ma zasięg międzynarodowy, korzystaj z CDN, żeby szybciej udostępniać swoje zdjęcia odwiedzającym na całym świecie
• Usuń niepotrzebne dane zapisane w pliku obrazu
• Przytnij niewykorzystane białe marginesy na zdjęciu i zastąp je kodem CSS (margin i padding)
• Używaj efektów CSS3 w jak największym stopniu
• Zapisuj swoje obrazy we właściwych wymiarach pomimo tego, że WordPress obsługuje teraz obrazy responsywne – wyświetla je bez zmiany rozmiaru za pomocą CSS.
• Używaj czcionek internetowych zamiast umieszczania tekstu w obrazach – wyglądają one znacznie lepiej po skalowaniu i zajmują mniej miejsca
• Używaj obrazów rastrowych tylko do scen z dużą ilością kształtów i szczegółów
• Zmniejsz głębię do mniejszej palety kolorów
• W miarę możliwości używaj kompresji stratnej
• Eksperymentuj, aby znaleźć najlepsze ustawienia dla każdego formatu
• Używaj formatu GIF, jeśli potrzebujesz animacji (ale skompresuj animowane pliki GIF)
• Używaj formatu PNG, jeśli potrzebujesz wysokich szczegółów i wysokiej rozdzielczości
• Używaj formatu JPG do ogólnych zdjęć i zrzutów ekranu
• Usuń niepotrzebne dane meta obrazu
• Zautomatyzuj proces przygotowywania zdjęć tak bardzo, jak to możliwe
• W niektórych przypadkach może być konieczne opóźnienie ładowania obrazów (tzw. lazy-load) w celu szybszego renderowania pierwszej strony
• Korzystaj z opcji zapisywania obrazów jako „zoptymalizowane pod kątem Internetu” w narzędziach takich jak Photoshop
• Używaj formatu WebP w przeglądarce Chrome, aby wyświetlać mniejsze obrazy