12 Ważnych Wskazówek Dotyczących Optymalizacji Obrazów dla SEO, które Warto Poznać

Dowiedz się, jak zoptymalizować obrazy na swojej stronie internetowej, aby lepiej widzieć je w wyszukiwarkach, korzystając z tych 12 wskazówek i technik optymalizacji obrazów dla SEO.

Obrazy często zajmują największą część stron internetowych.

Mają własną zakładkę w wynikach Google, a nawet własny algorytm. Pojawienie się w wynikach wyszukiwania obrazów powinno być częścią pełnej strategii SEO, aby przyciągnąć użytkowników szukających obrazu.

Twój content powinien zawierać wysokiej jakości obrazy, więc dlaczego ich nie zoptymalizować?

To jak darmowe mleko do ciasteczek Oreo od wyszukiwarek. Nie bierz tylko ciasteczek – lepiej zamocz je w mleku. W tym artykule szczegółowo omówimy każdy aspekt SEO dla obrazów i podamy wskazówki, jak zoptymalizować obrazy, aby lepiej widziały się w wyszukiwarkach.

Jak wyszukiwarki indeksują i rozumieją obrazy

Wyszukiwarki skanują strony internetowe w celu wykrycia obrazów i wyciągnięcia z nich danych, takich jak metadane i nazwy plików.

Google bierze pod uwagę takie czynniki jak tekst otaczający, nazwa pliku obrazu, tekst alt, podpisy i zawartość strony, aby zrozumieć kontekst obrazów, a także korzysta z technologii rozpoznawania obrazów, aby zrozumieć ich zawartość.

Co to jest SEO dla obrazów?

Optymalizacja obrazów to zestaw technik mających na celu zwiększenie widoczności w wynikach wyszukiwania (SERP) na podstawie wiedzy o tym, jak wyszukiwarki skanują, rozumieją i oceniają obrazy.

Obejmuje to kompresję obrazów w celu skrócenia czasu ładowania, stosowanie adaptacyjnych obrazów dla różnych rozmiarów ekranów, wdrażanie odroczonego ładowania, dodawanie odpowiedniego tekstu alt w celu poprawy doświadczeń użytkowników, używanie opisowych nazw plików oraz wdrażanie danych strukturalnych dla obrazów.

Z tymi podstawami przyjrzyjmy się każdej wskazówce dotyczącej optymalizacji obrazów bardziej szczegółowo.

1. Wybór właściwego formatu obrazu

Istnieje wiele formatów obrazów, ale wyszukiwarka Google obsługuje tylko następujące formaty: JPEG, PNG, WebP, BMP, GIF i SVG.

Rozważ różnice między tymi formatami i ich wpływ na Twoją stronę oraz SEO.

• PNG: Używa kompresji bezstratnej, co oznacza, że dane obrazu nie są tracone. To pozwala uzyskać wysokiej jakości obrazy i wspiera przezroczystość, ale rozmiar pliku jest większy. Idealny do drukowania.
• JPEG: Używa kompresji stratnej, co prowadzi do pogorszenia jakości obrazu, ale można dostosować poziom jakości, aby uzyskać równowagę między rozmiarem pliku a jakością.
• WebP: Stworzony przez Google, obsługuje kompresję bezstratną lub stratną i jest bardziej wydajny niż JPEG (o 25-80%). Pozwala uzyskać mniejsze pliki przy zachowaniu jakości. Obsługiwany przez wszystkie główne przeglądarki.
• GIF: Używa kompresji bezstratnej, ale jest ograniczony do 256 kolorów, więc mniej nadaje się do wysokiej jakości obrazów i bardziej nadaje się do prostych grafik i animacji.
• SVG: Jest to format wektorowy używany do logotypów, ikon i innych projektów, ponieważ można go skalować do dowolnego rozmiaru bez zwiększenia rozmiaru pliku. Idealny do responsywnego projektowania stron internetowych.
• BMP: Duże i niekompresowane pliki obrazów, które zachowują bardzo wysoką jakość. Ze względu na duży rozmiar plików zazwyczaj nie są używane na stronach internetowych, ponieważ mogą znacznie spowolnić czas ładowania stron.

Najlepszą opcją jest użycie formatu PNG, który następnie można przekonwertować na format WebP dla aplikacji internetowej.

Jeśli chodzi o konwersję GIF na WebP, zwróć uwagę, że starsze przeglądarki, takie jak Safari 15.6 (macOS Catalina) i starsze wersje, nie obsługują animowanych formatów WebP.

Zazwyczaj tylko niewielka liczba użytkowników używa przestarzałych wersji przeglądarek, więc nie powinno to stanowić poważnych problemów.

Jako ogólna zasada, używając określonej technologii, należy regularnie monitorować procent urządzeń, które ją obsługują, za pomocą Google Analytics.

Jak kompresja wpływa na jakość obrazów i czas ładowania

Aby to zrozumieć, rozważmy próbkę obrazu w formacie BMP i przekonwertujmy ją na różne formaty.

Zobaczmy, jak zmienia się rozmiar pliku i czas ładowania na stronie internetowej na podstawie mojego doświadczenia. Jako środowisko testowe użyliśmy lokalnego serwera Apache i zamieściliśmy obrazy na przykładowej stronie HTML.

To ilustruje efektywność formatu WebP.

Ma najmniejszy rozmiar pliku i ładuje się pięć razy szybciej niż PNG i prawie dwukrotnie szybciej niż pliki JPG.

Dlatego zaleca się użycie formatu WebP. Jeśli to zrobiłeś, już osiągnąłeś znaczny postęp w optymalizacji czasu ładowania. (Są przypadki, gdy rozmiar obrazu w formacie WebP może być większy niż oryginalny plik. Dowiedz się więcej na stronie FAQ Google.)

Jednak zmiana formatu obrazu, czyli zastosowanie algorytmu kompresji, może prowadzić do utraty jakości i wyrazistości. Oznacza to, że musisz wybrać odpowiedni format w zależności od charakteru swojej strony internetowej.

Na przykład, jeśli masz stronę fotograficzną, gdzie zachowanie wysokiego poziomu szczegółowości w obrazach jest kluczowe dla doświadczeń użytkowników, zaleca się użycie formatu PNG zamiast JPG lub WebP.

W takim przypadku można wyświetlać miniaturki w formacie WebP, które odwołują się do obrazów wysokiej jakości w formacie PNG.

Omówiliśmy różne formaty obrazów i ich odpowiednie metody kompresji.

Teraz porozmawiajmy o tym, jak kompresować obrazy. Po pierwsze, są dostępne bezpłatne i stosunkowo tanie narzędzia, które można łatwo znaleźć w internecie i zainstalować na swoim komputerze. Dla leniwych istnieją różne serwisy do kompresji obrazów, które wykorzystują zaawansowane algorytmy i usuwają niepotrzebne metadane (np. dane EXIF ​​i GPS), aby zmniejszyć rozmiary plików poza podstawową kompresję właściwą dla standardowych formatów plików.

Te serwisy stosują zaawansowane techniki kompresji stratnej lub bezstratnej, selektywnie usuwając dane mniej zauważalne dla ludzkiego oka.

Serwisów jest obecnie bardzo dużo i wciąż się pojawiają. Dlatego nie daję szczególnych rekomendacji dotyczących tego, jaki serwis lub oprogramowanie używać. To kwestia gustu. Wszystko, co musisz zrobić, to po prostu wejść do Google i wpisać w wyszukiwarkę „serwis kompresji obrazów” lub „darmowe oprogramowanie do kompresji obrazów”!

Jednak zachowaj ostrożność, ponieważ kompresja za pomocą tych narzędzi może zauważalnie pogorszyć jakość obrazów. Na przykład przy kompresji zrzutów ekranu z tekstem tekst może się zniekształcić.

Dlatego zawsze zaleca się dokładne sprawdzenie i wybór odpowiednich typów optymalizacji.

Co z formatem AVIF?

AVIF to nowy format, który jest obsługiwany przez wszystkie główne przeglądarki, jednak na razie nie jest wspierany przez Google, dlatego nie uwzględniliśmy go na naszej wstępnej liście.

Ten format oferuje jeszcze wyższy poziom kompresji przy użyciu stratnej kompresji.

Na przykład, ten sam plik obrazu w formacie AVIF waży 11 KB w porównaniu do 41 KB w formacie WebP.

Jednak, jak można zauważyć z porównania poniżej, obniża to jakość obrazu. Jest to widoczne z wyrównania nierówności, które pojawia się przy kompresji obrazu za pomocą algorytmów kompresji AVIF, w przeciwieństwie do WebP po prawej stronie.

Jeśli jesteś zadowolony z jakości AVIF i chcesz go używać, możesz to zrobić, włączając go w tagu <picture> jako pierwszy <source>.

Przeglądarki, które obsługują AVIF, wyświetlą go nawet w mniejszym rozmiarze.

Google, który w momencie pisania tego artykułu wciąż nie wspiera tego formatu, po prostu go zignoruje i przejdzie do następnego formatu wskazanego w tagu <picture>.

Oto przykład kodu:

<picture>
<!-- AVIF format will be processed if client (i.e. browser ) supports it as a first in list-->
<source type="image/avif"
srcset="image-300w.avif 300w, image-600w.avif 600w, image-1200w.avif 1200w"
sizes="(max-width: 600px) 300px, (max-width: 900px) 600px, 1200px">
<!-- WebP format will be processed if client doesn't support AVIF -->
<source type="image/webp"
srcset="image-300w.webp 300w, image-600w.webp 600w, image-1200w.webp 1200w"
sizes="(max-width: 600px) 300px, (max-width: 900px) 600px, 1200px">
<!-- If WebP is also not supported, the browser will then fall back to the PNG format -->
<source type="image/png"
srcset="image-300w.png 300w, image-600w.png 600w, image-1200w.png 1200w"
sizes="(max-width: 600px) 300px, (max-width: 900px) 600px, 1200px">
<!-- Lastly, if none of the advanced formats are compatible, the browser will default to displaying the JPEG image. -->
<img src="image-300w.jpg"
srcset="image-300w.jpg 300w, image-600w.jpg 600w, image-1200w.jpg 1200w"
sizes="(max-width: 600px) 300px, (max-width: 900px) 600px, 1200px"
alt="Description of the image">
</picture>

Takie progresywne podejście zapewnia maksymalną kompatybilność z różnymi przeglądarkami i urządzeniami.

2. Używaj Unikalnych Obrazów Zamiast Stockowych

Wiele stron internetowych jest pełnych standardowych zdjęć stockowych, które nie przynoszą unikalnej wartości użytkownikom. Aby Twoje zdjęcia się wyróżniały i dodawały oryginalności, używaj własnych obrazów.

Jeśli Twoja strona jest przepełniona zdjęciami stockowymi, będziesz wyglądać nieoryginalnie, ponieważ Google rozumie zawartość obrazów. Ponieważ to samo zdjęcie stockowe może być używane na innych stronach, będzie traktowane jako duplikat treści.

Pomyśl o firmowej stronie, firmie konsultingowej lub biznesie, który chwali się swoją obsługą klienta. Wszystkie te strony często używają tych samych zdjęć stockowych uśmiechniętych biznesmenów.

Prawdopodobnie widziałeś jedno z tych obrazów:

Chociaż Twoje zdjęcia stockowe mogą być idealnie zoptymalizowane, nie będą miały takiego samego wpływu ani potencjalnych korzyści SEO jak oryginalne, wysokiej jakości obrazy.

Im więcej oryginalnych zdjęć masz, tym lepsze doświadczenie użytkownika i większa szansa na ranking dla odpowiednich zapytań.

Duże obrazy i Google Discover

Duże obrazy mają większe szanse na pojawienie się w Google Discover.

Google zaleca, aby obrazy miały co najmniej 1200 pikseli szerokości i miały ustawienie max-image-preview w meta-tagu robots, aby zapewnić ich wyświetlanie jako dużych obrazów w Google Discover:

<meta name="robots" content="index, follow, max-image-preview:large" />

Google nie gwarantuje, że zawsze będzie wyświetlać duże miniatury.

Jako specjalista SEO, najlepiej, co możesz zrobić, to włączyć odpowiednie ustawienie w meta-tagu robots i upewnić się, że obrazy mają co najmniej 1200 pikseli szerokości.

3. Optymalizuj Nazwy Plików Obrazów

Kiedy mówimy o SEO, tworzenie opisowych nazw plików z odpowiednimi słowami kluczowymi (bez nadmiernego wypełniania) jest niezwykle ważne.

Nazwy plików obrazów sygnalizują Google i innym wyszukiwarkom zawartość obrazu.

Nazwy plików typu „IMG_713074” lub coś podobnego nie pomagają Google lepiej zrozumieć obrazu.

Chociaż Google teraz może rozpoznawać zawartość obrazów, ustawienie sensownych nazw plików pomoże Google lepiej zrozumieć obraz.

Zmień standardową nazwę pliku, aby pomóc wyszukiwarkom zrozumieć Twoje obrazy i poprawić ich wartość SEO.

W zależności od wielkości Twojej biblioteki mediów może to wymagać pewnej pracy, ale zmiana standardowej nazwy pliku zawsze jest dobrym pomysłem.

4. Pisz SEO-przyjazny Alt-tekst

Alt-tagi to tekstowe alternatywy dla obrazów, które są używane, gdy przeglądarka nie może ich prawidłowo wyświetlić. Podobnie jak tytuł, atrybut alt opisuje zawartość pliku obrazu.

Kiedy obraz się nie ładuje, w lewym górnym rogu obrazu pojawia się blok z alt-tag. Upewnij się, że alt-tagi są odpowiednie dla obrazu i czynią go odpowiednim.

Zwracanie uwagi na alt-tagi ma również pozytywny wpływ na ogólną strategię SEO na stronie.

Ważne jest, aby upewnić się, że wszystkie inne obszary optymalizacji są odpowiednio skonfigurowane, ale jeśli obraz z jakiegoś powodu się nie ładuje, użytkownicy zobaczą, co powinno być na obrazie.

Dodanie odpowiednich alt-tagi do obrazów na Twojej stronie internetowej może pomóc Twojej stronie osiągnąć lepsze pozycje w wyszukiwarkach, kojarząc słowa kluczowe z obrazami, ponieważ alt-tekst jest czynnikiem rankingowym.

Daje Google użyteczne informacje na temat zawartości obrazu. Google używa tych informacji do określenia najlepszego obrazu dla zapytania użytkownika.

Oto przykład złego i dobrego alt-tekstu według oficjalnej dokumentacji Google.

Również alt-tekst jest wymagany przez prawo o Amerykanach z ograniczonymi możliwościami dla osób, które nie mogą samodzielnie oglądać obrazów.

Opisowy tekst alt może dokładnie informować użytkowników, co jest na zdjęciu. Na przykład, jeśli na Twojej stronie znajduje się obraz czekolady, alt-tekst może brzmieć:

<img src="czekolada-1.jpg" alt="czekolada"/>

Jednak lepszy alt-tekst, opisujący obraz, będzie brzmiał następująco:

<img src="czekolada-1.jpg" alt="tabliczka ciemnej czekolady o smaku kawy"/>

Dla dodatkowej wartości SEO, alt-tekst może działać jako tekst kotwicy dla wewnętrznego linku, gdy obraz odsyła do innej strony na Twojej stronie.

5. Optymalizuj Tytuł i Opis Strony

Google używa tytułu i opisu Twojej strony jako części swojego algorytmu wyszukiwania obrazów.

Wszystkie Twoje główne czynniki wewnętrznej optymalizacji SEO, takie jak metadane, tytuły, tekst na stronie, dane strukturalne itp., wpływają na to, jak Google ocenia Twoje obrazy.

To jak dodanie wszystkich składników do Twojego burrito; smakuje znacznie lepiej z guacamole. Więc koniecznie dodaj „guacamole”, aby poprawić ranking obrazów.

6. Określ Wymiary Obrazów

Atrybuty wymiarów obrazów są ważne dla zapobiegania problemom z Cumulative Layout Shift (CLS), które mogą przeszkadzać w optymalizacji Core Web Vitals. To zapobiega przesuwaniu się strony podczas ładowania.

Upewnij się, że dla każdego obrazu i elementu wideo są włączone atrybuty szerokości i wysokości.

To mówi przeglądarce, ile miejsca przeznaczyć na zasób, i zapobiega irytującemu przesuwaniu się zawartości, co pogarsza Twój wynik CLS.

7. Uczyn swoje obrazy mobilnymi

Jak mogłeś zauważyć, wspomnieliśmy o atrybutach srcset i sizes podczas omawiania formatów obrazów.

Te atrybuty zapewniają adaptacyjne obrazy, pozwalając im skalować się zgodnie z rozmiarem urządzenia użytkownika lub rozdzielczością ekranu i ładować się w optymalnym rozmiarze, co jest szczególnie ważne w wolnych sieciach.

Przyjrzyjmy się bliżej tym atrybutom, aby zrozumieć, jak działają.

Oto przykład kodu:

<picture>
<!-- Format WebP dla przeglądarek, które go obsługują -->
<source type="image/webp"
srcset="image-300w.webp 300w, image-600w.webp 600w, image-1200w.webp 1200w"
sizes="(max-width: 600px) 300px, (max-width: 900px) 600px, 1200px">
<!-- Alternatywny format JPEG -->
<img src="image-300w.jpg"
srcset="image-300w.jpg 300w, image-600w.jpg 600w, image-1200w.jpg 1200w"
sizes="(max-width: 600px) 300px, (max-width: 900px) 600px, 1200px"
alt="Opis obrazu">
</picture>

Atrybut srcset jest używany wewnątrz tagu <img>, aby określić różne pliki obrazów i ich szerokości.

Każdy plik jest podawany z deskryptorem w, oznaczającym szerokość obrazu w pikselach. Jest to konieczne, ponieważ przeglądarki nie mogą określić rozmiaru obrazu, dopóki go nie załadują.

Dlatego należy podać szerokość, aby poinformować przeglądarkę o szerokości każdej wersji. Na przykład: srcset=”image-300w.jpg 300w, image-600w.jpg 600w”

Atrybut sizes jest używany przez przeglądarkę razem z atrybutem srcset do wyboru zasobu. Określa przypisaną szerokość wyświetlania obrazu dla różnych rozmiarów ekranu.

Dla ekranów do 600 pikseli szerokości wybierze obraz szerokości 300 pikseli; dla ekranów do 900 pikseli – obraz szerokości 600 pikseli; a dla większych ekranów – obraz szerokości 1200 pikseli.

Bez tego atrybutu przeglądarka domyślnie użyje pełnej szerokości ekranu do wyboru obrazu z srcset.

Można również użyć deskryptora x, który mówi przeglądarce, aby wybrała najbardziej odpowiedni rozmiar obrazu na podstawie rozdzielczości ekranu urządzenia (np. 1x, 2x lub 3x dla standardowych, retina i super retina ekranów).

<picture>
<!-- Format WebP -->
<source type="image/webp"
srcset="image.webp 1x, [email protected] 2x, [email protected] 3x">
<!-- Alternatywny format JPEG -->
<img src="image.jpg"
srcset="image.jpg 1x, [email protected] 2x, [email protected] 3x"
alt="Opis obrazu">
</picture>

Można również użyć deskryptorów x dla różnych rozdzielczości ekranów (np. retina-dysplejów), gdzie rozmiar obrazu pozostaje stały.

Tymczasem deskryptory w są odpowiednie dla elastycznych układów responsywnych, gdzie rozmiar obrazu zmienia się w zależności od rozmiaru ekranu.

Na pewno pomyślałeś, jak trudno zautomatyzować pracę z atrybutami sizes i srcset, nawet jeśli dobrze znasz układ swoich stron internetowych.

Na szczęście Chrome niedawno zaczął rozwijać wsparcie dla sizes=”auto”, co pozwoli przeglądarce określić rozmiar ładowanych z opóźnieniem obrazów na podstawie atrybutu srcset zgodnie z układem HTML i CSS.

Oznacza to, że przeglądarka będzie brać pod uwagę ładowanie odpowiedniego rozmiaru obrazu zgodnie z tym, jak będzie wyświetlany na stronie, jak wskazano w Twoich zasadach CSS, a nie zakładać, że obraz zajmuje całą szerokość ekranu.

Zauważ, że ta funkcja będzie działać tylko dla obrazów ładowanych z opóźnieniem. Dzieje się tak dlatego, że układ jest już renderowany, gdy obrazy ładowane z opóźnieniem zaczynają się ładować, co pozwala przeglądarce dokładnie obliczyć rozmiar zajmowany na stronie, jak wskazano w CSS.

Jednak zawsze trzeba wskazać atrybuty szerokości i wysokości dla maksymalnego dostępnego rozmiaru.

Pokazując wymiary obrazów i używając CSS (width: 100%; height: auto;) do zachowania proporcji, przeglądarka może dokładnie wybrać i wyświetlić obraz z atrybutu srcset przy użyciu sizes=”auto”.

8. Ładowanie z Opóźnieniem i Wstępne Ładowanie

Ładowanie z opóźnieniem (Lazy loading) polega na odraczaniu ładowania obrazów, które nie są widoczne w polu widzenia użytkownika (poza pierwszym ekranem).

Zamiast ładować wszystkie obrazy podczas ładowania strony, ładowanie z opóźnieniem ładuje obrazy tylko wtedy, gdy mają się pojawić w polu widzenia użytkownika podczas przewijania strony.

To zmniejsza początkowy czas ładowania, przyspiesza działanie strony i znacznie poprawia wynik Largest Contentful Paint (LCP), szczególnie na stronach z dużą liczbą obrazów.

Wdrożenie ładowania z opóźnieniem jest bardzo proste – dodaj atrybut loading=”lazy” do tagu <img>.

<img src="image.jpg" loading="lazy" srcset="image-300w.jpg 300w, image-600w.jpg 600w" alt="Opis">

Ale nigdy nie stosuj ładowania z opóźnieniem dla obrazów znajdujących się w polu widzenia (above the fold), ponieważ może to negatywnie wpłynąć na wynik First Contentful Paint (FCP).

Zamiast tego wczytaj je wcześniej lub użyj atrybutu fetchpriority=”high”.

Zaletą wstępnego ładowania nad atrybutem fetchpriority jest to, że wstępne ładowanie jest obsługiwane przez wszystkie przeglądarki, podczas gdy fetchpriority nie jest obsługiwane przez przeglądarki Firefox i Opera.

Poniżej znajdują się przykłady wstępnego ładowania i użycia fetchpriority:

<img src="image.jpg" fetchpriority="high" srcset="image-300w.jpg 300w, image-600w.jpg 600w" alt="Opis">
<link rel="preload" as="image" href="image-600w.jpg" imagesrcset="image-300w.jpg 300w, image-600w.jpg 600w" imagesizes="(max-width: 600px) 300px, 600px">

Używając wstępnego ładowania lub fetchpriority, wskazujesz przeglądarce, aby rozpoczęła ładowanie obrazów jako priorytetowych, co jest przydatne do poprawy wyniku Largest Contentful Paint (LCP).

9. Dodaj Obraz do Swojej Mapy Strony

Niezależnie od tego, czy dodajesz swoje obrazy do głównej mapy strony, czy tworzysz nową mapę strony specjalnie dla obrazów, ważne jest, aby mieć obraz w mapach strony.

Obecność obrazów w mapie strony znacznie zwiększa szanse na to, że wyszukiwarki zeskanują i zaindeksują Twoje obrazy. To z kolei może zwiększyć ruch na Twojej stronie.

Korzystając z WordPressa, wtyczki Yoast i RankMath oferują rozwiązania dla mapy strony.

Jeśli nie korzystasz z WordPressa, możesz skorzystać z oprogramowania takiego jak Screaming Frog, aby stworzyć mapę strony.

10. Dodaj Dane Strukturalne

Dodanie danych strukturalnych do Twoich obrazów może poprawić Twoje strony internetowe, pomagając Google i innym wyszukiwarkom dostarczać lepsze wyniki wizualne.

Na przykład, możesz dołączyć obrazy swoich produktów razem z takimi szczegółami jak cena, dostępność i oceny w schemacie produktu. To pomoże Twoim produktom wyróżnić się w wynikach wyszukiwania, przyciągając więcej uwagi potencjalnych klientów.

Innym przykładem użycia jest dodanie schematu obrazów do schematu artykułu z kilkoma rozmiarami w celu zwiększenia widoczności Twoich artykułów w Google Discover i na różnych urządzeniach w Google Search.

Google może wybrać najbardziej odpowiedni rozmiar przy ich wyświetlaniu.

Oto przykład:

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Article",
  "headline": "Nazwa artykułu",
  "image": [
    "https://example.com/photos/1x1/image.jpg",
    "https://example.com/photos/4x3/image.jpg",
    "https://example.com/photos/16x9/image.jpg"
  ],
  "datePublished": "2024-01-10T08:00:00+08:00",
  "dateModified": "2024-01-10T09:20:00+08:00",
  "author": {
    "@type": "Person",
    "name": "Imię autora"
  }
  ...
}
</script>

11. Używaj CDN do szybkiego dostarczania obrazów

Content Delivery Network (CDN) to zbiór serwerów rozmieszczonych na całym świecie, które przechowują Twoje treści i dostarczają je użytkownikom z najbliższego geograficznego serwera.

Jednak dostarczanie to nie jedyna zaleta CDN; oferują również możliwości transformacji i optymalizacji.

Przesyłając parametry wraz z URL obrazu, można żądać różnych rozmiarów obrazów lub przekonwertować je na bardziej efektywne formaty, takie jak WebP.

Na przykład usługi takie jak Cloudflare’s Polish mogą automatycznie optymalizować formaty obrazów, określając kompatybilność przeglądarki z WebP. Mogą podawać obrazy PNG i JPEG w formacie WebP na żądanie.

Na przykład na Search Engine Journal używamy tej techniki do podawania obrazów w formacie WebP za pomocą wbudowanego CDN naszego serwera.

Nawet jeśli obrazy mają rozszerzenie „.jpeg” lub „.png”, nasz CDN przedstawia je w formacie WebP, jeśli przeglądarki go obsługują.

Podczas walidacji stron za pomocą PageSpeed ​​Insights zaleca się upewnić, że przechodzisz audyt „Podawanie obrazów w formatach następnej generacji”.

12. Przestrzegaj praw autorskich

Niezależnie od tego, jakie obrazy wybierasz do użycia, upewnij się, że nie ma konfliktów z prawami autorskimi.

Na przykład, Pocztowa Służba USA zapłaciła 3,5 miliona dolarów w pozwie o naruszenie praw autorskich na obraz, a firma Skechers została ukarana grzywną w wysokości 2,5 miliona dolarów.

Jeśli obraz, który używasz, należy do takich dostawców zdjęć stockowych jak Getty, Shutterstock, DepositFiles, i nie masz licencji na jego użycie, ryzykujesz napotkanie kosztownego pozwu.

Zgodnie z Digital Millennium Copyright Act (DMCA) możesz otrzymać zawiadomienie o naruszeniu praw autorskich. Jeśli właściciel treści zobaczy swoje treści na Twojej stronie, może zażądać usunięcia DMCA, które musisz spełnić.

Podsumowanie

Przed przesłaniem obrazów na swoją stronę, postępuj zgodnie z powyższymi zasadami optymalizacji obrazów.

Najważniejsze jest, aby upewnić się, że obraz i tekst alternatywny odpowiadają zawartości strony. Inne ważne punkty to:

1. Wybierz odpowiedni format pliku.
2. Podawaj odpowiedni rozmiar pliku dla szybszego ładowania strony.
3. Upewnij się, że elementy SEO na stronie (metadane, dane strukturalne itp.) odpowiadają Twojemu obrazowi.
4. Aby poprawić indeksowanie, utwórz mapę strony dla obrazów lub upewnij się, że Twoje obrazy są zawarte w mapie strony.

Optymalizacja obrazów to nie żarty. Biorąc pod uwagę ostatnie postępy w wyszukiwaniu, zwłaszcza gdy Google zaczęło nadawać priorytet treściom wizualnym w wynikach wyszukiwania, Twoja strona zyskuje na wdrożeniu powyższych kroków.

Powodzenia w optymalizacji!

Pytania i odpowiedzi: FAQ