CityHost.UA
Pomoc i wsparcie

SEO-optymalizacja obrazów: jak zoptymalizować zdjęcia na stronie

 12903
06.10.2023
article ```html

 

 

Właściciele zasobów internetowych i specjaliści SEO wykorzystują różne sposoby przyciągania użytkowników, przeprowadzając kompleksową wewnętrzną i zewnętrzną optymalizację strony. A jednym z niezwykle skutecznych sposobów na poprawę strony jest optymalizacja obrazów – proces, który pozwala uczynić zdjęcia atrakcyjnymi dla robotów wyszukiwarek. Dzięki zrozumieniu procesu i wykonaniu stosunkowo prostych działań, można zwiększyć ranking zarówno strony, jak i poszczególnych obrazów, uzyskując znaczną część ruchu.

Więcej o optymalizacji obrazów i innych aspektach SEO dowiesz się na konferencji SEO Kolaboratora, która odbędzie się 20 października 2023 roku w formacie online. To ogromne wydarzenie branżowe dotyczące promocji w wyszukiwarkach, które dostarczy widzom 8 godzin wartościowej treści od ośmiu czołowych prelegentów. Udział jest bezpłatny po wcześniejszej rejestracji.

Planowane są wykłady na aktualne tematy współczesnej optymalizacji wyszukiwarek: techniczne SEO, link building, automatyzacja, praktyczne porady i lifehacki dotyczące promocji na rynku ukraińskim i międzynarodowym.

Jak SEO optymalizacja obrazów pomaga zwiększyć ruch na stronie

Optymalizacja obrazów – to zestaw działań mających na celu przygotowanie i poprawę zdjęć do użycia cyfrowego, najczęściej do dodania na stronę. Proces składa się z wielu etapów, w tym poprawnego nadawania nazw plików i zmniejszania ich rozmiaru, używania tekstu alternatywnego, dodawania podpisów. To znaczy, że robisz tak, aby obrazy spełniały podstawowe wymagania robotów wyszukiwarek (crawlerów), a one pomagają Ci przyciągnąć więcej ruchu.

Poprawna SEO optymalizacja obrazów pozwala:

  • uzyskać dodatkowy ruch – wykonanie prostych działań pomaga przyciągnąć na stronę więcej zmotywowanych użytkowników, którzy mogą stać się stałymi klientami;

  • uprościć promocję strony – zoptymalizowane zdjęcia mają pozytywny wpływ na całą stronę, poprawiając jej pozycje w wyszukiwarce;

  • przyspieszyć ładowanie stron – pliki ładują się szybciej, co zwiększa lojalność użytkowników i robotów wobec zasobów internetowych;

  • uczynić stronę bardziej dostępną – zoptymalizowane obrazy będą kompatybilne z różnymi urządzeniami i przeglądarkami, dzięki czemu uda się przyciągnąć więcej odwiedzających;

  • zaoszczędzić pieniądze – małe pliki obrazów zajmują mniej miejsca na hostingu, co obniża koszty jego utrzymania.

Podsumowując powyższe korzyści, SEO optymalizacja obrazów – to skuteczny sposób na uczynienie zdjęć przyjaznymi dla robotów wyszukiwarek i użytkowników, przyspieszenie ładowania strony, zmniejszenie obciążenia hostingu, poprawę interakcji z odwiedzającymi zasoby internetowe. Wykonując proste działania, znacznie uprościsz promocję strony w wyszukiwarkach i poprawisz interakcję z użytkownikami, zwiększając ich lojalność wobec swojej marki.

Przeczytaj także: Czym jest ruch na stronie, jak go zmierzyć i dlaczego warto go kontrolować

Jakie są metody optymalizacji obrazów na stronie

SEO optymalizacja obrazów składa się z wielu punktów, z których każdy ma określony wpływ na ostateczny wynik. Oczywiście możesz wykonać tylko kilka działań, na przykład zmniejszyć rozmiar plików lub stworzyć wysokiej jakości podpis do zdjęć, ale uzyskanie zadowalającego efektu pomoże tylko kompleksowe podejście. Dlatego szczegółowo opisaliśmy każdą metodę optymalizacji obrazów dla strony.

Unikalne obrazy dla strony

Wiele stron używa do ilustrowania swoich artykułów obrazów pobranych za darmo z Internetu. Prowadzi to do sytuacji, w której dla jednego zapytania można znaleźć dziesiątki zdjęć.

Jeśli rozważasz promocję za pomocą obrazów jako jedną z metod SEO – kupuj je na stockach, twórz samodzielnie za pomocą prostych edytorów lub zamawiaj sesje u fotografów. Tworząc wyniki wyszukiwania, Google stara się oferować użytkownikom różne obrazy. Jeśli Twoje zdjęcie jest unikalne, istnieje duża szansa, że trafi do czołówki wyników.

Ponadto warto zadbać o to, aby Twoje zdjęcie nie zostało skradzione przez konkurencję. Możesz chronić treść za pomocą skryptów, które zabraniają kopiowania lub pobierania, znaków wodnych lub logo na obrazie.

Tworzenie poprawnej nazwy pliku obrazu

Proces optymalizacji obrazów zaczyna się od nadania nazwy pliku. Samodzielnie tworzysz zdjęcie lub bierzesz je z Internetu, a następnie nadajesz mu nazwę. Biorąc pod uwagę, że tę nazwę będą widzieć tylko crawlerzy, należy uczynić ją zrozumiałą właśnie dla robotów wyszukiwarek.

Aby uzyskać największy efekt SEO, nadaj plikowi zrozumiałą nazwę, odpowiednią do tego, co przedstawia obraz. Nazwę należy koniecznie zapisać transkrypcją w alfabecie łacińskim, a między słowami używać znaku «-». Zresztą poprawne zapisanie nazwy pliku w alfabecie łacińskim ułatwiają darmowe usługi online, na przykład Grafiati.com: wpisujesz nazwę obrazu, a system natychmiast przekształca tekst cyrylicą na łacińskie.

Grafiati.com - transliteracja tekstu z cyrylicy na łacinę

Nie zapisuj nazwy cyrylicą — w takim przypadku przekształci się ona w zbiór znaków, które nie będą zrozumiałe dla crawlerów i utrudnią kod.

Przeczytaj także: Jak stworzyć swoją stronę na szablonie html i opublikować ją w internecie — instrukcja dla początkujących 

Używanie nowoczesnego formatu obrazu

Kiedy skończysz tworzyć obraz i wymyślisz dobrze zoptymalizowaną nazwę, musisz wybrać najlepszy format. Istnieją trzy najczęściej używane formaty obrazów dla stron:

  • JPG – nadaje się do zdjęć i obrazów z płynnymi przejściami kolorów, przy czym sam plik można kompresować bez znacznej utraty jakości;

  • PNG pozwala uzyskać skomplikowany obraz z maksymalnie wyraźną treścią tekstową, ale zwiększa rozmiar pliku;

  • WebP – nowoczesny, efektywny format, zapewniający wysoką jakość przy mniejszym rozmiarze pliku, co idealnie nadaje się dla stron internetowych.

Jeśli chcesz uzyskać obraz z równowagą między wysoką jakością a małym rozmiarem pliku, wybierz nowoczesny format WebP. Na wyjściu otrzymasz doskonały obraz, wykonany zgodnie z instrukcjami Google dotyczącymi optymalizacji stron internetowych. Co więcej, już teraz większość przeglądarek obsługuje obraz WebP, więc nie będzie żadnych problemów.

Zmniejszanie rozmiaru obrazu bez utraty jakości

Jaki jest najlepszy sposób na optymalizację obrazu dla strony? Zmniejszyć wagę zdjęcia, ale jednocześnie zachować jego dobrą jakość. To znaczy, że do zmniejszenia rozmiaru zdjęcia niekoniecznie (ale naprawdę warto) musisz używać nowoczesnego formatu: zapisujesz zdjęcie w PNG lub JPG i wysyłasz je na odpowiednią usługę, a na wyjściu otrzymujesz plik o wadze mniejszej o 60-80%. Później możesz go przekonwertować na WebP.

TinyPNG - zmniejsz rozmiar zdjęcia

Na przykład weźmy zrzut ekranu strony CityHost w formacie PNG. Aby skompresować zdjęcie bez utraty jakości, idealnie nadaje się usługa TinyPNG: plik ważył początkowo 264,3 KB, a po kompresji – 82,3 KB (-69%).

Jak skompresować zdjęcie bez utraty jakości

Dobrą alternatywą jest internetowy optymalizator obrazów Optimizilla. Na przykład to samo zdjęcie – kompresja do 57 KB (-68%). Efekt może wydawać się nieznaczny, ale pamiętaj, że na stronie może być wiele obrazów, a rozmiar niektórych plików czasami sięga 1 MB, więc ostateczny wynik będzie już znacznie bardziej zauważalny.

Poprawny atrybut alt i opis obrazu

Atrybut alt – to alternatywna nazwa zdjęcia, która wyświetla się, gdy obraz nie ładuje się. Poprawne użycie atrybutu pomaga nie tylko w przypadku błędu strony, ale także poprawia SEO, ponieważ wyszukiwarki używają tego tekstu do zrozumienia treści obrazu.

Atrybut alt - optymalizacja obrazów dla strony

Aby poprawnie określić atrybut alt dla obrazu, postępuj zgodnie z następującymi zaleceniami:

  • optymalna długość – od 5 do 15 słów lub 125 znaków;

  • opis obrazu – tekst powinien oddawać istotę obrazu, a nie tylko zawierać zbiór słów lub kluczy;

  • obecność kluczy – używaj głównych słów kluczowych, ale nie należy spamować;

  • używaj spacji – alt to alternatywny tekst obrazu, dlatego między słowami zamiast myślnika (jak to należy robić przy nadawaniu nazw plików) używaj zwykłych spacji;

  • pozostawiaj atrybut pusty tylko w przypadkach, gdy obraz jest dekoracyjny, to znaczy nie niesie żadnego sensu.

Każde zdjęcie powinno zawierać nie tylko atrybut alt, ale także obszerne, interesujące opisy. Mowa tu o opisie, który wyświetla się obok zdjęcia w wynikach wyszukiwania, czyli jeszcze bardziej rozwija to, co jest na nim przedstawione. Może on składać się z 2-3 dużych zdań i zawierać więcej słów kluczowych.

Używanie Lazy Loading dla obrazów

Lazy Loading – to technika optymalizacji ładowania stron internetowych, która pozwala poprawić wydajność strony, szczególnie w zakresie ładowania obrazów i wideo. Dzięki tej technologii obrazy ładują się tylko wtedy, gdy są widoczne na ekranie użytkownika lub gdy użytkownik się do nich zbliża, zamiast pojawiać się od razu przy ładowaniu strony. Dzięki temu można znacznie zwiększyć szybkość strony, co pozytywnie wpływa na jej ranking w wyszukiwarce.

Technika optymalizacji Lazy Loading jest szczególnie przydatna na stronach z dużą ilością obrazów, gdzie wyświetlanie wszystkich zdjęć jednocześnie może spowolnić szybkość ładowania strony.

Aby użyć technologii Lazy Loading, wystarczy dodać atrybut loading do tagu img. A dla atrybutu loading należy dodać wartość "lazy", wskazującą przeglądarce, że obraz będzie ładowany tylko wtedy, gdy pojawi się w widocznej części okna przeglądarki. Na przykład:


<img src="image.jpg" alt="Opis zdjęcia" loading="lazy">

Rozumiemy, że samodzielne wpisywanie takiego atrybutu dla każdego zdjęcia jest bardzo niewygodne, dlatego zalecamy korzystanie z specjalnych wtyczek. Na przykład, jeśli strona działa na CMS WordPress, warto zainstalować znaną wtyczkę Smush (ponad 1 mln pobrań). Wystarczy zainstalować wtyczkę, przejść do panelu informacyjnego i aktywować funkcję Lazy Loading. To znaczy 1-2 minuty i odłożone ładowanie jest aktywowane, a wraz z nim zwiększa się szybkość strony.

Dostosowanie obrazów do różnych urządzeń

Dostosowanie obrazów polega na tym, aby dobrze wyświetlały się na różnych urządzeniach o różnych rozmiarach ekranów i rozdzielczości, uwzględniając komputery, tablety i smartfony. Dla crawlerów ten punkt jest bardzo ważny: jeśli osoba nie będzie mogła zobaczyć zdjęcia na swoim urządzeniu, to po co umieszczać stronę w TOP wyników!

W rzeczywistości dostosowanie obrazów jest obowiązkowym punktem już na etapie tworzenia strony, to znaczy, że programista dodaje specjalne zapytania medialne, które pozwalają dostosować style w zależności od charakterystyki urządzenia użytkownika. 

Jednak nigdy nie zaszkodzi osobiście sprawdzić dostosowanie obrazów. Wystarczy kliknąć prawym przyciskiem myszy na stronie i wybrać «Sprawdź».

Sprawdzanie dostosowania obrazów do różnych ekranów

Następnie należy wprowadzić kombinację Ctrl+Shift+M i zobaczyć, jak strona wyświetla się na różnych urządzeniach.

Przeczytaj także: Czym jest hosting obrazów i czym różni się od stocku zdjęć

7 błędów przy optymalizacji obrazów

Jak widzisz, SEO optymalizacja obrazów składa się z relatywnie prostych i zrozumiałych działań, które nie wymagają tak dużo czasu, jak może się wydawać. Wystarczy dobrać odpowiedni format, poprawnie nazywać pliki, dodawać atrybut alt i tworzyć treściwe opisy. A włączenie technologii Lazy Loading, biorąc pod uwagę dostępność sprawdzonej wtyczki Smush, zajmuje tylko 1-2 minuty.

Jednak wielu nadal popełnia pewne błędy, które niweczą całą wykonaną pracę. Dlatego postanowiliśmy opowiedzieć o 7 powszechnych błędach przy optymalizacji obrazów:

  • brak tagu alt – dodanie kilku niespowiązanych ze sobą słów lub całkowicie pustego pola (jeśli to nie jest dekoracyjne zdjęcie);

  • pliki dużego rozmiaru – obrazy dużego rozmiaru lub wysokiej rozdzielczości bez ich kompresji spowalniają stronę;

  • wiele obrazów – nadmiar zdjęć na stronie zmniejsza szybkość jej ładowania;

  • nieodpowiednie obrazy – obrazy, które nie odnoszą się do treści strony, mogą wprowadzać zamieszanie dla wyszukiwarek i użytkowników, zwiększać liczbę odrzuceń, a tym samym pogarszać ranking całej strony;

  • błędy z lazy loading – zazwyczaj znane wtyczki idealnie konfigurują technikę lazy loading, ale nikt nie jest wolny od błędów, dlatego należy regularnie sprawdzać swoją stronę;

  • źle dostosowane obrazy – dzięki znanym CMS i poszczególnym wtyczkom dostosowanie zdjęć do urządzeń mobilnych jest bardzo łatwe, ale nadal należy sprawdzać każdy plik, ponieważ czasami mogą występować błędy w wyświetlaniu na poszczególnych urządzeniach.

Szczegółowo opisaliśmy, czym jest SEO optymalizacja obrazów, jak ją wykonać i jakie błędy najczęściej popełniają webmasterzy. Teraz pozostaje tylko osobiście sprawdzić opisane przez nas metody, poprawnie konfigurując efektywne źródło dodatkowego ruchu. I koniecznie dokładnie sprawdzaj swoje działania, unikając powyższych błędów.

```


Podobał Ci się artykuł? Powiedz o nim znajomym:

Author: Bohdana Haivoronska

Journalist (since 2003), IT copywriter (since 2013), content marketer at Cityhost.ua. Specializes in articles about technology, creation and promotion of sites.