Jak optymalizować grafikę pod SEO

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: 5 z: 8

Paweł Bugno

Od 2012-15 roku SEO Copywriter - znaki liczył w milionach. Z czasem pojawiło się szersze zainteresowanie branżą SEO, które od 2014 roku jest regularnie rozwijane. Z pasji grafik komputerowy, ulubiony rodzaj grafiki to grafika rastrowa. Aktualnie Specjalista SEO w Agencji Semahead - agencji SEM Grupy INTERIA. W wolnych chwilach szarpie struny na gitarze elektrycznej.

  1. W kwestii niedocenianego często title warto wspomnieć o tym, ze wyświetla się on po najechaniu kursorem na zdjęcie 🙂

      1. Świetny artykuł – o wszystkich wymienionych elementach należy pamiętać.
        dawstaw kwestia wagi grafik znajduje się we wszystkich poważnych audytach seo i jest to norma…

  2. A gdzie elementy takie jak metadane zdjęcia ? to chyba kluczowy element
    Tłumaczysz co to alt na obrazku ? to nie oczywiste ?
    Elementy związane z wagą grafik to nie kwestia związana z optymalizacją SEO ale zwykłą optymalizacją i szybkością strony.

    1. Jeśli elementy, które są wypisane w tym artykule będą poprawnie wdrożone to z pewnością nam to wystarczy.
      Co do atrybutu alt – nie jest to oczywiste, jest to często powtarzane, a mimo wszystko znaczna większość stron, których właściciele decydują się na zakup audytu seo nie ma poprawnie wdrożonych atrybutów alt.

      Waga grafik to jak najbardziej kwestia związana z optymalizacją SEO, ponieważ szybkość strony to jeden z elementów rankingowych 🙂

    1. Stworzenie sitemapy grafik jest w stanie “zwiększyć prawdopodobieństwo wskazania Twoich obrazów w wynikach Wyszukiwarki grafiki” jak to mówi samo Google 🙂
      Jednak jeśli jesteś w trakcie optymalizacji całej strony to zadanie z sitemapą grafik możesz sobie zostawić na koniec 🙂

  3. mam problem z smushit, program co prawda optymalizuje wielkość grafik ale jest to znikoma różnica,
    polecisz coś co bardziej może się przydać?

Odpowiedz na „SeoAnuluj pisanie odpowiedzi

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *