Czy i jak w 2024 optymalizować za duże obrazki?

Mój klient ma stronę i sklep. Do mnie należy dbanie o stan techniczny strony opartej o WordPress. Sklep stoi na Shoper i ktoś inny nim zarządza, więc do te pory nie miałem z nim wiele wspólnego. Przyszedł jednak dzień, kiedy klient poprosił mnie o pomoc w namierzeniu przyczyny problemu pod tytułem “dlaczego ten sklep powoli się ładuje?”.

Okazało się, że jedną z przyczyn są obrazki. Duże obrazki. BARDZO DUŻE obrazki.

Przykład z brzegu – strona “o nas” z fotografią właścicielek, wyświetlanym jako niecałe 800×600, jak myślicie ile “waży” to zdjęcie?

W wersji z wczoraj… 6,5MB. Fotka w wysokiej jakości, w rozdzielczości jak zgrana z aparatu, tak że można zrobić zbliżenie na pojedyncze igły na drzewach w tle.

Po tym jednym przykładzie wiedziałem, że roboty będzie dużo. Więcej niż się spodziewa klient. Nie móimy o kilku czy kilkunastu grafikach. Mówimy o sklepie, gdzie od wielu lat są wrzucane tego typu pliki. Spodziewałem się setek a może tysięcy elementów do poprawy. Brzmi jak kilka dni pracy!

No chyba, że podejdziemy do tego metodycznie i maksymalnie zautomatyzujemy proces. Potrzebujemy tylko:

• namierzyć największe grafiki (i miejsca gdzie występują, najlepiej skanując wszystkie podstrony sklepu)
• pobrać je wszystkie na dysk
• masowo skonwertować (np. do WebP)
• wrzucić na strony gdzie są obecnie osadzone
• pilnować się na przyszłość

Do dzieła!

Namierzyć największe grafiki

Ja użyłem świetnego narzędzia Website Auditor Pro (link partnerski), które pozawala szybko przeskanować całą stronę i wykonać jej audyt techniczny. W efekcie mamy raport gdzie iwdać jakie pliki są do poprawy, ile możemy na nich oszczędzić miejsca i gdzie się znajdują.

Na pewno są inne narzędzia tego typu ale to miałem pod ręką więc nie szukałem dalej i pobrałem wyniki w postaci CSV.

Pobrać je na dysk

Tu pewnie mogłem poszukać czegoś w rodzaju download managera przyjmującego wsad w postaci pliku CSV czy TXT z listą adresów do pobrania.

Zamiast tego wykorzystałem Chat GPT, który napisał mi skrypt PowerShell, do wykonania brudnej roboty. Brudnej, bo niektóre pliki miały nazwy i adresy wołające o pomstę do nieba. Polskie znaki, nawiasy, spacje, znaki zapytania i tak dalej.

Ostatecznie udało się pobrać nawet bardzo dziwnie nazwane pliki. Popatrzcie na próbkę.

Skonwertować (np. do WebP lub kiedyś do AVIF)

Dla pojedynczych plików użyłbym pewnie paint.net. Jeśli plików jest więcej z pomocą przychodzi niezawodny Fotosizer PRO. Może i wygląda przaśnie (interfejs przypomina czasy Windows XP) ale daje ogromne możliwości

• wybrania zbioru (setek, tysięcy) plików
• kontrolowania procesu konwersji
• ustalania wynikowych nazw plików wg schematów – np. autonumerowania, dat, wymiarów, oryginalnych (ale oczyszczonych) nazw itp

Najważniejsze opcje jakie wybrałem to:

• zmniejszenie zbyt szerokich/wysokich obrazów i zdjęć do max 1920px
• zamiana nazw plików na “bezpieczne”
• konwersja na format WebP
• jakość 75%

Uzyskany stopień oszczędności miejsca po konwersji – średnio 80%

Wrzucić na strony gdzie duże obrazki są obecnie osadzone

Tu niestety nie miałem możliwości automatyzacji. Pliki i raport wysłałem administratorce sklepu i nie wydaje mi się, aby taka możliwość w ogóle istniała bez dostępu do bazy danych i serwera sklepu. Być może Shoper posiada API pozwalające na takie operacje, ale dla 100 plików chyba nie miałoby to aż tak dużego sensu.

Pilnować się na przyszłość

Na sam koniec, po wysłaniu plików i raportu, przedstawiłem propozycję “pilnowania się” przed wrzuceniem plików ze zdjęciami na sklep. Ograniczała się ona do kilku punktów.

Uprasza się o szykowanie i wrzucanie grafik:

• w formacie webp z jakością 75% (już niedługo jak shoper i przeglądarki to będą powszechnie obsługiwać to rekomendacja zmieni się na format avif)
• w rozmiarach max 1920×1080 (lub 1080×1920) – chyba że będzie absolutnie konieczne wrzucenie większego
• bez spacji, polskich znaków i znaków specjalnych typu ? / & – unikamy znaków innych niż a-z A-Z 0-9 podkreśleń (_) i krótkich pauz (-)

Rekomendacja dotyczyła tylko sklepu, bo na stronie od dawna dba o to wtyczka Mateusza Gbiorczyka, Converter for Media PRO (link daje 20% zniżki).

Podsumowanie

Może się nam wydawać, że mając światłowód w domu i 5G w telefonie problem dużych obrazków nie dotyczy już nikogo. Niestety to błąd. Niepotrzebnie “ciężkie” grafiki powodują wiele szkód, między innymi:

• utrudniając życie odwiedzającym nasze strony – słabe łącze albo słabszy sprzęt i już strona czy sklep ładują się wolniej, działa ociężale, każe na siebie czekać… lubimy takie sklepy?
• obniżając nasz ranking w wyszukiwarkach, które od dawna już biorą pod uwagę czynniki techniczne – wszelkie problemy ze stroną, w tym za duże pliki, odbierają nam klientów,
• zapychają łącza, miejsce na dyskach przyczyniając się do zwiększenia zużycia prądu i zapotrzebowania na serwery i dyski, czyli pośrednio zanieczyszczają planetę.

Jaki z tego morał? Optymalizujmy obrazki! Są do tego darmowe narzędzia i wtyczki, jeśli więc odpowiadamy za szykowanie materiałów na strony www – nic nas nie usprawiedliwia.