Podczas optymalizacji strony internetowej pod kątem SEO należy pamiętać o grafikach, które stanowią nieodłączną część każdego serwisu. Dobrze zoptymalizowane zdjęcia mają większą szansę na pojawienie się wyżej w wynikach wyszukiwania grafiki, dając tym samym możliwość zyskania dodatkowego ruchu na stronie.

Jak wybrać zdjęcia na stronę internetową?

Zdjęcia lub różnego rodzaju grafiki to elementy, które pojawiają się praktycznie w każdej zakładce na stronach internetowych. Jak je dobrze wybierać? Przede wszystkim starajmy się powiązać je tematycznie z konkretną zakładką. Warto również zdobywać “perełki”, które swoim wyglądem będą przyciągać wzrok użytkowników. Ma to szczególne znaczenie przy wybieraniu zdjęć jako obrazków wyróżniających do artykułów na blogu. Interesujące zdjęcie może skłonić użytkownika do kliknięcia w link i przeczytania artykułu.

Więcej o wyszukiwaniu zdjęć na swojego bloga znajdziesz w artykule:

Darmowe zdjęcia na bloga – skąd pobierać?

Nazwy grafik

Nazwy grafik umieszczanych w serwisach bardzo często są przypadkowe lub generowane automatycznie jak np. IMG025054.jpg. Jest to duży błąd. Nazwa plików jest czytana przez roboty i pozwala na wskazanie robotowi, co konkretnie znajduje się na zdjęciu. Nazwa musi odnosić się do tego co przedstawia grafika.

Zamiast standardowego 1245.jpg warto zastosować nazwę: Czarny-zegarek-meski-timex.jpg

Oprócz samej treści zawartej w nazwie zwróćmy uwagę na separatory i znaki specjalne. Należy unikać pauz dolnych, polskich znaków, znaków specjalnych typu: !@#$%^&.

Znaki specjalne, pauzy dolne czy spacje zamieniamy na zwykłą pauzę “-“.

Skalowanie grafik

Rozmiary obrazków nie są bez znaczenia. Jeśli wiemy, że na naszej stronie potrzebujemy grafiki o wymiarach 500x500px to właśnie grafikę takich rozmiarów wgrajmy na serwer. Oczywiście popularne CMS-y pozwalają na automatyczne skalowanie grafiki, która będzie widoczna na stronie, lecz pamiętajmy o tym, że czym większe rozmiary grafiki tym większa jej waga. Jeśli więc wgramy kilka obrazków na jedną podstronę o wymiarach faktycznych 3000x3000px, które będą w kodzie skalowane to czas wczytywania strony znacznie się zwiększy.

Zbyt duża waga grafik to jeden z najczęstszych problemów, które wykazują narzędzia do sprawdzania szybkości strony internetowej. (PageSpeed Insights czy GTmetrix), ale o tym już za chwilę 🙂

Istnieje mały wyjątek od reguły automatycznego skalowania. Aktualnie najczęściej spotykana rozdzielczość w monitorach to 1920×1080. Wiele laptopów posiada jeszcze 1366×768.

Jeśli prowadzimy bloga i nasz ekran ma rozdzielczość 1366×768, a dana grafika ma być rozciągnięta na pełną szerokość tekstu to sprawdźmy, ile powinna mieć na rozdzielczości 1920×1080 i właśnie taką wgrajmy. Waga grafiki będzie znacznie mniejsza niż takiej o szerokości 2000px, lecz mimo wszystko zachowamy dobrą jakość na różnych rozdzielczościach, co również jest ważne, aby całość wyglądała estetycznie.

Waga grafik

To ile waży nasza grafika na stronie ma wpływ przede wszystkim na szybkość jej wczytywania. Dlatego warto zastosować kompresję bezstratną zdjęć, aby zachować jak najwyższą jakość przy jak najmniejszej wadze.

Kompresję bezstratną możemy zastosować już na etapie przygotowania grafiki.

W Photoshopie przy zapisie grafiki w jpg wyskakuje okienko, w którym to możemy wykonać kompresję bezstratną:

Kompresja bezstratna w Photoshop CS6

Zmniejszając jakość z maksymalnej na średnią zmniejszamy wagę grafiki z 51,4k do 34k, a sama jakość zdjęcia nie uległa widocznemu dla oka pogorszeniu.

Oprócz programów graficznych do tego zadania możemy wykorzystać narzędzia online takie jak Tinyjpg czy JPEGmini.

W WordPressie znajdziemy do tego wtyczki, które pozwalają zmniejszyć wagę zdjęć, które już mamy wgrane na serwer. Świetną wtyczką do tego zadania jest Smush Image Compression and Optimization. Wtyczka automatycznie wykona kompresję bezstratną grafik w naszym serwisie. W wersji darmowej automatycznie możemy zająć się 50 grafikami jednocześnie. Po wykonanej pracy musimy ponownie wcisnąć magiczny button BULK SMUSH NOW, aby wtyczka rozpoczęła pracę z kolejnymi 50 grafikami.

Tytuł

Title grafiki to opcjonalny znacznik, który ma mniejszą ważność w porównaniu z opisem alternatywnym, o którym już za chwilę. Jednak warto go uzupełniać. Pamiętajmy jedynie, aby nie powielać tej samej treści w title i opisie alternatywnym.

Opis alternatywny

Opis alternatywny, czyli alt to już bardzo ważne miejsce, które powinno być uzupełnione w każdej grafice. Alt powinien krótko opisywać to, co znajduje się na grafice. Alt to także idealne miejsce na “wplecienie” słów kluczowych – oczywiście z umiarem oraz powiązanych tematycznie z grafiką.

Obrazek na stronę wstawiamy za pomocą kodu:

<img src=”Przykładowy adres grafiki” alt=”Przykładowy opis alternatywny” />

Korzystając np. z WordPressa mamy zadanie ułatwione bowiem podczas wgrywania obrazka otrzymujemy pola, gdzie możemy wpisać opis alternatywny czy title:

Uzupełnianie title i alt w WordPressie

Przyjazny adres URL grafiki

Jeśli pozwalają nam na to możliwości techniczne to możemy zadbać o przyjazny adres URL grafiki usuwając z niego wszelkie zbędne katalogi i oznaczenia.

Sitemapa Grafik

Sitemapa grafik to nic innego jak mapa wszystkich grafik w serwisie zawierająca ich adresy i lokalizację na stronie. Jeśli przykładowo na konkretnej podstronie widnieją dwa obrazy to kod wygląda następująco:

Sitemap Grafik - kod

Zachęcam więc do sprawdzenia jakości optymalizacji grafik w swoim serwisie. Dobra optymalizacja daje mnóstwo korzyści, z których nie warto rezygnować.

Optymalizacja grafiki pod SEO
Ocena: 4.6 z: 9

Starszy Specjalista SEO w Agencji Semahead – Agencji SEM Grupy INTERIA. Hobbystycznie zajmuje się WordPress-em oraz grafiką komputerową. W wolnych chwilach drażni sąsiadów przy pomocy gitary elektrycznej.