Kompresja obrazów w WordPress

Według HTTP Archive, od grudnia 2018 r. obrazy stanowią ponad 40% średniej wagi strony www. To naprawdę dużo!  ? Jeśli chodzi o nowy mobile-first index i wydajność, optymalizacja obrazów odgrywa kluczową rolę jak szybko Twój WordPress będzie w stanie się załadować. Kompresja obrazu jest jedną z najłatwiejszych i najszybszych optymalizacji, jakie można wdrożyć. To z kolei będzie miało największy wpływ. Zasadniczo mowa o zmniejszeniu rozmiaru plików obrazów przy użyciu dwóch popularnych form kompresji: stratnej i bezstratnej.

Dzisiaj zagłębimy się w te dwa rodzaje kompresji obrazu i omówimy, którego z nich zalecamy użyć.

Kompresja stratna

Pierwsza forma kompresji jest stratna, która polega na wyeliminowaniu niektórych danych z obrazu. Z tego powodu oznacza to, że możesz zobaczyć obniżenie jakości lub coś, co niektórzy nazywają pikselami. Musisz uważać na to, jak bardzo redukujesz swój obraz. Nie tylko ze względu na jakość, ale także dlatego, że nie można cofnąć tego procesu. Oczywiście, jedną z wielkich zalet kompresji stratnej i dlatego jest to jedna z najpopularniejszych metod kompresji, jest to, że można bardzo dużo zmniejszyć rozmiar pliku.

• Pliki JPEG i GIF są stratnymi formatami obrazów.
• Pliki JPEG świetnie nadają się dla stron www wymagających szybkiego ładowania, ponieważ można dostosować ich poziom kompresji, aby uzyskać równowagę między jakością a rozmiarem pliku.

Automatyczna kompresja obrazów w WordPress

Czy wiesz, że WordPress automatycznie kompresuje twoje pliki JPEG po przesłaniu ich do biblioteki multimediów? Domyślnie WordPress automatycznie kompresuje obrazy do 82% ich oryginalnego rozmiaru, aby zwiększyć wydajność we wszystkich obszarach. Jeśli zastanawiasz się, dlaczego Twoje zdjęcia wyglądają na nieco pikselowe podczas nowej instalacji WordPress, to właśnie dlatego.

Chociaż automatyczna kompresja jest całkiem niezła, to te 82% wcale nie jest wystarczające, jeśli chodzi o rzeczywisty wpływ na wydajność witryny. Dlatego możesz wyłączyć tę domyślną kompresję zdjęć w WordPress. W prosty sposób dodaj następujący fragment kodu do Twojego szablonu WordPress w pliku functions.php. Pamiętaj, aby zawsze wykonać kopię zapasową przed edycją witryny.

add_filter( 'jpeg_quality', create_function( '', 'return 100;' ) );

Natomiast, jeśli chcesz zwiększyć współczynnik automatycznej kompresji WordPress, możesz dodać filtr i zmniejszyć procent oryginalnego pliku, na przykład do 72%:

add_filter( 'jpeg_quality', create_function( '', 'return 72;' ) );

Pamiętaj, że te zmiany nie wpłyną na zdjęcia i obrazy, które już są w Twojej bibliotece mediów WordPress. Jeżeli chcesz, aby nowa wartość automatycznej kompresji obrazów w WordPress została nadana do plików w bibliotece mediów musisz skorzystać z dodatkowej wtyczki Regenerate Thumbnails. Po jej uruchomieniu wszystkie zdjęcia w bibliotece mediów zostaną ponownie skompresowane. Mimo wszystko, zalecamy pozostawienie motywu w spokoju i użycie wtyczki WordPress do optymalizacji obrazu (którą omówimy poniżej) lub kompresowanie zdjęć przed ich przesłaniem.

Kompresja obrazów przy użyciu Save for Web

Możesz użyć narzędzi takich jak Adobe Photoshop lub innych edytorów obrazów, aby dostosować ustawienia jakości obrazu (jak pokazano poniżej). W większości narzędzi jest to w sekcji „Zapisz w internecie” lub „Ustawienia eksportu”.

Jeśli zrobimy małe porównanie stratnych wskaźników kompresji, zobaczymy, że 82% wygląda świetnie! 50% jest równie rewelacyjne. 30% zaczyna być trochę rozmyte na niektórych szczegółach (jest to zauważalne), a wszystko poniżej 15% jest nie do przyjęcia. To tylko przykład, dlaczego automatyczna kompresja 82% w WordPress nie jest wystarczająca. Możesz śmiało mocniej kompresować zdjęcia.

• oryginalny jpg – 1.82M
• 82% jpg – 1.27M
• 50% jpg – 0.6M
• 30% jpg – 0.35M
• 15% jpg – 0.16M

Załóżmy, że wybrałeś kompresowany w 50%. Rozmiar pliku to 657 KB, czyli zdecydowanie mniej niż oryginalny plik o wielkości prawie 2 MB. Jednak nadal nie jest świetnie, jeśli jest to tylko jeden z kilkunastu innych obrazów na stronie. Generalnie najlepiej jest, gdy wszystkie obrazy mają poniżej 100 KB, jeśli to możliwe to będzie idealnie. Dlatego ważne jest również, aby zmienić rozmiar zdjęć, nie tylko samą kompresję. Nasze przykładowe zdjęcie z kompresją 50% zmniejszone z 2880px do 1280px ma tylko 97KB. Na potrzeby naszej strony w zupełności to wystarczy.

Wiadomo jednak, że możesz nie chcieć zmniejszać rozmiarów obrazów, ponieważ od wersji WordPress 4.4 mamy wsparcie dla responsywnych obrazów. WordPress automatycznie tworzy kilka rozmiarów każdego obrazu przesłanego do biblioteki multimediów. Uwzględniając dostępne rozmiary obrazu w pliku srcset atrybut, przeglądarki mogą teraz pobierać najbardziej odpowiedni rozmiar i ignorować inne.

W związku z tym, że w dzisiejszych czasach jest coraz więcej ekranów HiDPI dobrze jest znaleźć własny balans. Na naszej stronie przyjmujemy, że 2x lub nawet 3x rozmiar kolumny lub div witryny jest ok i to wciąż zdecydowanie mniej niż oryginalny rozmiar. Przeglądarka wyświetli prawidłową w oparciu o rozdzielczość urządzenia.

Google zaleca kompresję stratną

Czy używasz Google PageSpeed Insights? Jeśli tak, prawdopodobnie znasz doskonale ostrzeżenie typu „zoptymalizuj obrazy”. W 2017 r. Google zaktualizowało swoją dokumentację, aby teraz zalecać stosowanie kompresji stratnej jako sposobu na przyśpieszenie witryny.

Zatem jeśli chcesz pozbyć się tych ostrzeżeń, jednym z najprostszych sposobów jest użycie kompresji stratnej, aby zadowolić Google.

Kompresja bezstratna

Teraz nadszedł czas, aby zanurzyć się w drugiej formie kompresji, która jest bezstratna. Kompresja bezstratna, w przeciwieństwie do stratnej, nie obniża jakości obrazu. Jak to jest możliwe? Zwykle odbywa się to poprzez usunięcie niepotrzebnych metadanych. Jednak największą wadą tej metody jest to, że nie zawsze widać znaczne zmniejszenie rozmiaru pliku.

• RAW, BMP, GIF, i PNG są bezstratnymi formatami obrazu.
• Możesz wykonać bezstratną kompresję na pulpicie za pomocą narzędzi takich jak Photoshop, Imagify, itd.
• W kompresji bezstratnej JPG świetnie sprawdza się JPEGmini.

Jeśli zrobisz porównanie stratnych kompresji, zobaczysz, że stosując kompresję bezstratną, nie stracisz żadnej jakości. Rozmiar pliku obrazu zostanie zmniejszony, jednak nieznacznie.

Która metoda kompresji jest lepsza?

Odpowiedź na to pytanie zależy od ciebie i jest różna w zależności od biznesu. Dla większości użytkowników zalecamy stosowanie kompresji stratnej, ponieważ można łatwo skompresować obraz o ponad 70% (czasem nawet o ponad 90%!) Bez znacznej utraty jakości. Pomnóż to przez np 30 obrazów na stronie. Ta metoda odegra istotną rolę w skróceniu czasu ładowania witryny. Nie tylko to, ponieważ kompresja stratna sprawi, że zużyjesz mniej przestrzeni dyskowej na hostingu. Co z kolei oznacza, że możesz zaoszczędzić pieniądze.

Kompresja bezstratna jest dla tych, którzy nie mogą sobie pozwolić na utratę jakości. Fotografowie, blogerzy i modelki to tylko niektóre z osób, które zarabiają na życie za pomocą idealnych pikseli. W takich przypadkach bardzo ważne jest, abyś hostował swoje zdjęcia na szybkim serwerze oraz pomyślał o CDN. Ze względu na rozmiar może być nawet konieczne przechowywanie zdjęć w zewnętrznej usłudze, takiej jak Amazon S3 lub Google Cloud Storage.

Jak korzystać z kompresji stratnej w WordPress

Jeśli nadal masz wątpliwości co do stratności i bezstratności, nie martw się, istnieje wiele świetnych wtyczek WordPress do optymalizacji obrazu, z których możesz automatycznie zastosować kompresję stratną:

Na Serwer.io Blog używamy LiteSpeed Image Optimiser, więc pokażemy Ci, jak to działa. W porównaniu do najlepszych wtyczek na rynku, ta jest darmowa i każdy użytkownik serwera może ją używać do optymalizacji swoich obrazów.

LiteSpeed Image Optimisation jest integralną częścią wtyczki LiteSpeed Cache. Zapewnia ona dostęp do usług optymalizacji obrazów na centralnym serwerze. Oto jak to działa:

1. Naciskasz przycisk Wyślij żądanie optymalizacji na stronie optymalizacji obrazu.
2. Serwer optymalizacji pobiera twoje obrazy.
3. Twoje obrazy są przetwarzane.
4. Serwer powiadamia Twoją stronę WordPress, że obrazy są gotowe, po czym są one zdalnie pobierane z powrotem na Twoją stronę

Zdjęcia są kompresowane do 85%-90% jakości oryginału. Jest to optymalizacja stratna. Oczywiście, w konfiguracji Obrazów, możesz wybrać optymalizację bezstratną.

Wtyczka LiteSpeed Image Optimise z powyższymi ustawieniami sprawia, że zapominamy o temacie kompresji obrazów. Wszystko dzieje się automatycznie na naszej stronie. Oczywiście, na oddzielny artykuł zasługuje opcja WebP, która jest dostępna we wtyczce od LiteSpeed. Napiszemy o tym niedługo!

Podsumowanie

Po określeniu jakości obrazów potrzebnych na witrynie możesz wybrać, czy chcesz zastosować kompresję stratną, czy bezstratną. Ponownie, dla tych, którzy są bardziej zainteresowani szybkością, a mniej jakością, zalecamy stosowanie kompresji stratnej. Pamiętaj, że stratne skompresowane obrazy mogą wyglądać pięknie, jeśli znajdziesz odpowiedni balans rozmiaru i jakości. Jeśli zależy Tobie na doskonałych pikselach, zawsze powinieneś stosować kompresję bezstratną.

Jakie są Twoje przemyślenia? Jakiej kompresji używasz na swojej stronie WordPress? Daj nam znać poniżej w komentarzach.