Poradnik: optymalizacja grafiki na stronach internetowych

Na czym polega optymalizacja plików graficznych?

Optymalizacja plików graficznych polega na dostosowywaniu ich licznych parametrów w taki sposób, aby zdjęcia pomagały w pozycjonowaniu strony oraz były jak najprzystępniejsze w odbiorze dla użytkowników. Proces ten obejmuje liczne czynności, dzięki którym Google jest w stanie lepiej rozpoznać, czego dotyczy dana grafika, co pomaga w jej pozycjonowaniu. Odpowiednia optymalizacja zdjęć pod SEO pozwoli użytkownikom sprawnie je znaleźć i więcej się dzięki nim dowiedzieć.

Dlaczego optymalizacja zdjęć na stronę internetową jest taka ważna?

Pliki graficzne mają duży wpływ na to, jak odbierana jest Twoja strona. Pozwalają one wyrazić pewne emocje, styl, a także przekazać potrzebne informacje. W przypadku sklepów internetowych ich rola jest kluczowa dla funkcjonowania takich platform, gdyż to w końcu dzięki zdjęciom klienci mogą dowiedzieć się wielu rzeczy na temat produktu.

Niestety, pliki graficzne to jeden z głównych elementów, który przyczynia się do wolniejszego działania witryn internetowych. Szybkość ładowania to z kolei kluczowy element w przypadku SEO oraz sprzedaży. Jak podaje Google, wraz ze spadkiem szybkości ładowania się strony, znacznie wzrasta szansa na to, że odwiedzający szybko opuści witrynę.

Warto przy okazji zaznaczyć, jak ważne jest to, aby nie przekroczyć granicy 3 sekund ładowania się strony. Różnica w szansie na odbicie w przypadku zakresów od 1 do 3 sekund a od 1 do 5 sekund wynosi aż 68 punktów procentowych. Jeśli z kolei mowa o przedziałach od 1 do 5 sekund i od 1 do 10 sekund, ryzyko odbicia wzrasta jedynie o 33 punkty procentowe, choć mówimy o potencjalnie 2 razy dłuższym czasie ładowania. Przytoczone dane dotyczą środowiska mobile, którego udział w globalnym ruchu internetowym wynosi już niemal 55%.

Użytkownicy urządzeń mobilnych nie zawsze mają dostęp do tak dobrego łącza internetowego, jak w przypadku desktop, dlatego optymalizacja zdjęć z myślą o nich jest bardzo ważna. Pliki graficzne zajmują dużo miejsca, co ma znaczenie nie tylko w przypadku ładowania się stron, ale także i w kwestii wykorzystywania zasobów serwera. Sprawne kompresowanie zdjęć połączone z ich dobrą optymalizacją może dlatego sprawić, że nie będziesz musiał płacić aż tyle za swój hosting.

Optymalizacja grafiki – 8 sprawdzonych sposobów

Przejdźmy zatem do omówienia praktycznych sposobów na optymalizację zdjęć. Znajdziesz tutaj wiele metod, które obejmują nie tylko tak podstawowe czynności jak zmniejszanie rozmiaru oraz kompresowanie zdjęć, ale także i dbanie o przemyślaną nazwę pliku graficznego, atrybuty alt, czy stosowanie nowoczesnych formatów grafiki.

1. Odpowiedni format

Zanim przejdziesz do licznych metod optymalizacji zdjęć, warto już na samym początku upewnić się, że korzystasz z odpowiednich formatów. Samo pojęcie formatu dotyczy tego, w jaki sposób zapisywane są dane dotyczące grafiki. W zależności od potrzeb wykorzystuje się ich różne rodzaje. Przykładowo w PNG tworzy się zrzuty ekranu i wykresy, a w JPG zwykłe zdjęcia. PNG, choć będzie finalnie cięższym plikiem, to jednak z lepszą jakością, ponieważ obsługuje przezroczystość w przeciwieństwie do formatu JPG, który gwarantuje mniejszą wagę pliku i szybsze wczytywanie.

Główne wyzwanie w przypadku formatów grafiki to dążenie do zachowania wysokiej jakości i małego rozmiaru. Wspomniane wcześniej rodzaje zapisów są już wykorzystywane od wielu lat, jednak za wiele w ich przypadku się nie zmieniło. Warto zatem zastanowić się nad implementacją innych formatów, które są mniej znane, a zapewniają (według samego Page Speed Insights) lepszą kompresję niż JPG czy PNG. Oto kilka z nich.

1. WebP to format rozwijany przez Google’a, który w założeniach ma stać się nowym standardem grafiki w Internecie. Można powiedzieć, że cel ten już został praktycznie osiągnięty, gdyż pliki tego typu są już w szerokim zakresie wykorzystywane na YouTubie, Google Play, a także powstaje do niego mnóstwo rozszerzeń. WebP pozwala kodować grafikę w trybie bezstratnym i stratnym. Obsługuje statyczne oraz animowane obrazy. Format jest obsługiwany przez praktycznie wszystkie przeglądarki internetowe oprócz Safari. Apple planuje jednak jego integrację. Gdy się to stanie, będzie można swobodnie przekonwertować wszystkie zdjęcia do WebP, co bardzo pomoże w optymalizacji grafiki.
2. JPEG 2000 jest bardzo podobny do JPEG, jednak zapis obrazu przebiega u niego sprawniej. Choć powstał on (jak sama nazwa wskazuje) w 2000 roku, to jednak nie zyskał dużej popularności. Jest on wspierany jedynie na przeglądarce Safari (włącznie z urządzeniami przenośnymi iOS) i nie zapowiada się, aby w najbliższym czasie cokolwiek się tutaj zmieniło.
3. JPEG XR powstał w 2009 roku i miał być następcą opisanego wcześniej JPEG 2000. Oferuje on jeszcze lepszą kompresję bezstratną i wspiera 48-bitową głębię kolorów. Omawiany format jest jednak wspierany jedynie przez przeglądarkę Internet Explorer i pod tym względem też nie zanosi się na zmiany.

2. Optymalizacja wagi grafiki

Kompresja grafiki to pierwszy z kroków do jej optymalizacji. W ten sposób znacząco zmniejszysz jej rozmiar. Nigdy nie pomijaj tego etapu, gdyż wagę wielu zdjęć da się znacząco zmniejszyć z praktycznie zerowym wpływem na jakość obrazu:

Oczywiście w przypadku optymalizacji grafiki należy pamiętać o zachowaniu złotego środka. Na pewno nie chcesz, aby niska jakość obrazu źle wpłynęła na odbiór treści. Z drugiej strony zawsze pamiętaj, że łączna waga wszystkich zdjęć w kluczowy sposób przyczynia się do szybkości ładowania się strony.

Do kompresji grafiki warto wykorzystać następujące narzędzia:

• tinyjpg.com,
• Optimizilla,
• Compressor.

Jeśli korzystasz z któregoś z popularnych CMS-ów jak Drupal, WordPress czy Magento, zapewne nietrudno będzie Ci znaleźć wtyczkę, która dostarczy takich funkcji z poziomu menu administracyjnego.

3. Optymalizacja wymiarów grafiki

Wymiary pliku zdjęciowego mają oczywiście wpływ na końcową wagę, dlatego, jeśli to możliwe, warto w maksymalnym zakresie przykrócić jego krawędzie. Rozmiar w kontekście optymalizacji grafiki pod SEO ma znaczenie jednak z jeszcze innego powodu. W sierpniu 2021 roku Google wprowadziło nowy czynnik rankingowy – Core Web Vitals. Obejmuje on pewne kluczowe wskaźniki, które mają znaczenie z punktu widzenia user experience.

Jednym z nich jest CLS – Cumulative Layout Shift (zbiorcze przesunięcie układu). Czy zdarzyło Ci się kiedyś, że chciałeś kliknąć wybrany przycisk na stronie, gdy nagle „uciekł” Ci on spod kursora? Doszło wtedy do tytułowego przesunięcia układu. Zjawisko to ma wiele przyczyn: zagnieżdżone media, źle dobrane czcionki czy akcje oczekujące na odpowiedź sieci przed zaktualizowaniem DOM-u (Document Object Model). Jednym z powodów jest także nieokreślenie wymiarów zamieszczanych obrazów w HTML. Z tego powodu ich wymiary są dostosowywane dynamicznie podczas ładowania strony, przez co niektóre jej elementy „uciekają”.

4. Właściwa nazwa pliku graficznego

Nazwa pliku graficznego jest nadawana automatycznie w mniej lub bardziej sensowny sposób. Czasami będzie to data i miejsce jego utworzenia, a w innych sytuacjach po prostu losowa liczba. W obu przypadkach nie można jednak powiedzieć o sprawnej optymalizacji zdjęć. Elementu tego nie można pozostawić przypadkowi, gdyż dobra nazwa pliku potrafi zdziałać wiele dobrego zarówno z punktu widzenia SEO, jak i użytkownika. Zastosowanie czegoś generycznego w postaci „obrazek-oferta” też nie poprawi zbyt wiele.

Stosuj się dlatego do następujących zasad:

1. dokładnie opisuj zawartość i cel pliku,
2. rozdzielaj słowa dywizami "-",
3. nie używaj polskich znaków,
4. w naturalny sposób dodaj słowo kluczowe, które jest powiązane z główną treścią danej strony.

Przykłady niewłaściwych nazw grafiki na stronę:

• 3534613.jpg,
• Wafercte200624.jpg
• wykresdotekstu.png.

Przykłady dobrych nazw grafiki na stronę:

• wykres-popularnosci-magento.png
• uslugi-projektowania-stron-krakow.jpg
• akcesoria-do-komputera.jpg

5. Przemyślany adres URL grafiki

Pamiętaj o tym, że prawidłowa nazwa pliku graficznego nie od razu będzie oznaczać dobrze zoptymalizowany adres URL. W przypadku tego elementu trzymaj się tych samych zasad, które zostały omówione w poprzednim akapicie. Dzięki temu jego treść będzie lepiej czytelna dla Google’a oraz samych użytkowników. Oto przykładowy niepoprawny i prawidłowy adres url grafiki:

• https://xyz.pl/sites/default/files/images/231240iyaou.jpg

  - Źle

• https://xyz.pl/sites/default/files/images/menu-w-magento.jpg

  - Dobrze

6. Atrybuty alt i title

Atrybut alt, określany także jako alt tag i opis alternatywny, to atrybut HTML, który opisuje zawartość plików graficznych. Warto z niego korzystać, gdyż tego typu opis pozwala Google’owi lepiej zrozumieć, czego dotyczy dane zdjęcie, ułatwiając tym samym proces indeksowania witryny. Sam atrybut alt to także dodatkowa okazja na zamieszczenie powiązanego słowa kluczowego. Warto też pamiętać, że osoby słabowidzące do przeglądania stron internetowych często wykorzystują specjalne oprogramowanie typu Text-to-Speech. Gdy napotka ono plik graficzny, odczytuje właśnie przyporządkowany do niego atrybut alt.

Czym z kolei jest atrybut title (określany też jako title tag)? W przeciwieństwie do wcześniej omówionego opisu alternatywnego nie daje on żadnych korzyści pod względem SEO. Warto go jednak stosować z myślą o użytkownikach. Poprawnie działający atrybut title pojawia się, gdy użytkownik nasunie kursorem na dany plik graficzny. Pomaga on opisać to, co nie jest do końca jasne na pierwszy rzut oka. Załóżmy, że w połowie artykułu znajduje się zdjęcie budynku. Trudno się domyślić, jaki jest jego związek z tekstem. Jeśli jednak do grafiki dołączony jest title tag, to czytelnik będzie w stanie dowiedzieć się z niego, że jest to np. „biuro naszej filii w innym mieście”. Podczas gdy opis alternatywny powinno zamieszczać się praktycznie w każdym przypadku, tak atrybut title należy dodawać jedynie wtedy, gdy naprawdę potrzebne jest wyklarowanie znaczenia pliku graficznego.

7. Sitemapa xml dla plików graficznych

Jeżeli Twoja strona, ma dużo zdjęć, warto rozważyć przygotowanie osobnej sitemapy, która będzie zawierać wszystkie adresy URL prowadzące do grafik. Usprawni to indeksację, dzięki czemu googleboty łatwiej dotrą do plików graficznych.

8. Dane strukturalne

Dane strukturalne to świetny sposób na jeszcze lepsze zoptymalizowanie grafiki pod SEO. Pamiętaj jednak, że nie istnieje specjalny schema markup, który ma zastosowanie jedynie w przypadku zdjęć i w szczególny sposób jest promowany przez Google’a. W praktyce po prostu z racji natury niektórych formatów istnieje większa szansa, że dzięki oznaczeniu przez mikrodane pliki graficzne będą lepiej widoczne w Google’u. Wyświetlą się wówczas jako rich snippet, czyli z rozszerzonym opisem, np. z opiniami klientów.

Przykładowo karuzela jest rodzajem poszerzonego wyniku wyszukiwania, który przybiera postać przewijalnej listy lub galerii, co oznacza, że obrazy odgrywają tutaj siłą rzeczy główną rolę. Inaczej to wygląda w sekcji Google Grafika. Zdjęcia oznaczone przez dane strukturalne otrzymują specjalną etykietkę np. Produkt:

Oznaczenie to daje użytkownikom informację na temat tego, czego dotyczy dane zdjęcie, co jest świetnym sposobem na optymalizację grafiki. Pamiętaj jednak, że skonfigurowanie takich plików według wytycznych nie gwarantuje od razu, że w wynikach wyszukiwania zostanie przyporządkowana im tego typu etykietka.

Optymalizacja grafiki – podsumowanie

Jak widać, optymalizacja grafiki na potrzeby www to całkiem złożone zadanie, które składa się z kilku kroków. Warto jednak stosować się do wszystkich omówionych tutaj porad. Dzięki temu Twoja strona będzie działać znacznie sprawniej, zostanie lepiej wypozycjonowana w Google, a użytkownikom za pomocą zdjęć bez przeszkód zostaną przekazane najważniejsze informacje.