Optymalizacja obrazów na stronie stanowi istotny czynnik wpływający na efektywność SEO oraz prędkość ładowania witryny. Dłuższy czas ładowania strony wiąże się z większym prawdopodobieństwem, że odwiedzający ją użytkownicy zrezygnują z jej przeglądania. Nieoptymalizowane obrazy mogą również negatywnie wpłynąć na pozycję strony w wynikach wyszukiwania.
Kluczowym aspektem optymalizacji obrazów pod kątem SEO jest ich rozmiar pliku. Im mniejszy, tym szybciej strona się załaduje. Dostępne są różne narzędzia, które umożliwiają kompresję zdjęć. Kompresja polega na usuwaniu zbędnych danych z pliku, co prowadzi do zmniejszenia rozmiaru obrazu, zarówno z zachowaniem, jak i bez utraty jego jakości.
Optymalizacja zdjęć a SEO
Optymalizacja obrazów na stronie internetowej ma znaczący wpływ na pozycjonowanie w wynikach wyszukiwania. Wyszukiwarki uwzględniają czas ładowania strony, co sprawia, że optymalizacja zdjęć stanowi istotny czynnik. Im dłużej trwa proces ładowania strony, tym mniejsze jest prawdopodobieństwo, że zostanie ona uwzględniona w organicznych wynikach wyszukiwania.
Jaki format zdjęć wybrać?
Wybór właściwego formatu pliku obrazu jest istotny dla optymalizacji zdjęć na stronie. Najczęściej stosowane formaty to:
- JPG / JPEG – jest często stosowany do umieszczania zdjęć oraz grafik na stronach internetowych, ze względu na możliwość uzyskania wysokiej jakości obrazu przy niewielkim rozmiarze pliku. Format ten opiera się na kompresji stratnej.
- PNG – stosuje bezstratną kompresję, co oznacza, że jakość obrazu pozostaje niezmieniona, jednak rozmiar pliku jest zazwyczaj większy niż w przypadku formatu JPG dla podobnego obrazu. Jego przydatną cechą jest obsługa przezroczystości, umożliwiająca wyświetlanie obrazów bez tła.
- SVG – to format grafiki wektorowej, który umożliwia tworzenie skalowalnych obrazów bez utraty jakości. SVG doskonale sprawdza się do projektowania logo, ikon oraz innych grafik wektorowych. Zastosowanie SVG na stronie umożliwia wyświetlanie wyraźnej, skalowalnej grafiki na różnorodnych urządzeniach, eliminując konieczność tworzenia wielu wersji obrazów o różnych rozmiarach. Ponadto, SVG jest przyjazny dla wyszukiwarek, a ze względu na minimalną wagę plików, przyczynia się do szybszego ładowania się strony. Grafiki SVG można dodatkowo stylować za pomocą CSS.
- WebP – opracowany przez Google format oferuje lepszą kompresję i zapewnia wysoką jakość obrazu. Wspierany przez większość popularnych przeglądarek stanowi znakomitą opcję dla stron internetowych, które wymagają szybkiego wczytywania dużej liczby obrazów.
Najczęściej zaleca się wykorzystywanie formatów takich WebP i SVG. Format WebP oferuje lepszą kompresję, co przekłada się na mniejszy rozmiar plików bez utraty jakości. Natomiast format SVG nadaje się doskonale do grafiki wektorowej, takiej jak loga czy ikony, pozwalając na skalowanie obrazów do różnych rozdzielczości bez straty jakości przy jednoczesnej niskiej wadze pliku. Wybór odpowiedniego formatu zależy od specyfiki oraz przeznaczenia konkretnego obrazu.
Po pierwsze… odpowiedni rozmiar
Wykorzystanie odpowiednich rozmiarów obrazu jest kluczowe dla SEO i szybszego wczytywania strony. Rozmiar obrazu ma bezpośredni wpływ na wielkość pliku graficznego – im większy rozmiar, tym większa waga pliku. Dlatego istotne jest, aby dopasować rozmiar zdjęć przed umieszczeniem ich na stronie internetowej oraz unikać wysokich rozdzielczości. Zamieszczanie obrazu o wymiarach np. 5000 x 4000 pikseli nie ma sensu, jeśli ma być wyświetlany jako mały, mało istotny element. Należy przygotować obraz o odpowiednich wymiarach, odpowiadających rozmiarowi obrazu wyświetlanego na stronie.
Zazwyczaj zaleca się używanie zdjęć o rozdzielczości 72 dpi (pikseli na cal) co pozwala zachować wysoką jakość przy mniejszych rozmiarach plików. Optymalna rozdzielczość zdjęć wyrażona w pikselach zależy od indywidualnych potrzeb i rozmiaru obrazów prezentowanych na stronie. W większości przypadków, optymalna szerokość zdjęcia wynosi około 1200 pikseli, zapewniając wysoką jakość wyświetlaną na różnych urządzeniach. Jednak, należy pamiętać, że dopasowanie rozmiaru obrazów na stronie internetowej jest uzależnione od konkretnych wymagań.
Kompresja zdjęcia i odpowiednia jakość
Kompresja pliku graficznego polega na redukcji jego rozmiaru przy minimalnym, a nawet niezauważalnym wpływie na jakość obrazu. Można to osiągnąć za pomocą narzędzi do kompresji plików graficznych. Przykładowe rozwiązania online:
Dobór właściwej jakości zdjęć jest kluczowy dla optymalizacji grafik na stronie. Im wyższa, tym większy rozmiar pliku. Jakość na poziomie 70% zazwyczaj wystarcza do zdjęć na stronę internetową, jednak warto przetestować różne ustawienia, aby znaleźć odpowiedni balans pomiędzy wysoką jakością obrazu a minimalnym rozmiarem pliku.
Usunięcie zbędnych danych z plików graficznych jest skuteczną metodą zmniejszania ich wagi. Grafika cyfrowa często zawiera dodatkowe informacje, takie jak dane o aparacie czy geolokalizacji, co prowadzi do zwiększenia rozmiaru pliku.
Rekomenduje się, aby zdjęcie nie przekraczało 150-200 KB, a całkowity rozmiar strony nie przekraczał 2 MB. W przypadku stron internetowych zawierających duże galerie lub duże ilości zdjęć, przez wgraniem zdjęć na stronę, warto rozważyć wykorzystanie narzędzi do kompresji obrazów.
Dlaczego warto stosować format WebP na stronie internetowej?
Google zaleca korzystanie z formatów obrazów nowej generacji. Format WebP umożliwia zmniejszenie wagi obrazu przy niewielkiej różnicy w jakości obrazu. W kontekście szybkości ładowania strony i ogólnej optymalizacji, jest to istotna różnica, która może mieć wpływ nawet na pozycję twojej strony w wynikach wyszukiwania.
Optymalizacja zdjęć pod kątem SEO na stronie internetowej
Zadbaj o odpowiednią nazwę pliku
Zdjęcia związane z treścią strony mogą korzystnie wpłynąć na jej pozycję w wynikach wyszukiwania. Kluczowe jest również stosowanie odpowiednich nazw plików, które pomagają zoptymalizować grafiki na stronie. Nazwa pliku graficznego powinna klarownie odzwierciedlać jego zawartość, aby zarówno użytkownicy, jak i roboty wyszukiwarek mogły łatwo zrozumieć jego treść. Wykorzystanie nazw plików zawierających istotne słowa kluczowe związane z treścią strony może dodatkowo polepszyć jej pozycję w wynikach wyszukiwania. Należy unikać ogólnych nazw, takich jak „1.jpg” czy „whatsapp_image.png”, zamiast tego należy stosować nazwy opisujące konkretną treść obrazu.
Zastosuj atrybuty title i ALT
Aby właściwie sformułować atrybut „title” dla zdjęcia na stronie internetowej, należy starannie wybrać słowa kluczowe, które najlepiej opisują obraz, oraz rozważyć, jakie informacje mogą być przydatne dla użytkowników korzystających z czytników ekranowych. Ważne jest, aby opis był zwięzły i klarowny.
Koniecznie dodaj atrybut ALT (alternatywny opis) do wszystkich obrazów na stronie internetowej. Jest to tekst, który zostanie wyświetlony w przypadku, gdy zdjęcie nie załaduje się poprawnie lub nie będzie dostępne dla użytkownika. Dodanie atrybutu ALT zwiększa również szanse na wyświetlenie obrazu w wynikach wyszukiwania Google – w zakładce Grafika. Pamiętaj, że treść atrybutu ALT powinna dokładnie opisywać zawartość obrazu.
Jeżeli korzystasz z CMS WordPress, przejdź do biblioteki Media i kliknij w wybrany obrazek. W załączonym niżej obrazku dowiesz się, w którym miejscu wstawić odpowiednie atrybuty:
Sprawdź rozwiązanie Lazy loading
Lazy loading umożliwia ładowanie jedynie tych obrazów, które są widoczne na ekranie, natomiast pozostałe są wczytywane dopiero w momencie, gdy użytkownik przewija stronę w dół. Dzięki temu można zwiększyć szybkość ładowania strony oraz ograniczyć liczbę obrazów, które muszą być pobierane w momencie załadowania strony.
