Szybki kontakt
+48 572 063 261
Każda dodatkowa sekunda ładowania strony zabiera Ci klientów
Zdjęcia często są najcięższym elementem strony i to one w pierwszej kolejności wpływają na szybkość ładowania. Użytkownicy nie lubią czekać, a Google lepiej ocenia szybkie witryny. Wolna strona to mniej klientów.
Strona może działać poprawnie, tylko ładować się odrobinę dłużej. A ta odrobina często decyduje o tym, czy użytkownik zostanie i wyśle zapytanie, czy wróci do wyników Google.
Z Twojej perspektywy witryna może wydawać się szybka, bo przeglądarka zapamiętuje część danych. Dla nowych użytkowników sytuacja wygląda inaczej. Jeśli ładowanie trwa zbyt długo, rośnie liczba rezygnacji, spada liczba kliknięć w ofertę i finalnie maleje liczba kontaktów oraz transakcji. Problem szczególnie widać na telefonach.
Jakie realne straty powodują nieoptymalne zdjęcia?
Nieoptymalne obrazy to nie tylko kwestia estetyki. To realne straty biznesowe.
Co obrazy mają wspólnego z pozycją w Google?
Google promuje strony, które zapewniają dobre doświadczenie użytkownika, a szybkość jest jednym z jego elementów. Jeśli obrazy są zbyt duże, wydłużają czas ładowania i osłabiają widoczność strony w wynikach wyszukiwania.
Poza tym zdjęcia mogą generować ruch same w sobie. Google Images to osobne źródło wejść. W wielu branżach użytkownicy zaczynają od przeglądania grafik. Jeśli obrazy są poprawnie opisane i powiązane z treścią, mogą przyciągać użytkowników nawet wtedy, gdy artykuł nie znajduje się wysoko w standardowych wynikach wyszukiwania.
Checklista najczęstszych problemów
Najczęstsze problemy związane z obrazami nie wynikają z błędów technicznych, ale z codziennego dodawania treści bez kontroli nad jakością plików. Z czasem takie drobne zaniedbania zaczynają spowalniać stronę i obniżać jej skuteczność.
Jeśli nie chcesz robić optymalizacjo obrazów samodzielnie, można to też zlecić jednorazowo, a później wdrożyć prostą procedurę w firmie jak przygotowywać obrazki przed wrzuceniem na stronę.
Nie trzeba znać się na IT, żeby to poprawić. Wiele rzeczy da się ustawić raz i potem działa to w tle. Istnieją narzędzia i wtyczki, które automatycznie zmniejszają pliki, pomagają porządkować media, a nawet usprawniają uzupełnianie opisów (tu w przyszłości pojawi się link do artykułu omawjającego wspomniane narzędzia).
Jakie rozmiary i formaty obrazów są bezpieczne dla strony?
W obrazach liczą się dwie rzeczy: piksele i megabajty. Jeśli widzisz MB, to zwykle znak, że plik jest za ciężki.
Rozdzielczość – czyli ile pikseli ma obraz
Rozdzielczość – to szerokość i wysokość obrazu podawana w pikselach, np. 1920×1080 px. Zdjęcia z telefonu mają często 3000 – 4000 px szerokości. Większość stron internetowych nie potrzebuje aż tak dużych grafik.
Dla topowych urządzeń z matrycami o wysokiej rozdzielczości rozmiary zdjęć mogą sięgać nawet 16 384 x 12 288 px co przekłada się na około 20 – 40MB na zdjęcie.
Rozdzielczość obrazów dla typowej strony firmowej lub bloga
- szerokość zdjęcia w treści zwykle 1200-1600 px w zupełności wystarczy,
- zdjęcie na pełną szerokość sekcji to maksymalnie 1920×1080 px (full hd),
- miniatury i zdjęcia w kolumnach odpowiednio mniej.
Jeśli wrzucasz obraz 4000 px, a wyświetla się w szerokości 1200 px, strona musi i tak pobrać cały ciężki plik. To niepotrzebne obciążenie!
Waga pliku – kiedy MB to sygnał ostrzegawczy?
Drugi parametr to rozmiar pliku, czyli to ile miejsca zajmuje obraz na dysku (serwerze). Tu obowiązuje prosta zasada: Jeśli pojedyncze zdjęcie waży 1–3 MB, to w większości przypadków jest za ciężkie. Przy kilku takich plikach na jednej podstronie szybko robi się kilkanaście megabajtów do pobrania.
Bezpieczne orientacyjne wartości rozmiarów plików dla strony firmowej lub bloga:
- zdjęcie w treści – najlepiej poniżej 200-300 KB
- duży obraz w sekcji hero – 300-500 KB
- miniatury – kilkadziesiąt KB
To nie są sztywne limity, ale dobry punkt odniesienia. Jeśli widzisz wartości w megabajtach, to znak, że warto plik zmniejszyć lub skompresować.
JPEG, AVIF, PNG, SVG – który format wybrać?
Format wpływa bezpośrednio na wagę pliku. Wybór nie powinien być przypadkowy.
JPEG (JPG) – najbezpieczniejszy wybór dla zdjęć
JPEG (JPG) to standardowy format w fotografii. Dla większości zdjęć produktowych, wizerunkowych czy blogowych JPEG jest wystarczający.
PNG – tylko w określonych sytuacjach
PNG obsługuje przezroczystość, dlatego jest potrzebny przy:
Nie powinien być używany do zwykłych zdjęć, bo zazwyczaj generuje znacznie większe pliki niż JPEG czy AVIF. Używanie PNG do fotografii to jeden z najczęstszych powodów nadmiernej wagi strony.
AVIF – nowoczesny i bardzo lekki
AVIF to nowszy format, który potrafi zachować dobrą jakość przy jeszcze mniejszym rozmiarze pliku niż JPEG. Jeśli Twoje środowisko techniczne na to pozwala, AVIF jest bardzo dobrym kierunkiem, szczególnie przy stronach z dużą liczbą zdjęć.
Zalety:
Wady:
SVG – idealny do logo i ikon
SVG to format wektorowy, czyli nie jest zbudowany z pikseli jak zdjęcie tylko opisany formułami matematycznymi. Dzięki temu logo i ikony w SVG są ostre w każdej rozdzielczości (także na retina), pliki często ważą bardzo mało i nie tracą jakości przy skalowaniu
Kiedy używać SVG:
Kiedy nie:
SVG to w praktyce plik tekstowy, więc warto korzystać z zaufanych źródeł i nie wrzucać losowych SVG z internetu bez sprawdzenia (to bardziej kwestia bezpieczeństwa niż SEO).
Atrybut ALT i nazwa pliku – małe elementy, które pomagają w SEO
Przy każdym obrazie na stronie znajduje się fragment kodu HTML, tzw. znacznik img. To on odpowiada za wyświetlenie zdjęcia. W tym znaczniku można dodać dodatkowy opis – atrybut ALT (czyli “tekst alternatywny”). W WordPress można go ustawić w katalogu mediów.
ALT to krótkie zdanie, które opisuje, co znajduje się na obrazku. Nie jest widoczne na stronie w normalnych warunkach, ale:
- odczytują go czytniki ekranowe (dostępność),
- wykorzystuje go Google, aby zrozumieć, co przedstawia obraz,
- może zostać pokazany, gdy zdjęcie się nie załaduje.
W praktyce ALT pomaga wyszukiwarce lepiej powiązać obraz z tematem strony i zwiększa szansę na pojawienie się w Google Images.
Jak pisać dobry ALT?
Najprostsza zasada: opisz to, co widać, naturalnym językiem.
Dobrze:
Źle:
ALT nie jest miejscem na upychanie słów kluczowych. Google coraz lepiej rozumie kontekst i sztuczne nasycanie frazami może przynieść odwrotny efekt. Jeśli obraz jest czysto dekoracyjny, opis może być krótki lub pusty.
Czy nazwa pliku ma znaczenie?
Tak, Google bierze pod uwagę również nazwę pliku graficznego.
Różnica między: IMG_4829.jpg a projekt-strony-wordpress.jpg jest oczywista, druga wersja daje wyszukiwarce jasną wskazówkę, czego dotyczy obraz. Nazwa pliku i ALT powinny być spójne, ale nie muszą być identyczne. ALT to opis dla użytkownika i wyszukiwarki, nazwa pliku to dodatkowy sygnał kontekstowy.
To drobne elementy, które nie wymagają wiedzy technicznej, a przy większej liczbie obrazów mogą realnie wspierać widoczność strony w wyszukiwarce.