Wielkość ma znaczenie… optymalizacja obrazków

Wskazówki optymalizacyjne – obrazki

Oto kilka wskazówek, którymi warto się pokierować przy optymalizacji grafik na stronie:

• rozszerzenie pliku – ma znaczenie czy jest to jpg, png, czy gif. Najpopularniejsze jest rozszerzenie pliku jpg i często ono oszczędza najwięcej rozmiaru pliku.

• nazwa pliku – Google czyta adresy. Zauważa w nich słowa kluczowe. Więc zamiast nazywać plik 2143124234324.jpg warto go nazwać niebieski-rower.jpg. Taka nazwa jest nawet lepsza dla użytkownika, który może chcieć pobrać plik i używać go na komputerze.

• rozmiar pliku – w tym miejscu rozmiar ma znaczenie. Naturalnym jest, że jak najmniejszy rozmiar obrazka spowoduje, że strona będzie ładować się szybciej. Oczywiście też Google zaleca by kompresja nie odbywała się kosztem jakości i widoczności treści obrazka. Jednakże zapisując przykładowo obrazek w Photoshopie w jakości nieco niższej pozwoli nam to zaoszczędzić wiele bajtów bez zbytniej utraty jakości.

• rozdzielczość zdjęć – oczywiście chcemy by wszystko w naszej witrynie było wysokiej jakości. Ale czy jest sens zamieszczać zdjęcia w rozdzielczości FullHD, które to powodują, że musimy stronę przewijać horyzontalnie? Trzeba też pamiętać o użytkownikach urządzeń mobilnych, którym takie zdjęcie otwierać się będzie kilka minut. Oczywiście przykład z rozmiarem FullHD jest przesadzony, ale pokazuje, że trzeba pamiętać o odpowiednim dostosowaniu rozdzielczości do strony i potrzeb.

• atrybut alt – bardzo ważny znacznik w kodzie obrazka. Pozwala on na wyświetlenie danego tekstu w przypadku nie załadowania się obrazka (może się to zdarzyć z różnych przyczyn, chociażby błędu serwera). Google zwraca na niego uwagę – wręcz daje możliwość twórcy na opisanie zawartości obrazka. Warto zawrzeć w nim słowa kluczowe, ale oczywiści naturalnie – nie wypełniać ich po brzegi zbitą papką słów kluczowych.

• atrybut title – nie uznawany przez Google w takim samym stopniu co alt, jednakże daje kolejną możliwość na zmieszczenie słów kluczowych. Co nie zaszkodzi to może pomóc. Pamiętajmy o tym.

• mikroformaty – są niezwykle przydatne i z natury pomagają robotom w odpowiednim indeksowaniu i interpretowaniu elementów na stronie. A któż nie chce by jego strona była odpowiednio widziana przez roboty. Schema.org podaje również odpowiednie znaczniki właśnie dla plików graficznych zamieszczonych w serwisie.

• mapa obrazków – podobnie jak mapę adresów strony warto wykonać również oddzielną sitemapę zdjęć i obrazków w formie pliku XML. Należy go zgłosić podobnie jak sitemapę adresów podstron.

• unikalność – jak z każdym elementem na stronie czy nawet całym Internecie liczy się unikalność. Masa powielonych grafik nie pomoże stronie. Nie pokażą się też one w wynikach wyszukiwania grafiki.

Narzędzia, wskazówki, podpowiedzi…

Poniżej kilka stron, które pomogą w procesie optymalizacji obrazków:

• Google PageSpeed Insights

• Website Testing Tools

• Google Image Optimization