Jak zoptymalizować grafikę na stronie internetowej? - AdVIST

Jak zoptymalizować grafikę na stronie internetowej?

Pliki graficzne umieszczone na stronie internetowej wpływają na jej atrakcyjność, a także są ważnym, choć często pomijanym elementem optymalizacji strony, gdzie może bezpośrednio oddziaływać na widoczność serwisu w wynikach wyszukiwarek. Jak zatem zoptymalizować grafikę na stronie internetowej? Poniżej przedstawiamy 4 kluczowe działania ulepszające optymalizację zdjęć.

Prawidłowe nazewnictwo plików graficznych

001.jpg, IMG_003, DSC_003.jpg, PIC210.jpg – brzmi znajomo, prawda? Podczas wykonywania zdjęć aparatem cyfrowym bądź telefonem komórkowym właśnie takie nazwy otrzymują Twoje fotografie. Te tytuły nie są zoptymalizowane, ponieważ nie sugerują zawartości danego zdjęcia. Dlaczego? Już wyjaśniamy.

Roboty wyszukiwarek przetwarzają kod źródłowy strony razem z zawartą treścią, która sugeruje im tematykę danej podstrony. Widząc domyślną nazwę zdjęcia, nie potrafią powiązać go z problematyką strony, dlatego tworzenie tytułów opisujących to, co jest ukazane na fotografii jest kluczową kwestią optymalizacji grafik.

Przed nazwaniem pliku graficznego sugeruj się tym, jak Twoi Klienci wyszukują produkty oraz co wpisują w wyszukiwarce.

Najważniejsze zasady nazewnictwa plików graficznych

  • brak umieszczania znaków diakrytycznych
  • oddzielenie słów kluczowych za pomocą znaku myślnika
  • nazwy produktów pisane z małych liter

Opisy alternatywne – atrybut ALT

Atrybut ALT to alternatywny tekst dla zdjęć, który pojawia się, gdy występuje problem z wyświetlaniem fotografii.

Przyklad wyświetlania ALT

Przykład wyświetlania atrybutu ALT

Parametr ten jest również ważnym aspektem optymalizacji plików graficznych. Poprzez uzupełnienie zdjęć atrybutem ALT możemy pomóc osiągnąć podstronie i plikom graficznym wyższe pozycje w wynikach wyszukiwania dla zdefiniowanych słów kluczowych. Atrybut ten powinien być unikalny dla każdego obrazu w serwisie.

Najważniejsze zasady dla atrybutów ALT

  • unikalne dla każdego obrazu w serwisie
  • brak nadmiernego używania słów kluczowych (np. alt=”hotel w Krakowie, hotele w Krakowie, hotele Kraków, Kraków hotele, tanie hotele Kraków, tanio hotel Kraków”)
  • opis zawartości obrazka uwzględniający słowo kluczowe (np. alt=”czerwone buty Nike rozmiar 45”)

Odpowiedni format zdjęcia

Najpopularniejszymi formatami zdjęć zamieszczanymi na stronach internetowych to: JPEG, PNG oraz GIF. Każdy z nich charakteryzuje się unikalnymi cechami.

Format JPEG (Joint Photographic Experts Group)

Obrazy o formacie JPEG są poddawane stratnej kompresji, która odbija się na jakości zdjęcia, ale pozytywnie wpływa na mniejszy rozmiar pliku graficznego.

Stratność JPG

Wpływ wielkości kompresji formatu JPEG na jakość zdjęcia oraz jego rozmiar

Format PNG (Portable Network Graphics)

Obrazy o rastrowym formacie PNG poddawane są bezstratnej kompresji plików, który został opracowany jako następca formatu GIF. Pomimo tego, że pliki PNG są bardzo popularne, ich rozmiar może być znacznie większy niż format JPEG.

Format PNG

Porównanie rozmiarów plików JPEG do PNG

Format GIF (Graphics Interchange Format)

Format GIF jest formatem używanym do prostych obrazów, które nie przekraczają dużej ilości kolorów. Format ten wykorzystywany jest do prostych obrazów, ikon czy nawet animacji.

format GIF

Porównanie rozmiarów plików JPEG, PNG i GIF

Rozmiar zdjęć

Wielu użytkowników frustruje fakt, że strona internetowa wczytuje się w zbyt długim czasie. Jednym z głównych powodów takiego stanu rzeczy jest umieszczanie wielkoformatowych zdjęć na stronach internetowych (ważące nawet po kilka MB [sic!]), które za pomocą arkusza styli CSS są skalowane do szerokości urządzenia użytkownika. Google traktuje czas renderowania strony internetowej jako bardzo ważny czynnik algorytmu rankingowego, który bezpośrednio wpływa na wyższe pozycje w wynikach wyszukiwania.

Co zrobić aby przyśpieszyć wczytywanie plików graficznych?

  • nie skalowanie wielkoformatowych zdjęć za pomocą arkusza styli css
  • umieszczanie „miniaturki” zdjęć dopasowanej do urządzenia użytkownika (odpowiednie dla desktopów, tabletów i smartfonów)
  • używanie narzędzi do bezstratnej kompresji plików graficznych (np. kraken.io lub TinyPNG)

Podsumowanie – optymalizacja grafik na stronie

Za pomocą wyżej wymienionych sposobów prostą, choć czasochłonną metodą można zoptymalizować obrazy na stronie internetowej. Czynników rankingowych, wpływających na wyższe pozycje obrazków w wynikach wyszukiwania, jest znacznie więcej, aczkolwiek te kluczowe zostały ujęte w powyższym poradniku.

  • Andrzej

    Ciekawe wskazówki, fajny materiał!

    • Dawid Duda

      Dziękujemy Andrzeju za budującą opinię 🙂