Zdjęcia i grafiki podnoszą atrakcyjność naszej strony. Mają wiele zadań. Przykuwają uwagę, pomagają w organizacji tekstu na stronie, potęgują / wspierają komunikat, mogą też być elementem poprawiającym widoczność strony w wynikach wyszukiwania. Według aktualnych danych wyszukiwarka graficzna przejmuje obecnie 27% całego ruchu w sieci. Warto więc zoptymalizować zdjęcia i grafiki na swojej stronie. Jak to zrobić dobrze?
Nie działa? Oglądaj na YouTube – https://www.youtube.com
Chcesz dostawać powiadomienia o moich nowych odcinkach na kanale YouTube kliknij!
#1 Rozmiar
Rozmiar obrazu, to kryterium, które odnosi się do wymiaru danego obrazu. Wymiary obrazów w Internecie podawane są w pixelach np. 750 na 500 px. Pixel to po prostu pojedynczy punkt ekranu lub powierzchni. Zasadniczo na obrazy, które widzimy na swoich urządzeniach składają się zwykle setki lub tysiące pixeli. Załóżmy, że na stronie mamy pole z obrazem o rozmiarach 900 px na 600 px. Zasadniczo, możemy wstawić w to miejsce obraz o takich samych rozmiarach, ale także mniejszych (system rozciągnie je wtedy do docelowych rozmiarów), jak i większych system zmniejszy. Im większe zdjęcie tym więcej informacji zawiera, plik zdjęcia jest cięży, a jego pobieranie z serwera trwa dłużej. Zasadą jest, że rozmiar obrazu powinien być zawsze adekwatny do rozmiaru, w jakim wyświetla się zdjęcie na docelowym ekranie. Problem polega na tym, że dziś strony oglądane są na różnych urządzeniach. Rozwiązaniem jest tutaj srcset, czyli funkcjonalność pozwalająca na wyświetlanie różnych plików w zależności od rozpoznanej rozdzielczości. W skrócie, dodajemy trzy różne zdjęcia, a system po rozpoznaniu z jaką rozdzielczością ma do czynienia wyświetla mniejszy lub większy obraz. Niemniej zasada jest taka sama. Każde ze zdjęć, które wyświetla się w zależności od zidentyfikowanej rozdzielczości ekranu powinno mieć rozmiar docelowy jak najbliższy rzeczywistemu.
#2 Kompresja
Z drugiej strony medalu mamy też DPI. DPI to wartość pokazująca nasycenie pixeli na cal. Innymi słowy w jednym calu możemy zawrzeć np. 300 pixeli, ale możemy też zawrzeć ich 70. Większe nasycenie powierzchni pixelami przekłada się na jakość oglądanego zdjęcia. Im większy będzie wskaźnik DPI tym wyraziste będzie zdjęcia, choć oczywiście do momentu, który jest w stanie uchwycić ludzkie oko. Niestety wysokie DPI przekłada się na wagę zdjęcia i czas ładowania. Stąd też obraz powinien być skompresowany. Mamy dwa rodzaje kompresji. Kompresja stratna i bezstratna. Bezstratna, jak sama nazwa wskazuje nie powoduje utraty jakości, zwykle z obrazu usuwa się teoretycznie zbędne dane czyli metadane, oszczędzając przy tym kilka kilobajtów. To według mnie zła praktyka. O wiele lepsza moim zdaniem jest kompresja strata, podczas której liczba pixeli przypadająca na cal ulega zmniejszeniu, a wraz z nimi jakość. Oczywiście warto mieć to pod kontrolą by skompresować zdjęcie optymalnie – czyli uzyskując relatywnie najlepszą jakość przy najniższej wadze zdjęcia.
#3 Formaty
Obrazy w sieci zwykle mają jeden z 3 formatów – PNG, JPEG lub SVG.
- PNG – dedykowany grafikom i wektorom aniżeli zdjęciom, obraz w PNG zwykle będzie miał lepszą jakość, ale rozmiar pliku będzie większy, kompresja działa tu bardzo liniowo.
- JPEG – format dedykowany zdjęciom, daje więcej swobody w zakresie kompresji, możemy szukać tego DPI i wagi, które dadzą nam najlepsze możliwe zdjęcie.
- SVG – wektorowy format, niezwykle skalowalny, często właśnie optymalny, powiem tylko, że zachęcam do zabawy i porównań
Specjalista SEO. Optymalizacja SEO stron internetowych i e-sklepów. Sprawdź mnie.
#4 Nazwa pliku
Przechodzimy teraz do optymalizacji pod kątem słowa kluczowego. W nazwie pliku powinniśmy użyć słowa kluczowego, które jest najistotniejsze dla strony, na której dany plik będzie się wyświetlać. Poszczególne słowa składające się na frazę kluczową powinny być oddzielone myślnikami. Pamiętajmy też by nie nazywać zdjęć tak samo, może to powodować błędy w logice strony. <img src=”image-name.jpg”>
#5 Tekst alternatywny
Tekst alternatywny to opis, który pojawia się np. w sytuacji, gdy zdjęcie nie może się załadować. Pomaga on zaindeksować treść zdjęcia i wskazać bootom jego zawartość. Dodając zdjęcie do biblioteki mediów powinniśmy zadbać o to by jego tekst alternatywny zawierał obrane słowo kluczowe, które jest najważniejsze dla danej strony. <img alt=”image description”>
#6 Tytuł obrazu
Tytuł obrazu to również miejsce gdzie znaleść powinno się nasze słowo kluczowe. W praktyce jeśli mowa o tym samym obrazie to wszystkie trzy powyższe elementy realizują to samo słowo kluczowe. <img title=”image title”>
#7 Dane strukturalne
Kod html, który opisuje i kategoryzuje daną treść strony lub jej element zgodnie z przyjętymi przez Google wzorcami. Pomagają wyszukiwarce zrozumieć funkcję informacji umieszczoną na stronie. W praktyce pozwalają na dużo ciekawszą ekspozycję tego elementu w wynikach wyszukiwania. Widziałeś w wynikach wyszukiwania przepisy, okładki czy zdjęcia, to mogą być właśnie dane strukturalne.
#8 Lokalizacja zdjęcia
Współrzędne GPS dodawane są coraz częściej przez telefon, którym robisz zdjęcie. Może to być plus lub minus, zwłaszcza jeśli chcesz powiązać zdjęcie z odmienną lokalizacją od tej, w której zostało wykonane. Lokalizacja zdjęcia może dołożyć swoją małą cegiełkę do optymalizacji strony, zwłaszcza jeśli zależy Ci na optymalizacji pod lokalne wyniki wyszukiwania. Można dodać do plików graficznych współrzędne GPS, służy temu np. program Geosetter, w którym możesz ręcznie nadać dowolne dane geograficzne swojemu zdjęciu.
#9 Mapa witryny
Jeśli obrazy mają być widoczne w wynikach wyszukiwania to ich adresy powinny znaleźć się w mapie witryny. To wszystko na dziś. Na koniec jeszcze raz powtórzę, wyszukiwarka graficzna przejmuje dziś 27% udziału, ta liczba mówi sama za siebie. Warto zadbać o swoje obrazy. Jeśli podobał Ci się ten wpis i chciałbyś otrzymywać powiadomienia o nowych postach na tym kanale to zapisz się na newsletter.