Optymalizacja obrazu dla SEO

1. Zalety posiadania zdjęć w witrynie Przeprowadzono wiele badań nad zaletami obrazów na stronach internetowych....
2. Jakiego typu pliku obrazu należy użyć?
3. JPEG
4. GIF
5. PNG
6. Rozdzielczość obrazu
7. Zmniejsz rozmiar pliku obrazu
8. Wtyczki do optymalizacji obrazu WordPress
9. EWWW Image Optmizer
10. Szaleństwo
11. Narzędzia do kompresji obrazu online
12. Użyj opisowych nazw plików
13. Użyj opisowego tekstu Alt i tekstu tytułu
14. Tekst tytułu
15. Mapy witryn
16. Media społecznościowe
17. Wskazówka bonusowa: jak dalej kompresować miniatury w WordPressie
18. streszczenie

Zalety posiadania zdjęć w witrynie

Przeprowadzono wiele badań nad zaletami obrazów na stronach internetowych. Niektóre z kluczowych ustaleń to:

• Strony z obrazami mogą być więcej niż dwa razy udostępniane w mediach społecznościowych
  (Źródło: OkDork.com )
• Użytkownicy są bardziej zaangażowani w artykuły zawierające obrazy i uzyskują 94% więcej wyświetleń niż artykuły bez obrazów
  (Źródło: JeffBullas.com )
• Strony z co najmniej jednym obrazem działają lepiej w wyszukiwaniu organicznym niż strony bez obrazów
  (Źródło: Backlinko.com )

Korzyści płynące z obrazów są oczywiste, jednak jeśli nie są dobrze zoptymalizowane, mogą dodać kilka megabajtów do wielkości ładowania strony i będą niezwykle szkodliwe dla wydajności witryn. Zmniejszona wydajność witryny może spowodować obniżenie wydajności rankingi w wyszukiwarkach i zapewniają frustrujące doświadczenie dla użytkowników.

Dobrą rzeczą w optymalizacji obrazu jest to, że jest martwy i nawet nowicjusz będzie mógł zoptymalizować swoje zdjęcia pod kątem SEO i wydajności strony po przeczytaniu tego postu.

Oto 8 aspektów optymalizacji obrazu, które zostaną omówione w tym poście:
(Kliknij, aby nawigować)

1. Pozyskiwanie obrazów - 7 witryn, w których możesz bezpłatnie pobrać miliony obrazów
2. Używając odpowiedniego typu pliku - kiedy używać typów plików JPEG, GIF lub PNG
3. Rozdzielczość obrazu - używaj obrazów o takich samych wymiarach, w jakich będą wyświetlane
4. Rozmiary plików - kompresowanie obrazów, aby strony ładowały się szybciej
5. Nazwy plików - używaj opisowych nazw plików
6. Alt tekst i tekst tytułu - zawsze używaj tekstu Alt i opisuj
7. Mapy witryn - Zwiększ szansę na znalezienie obrazów w Wyszukiwaniu obrazów
8. Media społecznościowe - jak najlepiej wykorzystaj swoje zdjęcia w mediach społecznościowych

Plus bonusowa rada!

Pozyskiwanie obrazów

Zawsze uważam, że najlepiej jest tworzyć własne unikalne obrazy, ale ze względu na ograniczenia czasowe lub ograniczenia zasobów, tworzenie własnych obrazów nie zawsze jest wykonalną opcją.

Na szczęście istnieją tony stron internetowych z milionami darmowych obrazów i zazwyczaj wystarczy, że uznasz twórcę obrazu za źródło (a czasami kredyty nie są wcale potrzebne).

Oto siedem zalecanych witryn do pozyskiwania obrazów:

1. Flickr.com
2. Freeimages.com
3. Publicdomainarchive.com
4. Unsplash.com
5. Pixabay.com
6. Gratisography.com
7. 500px.com

Jeśli to ci nie wystarcza, oto lista 87 witryn, w których możesz uzyskać darmowe zdjęcia .

Tworzenie własnych obrazów jest o wiele łatwiejsze, jeśli zawartość wymaga tylko zrzutów ekranu lub wykresów, w takim przypadku zawsze należy poświęcić trochę czasu na stworzenie własnych.

Większość obrazów na tej stronie jest tworzona za pomocą sprawdzonego starego narzędzia do wycinania i szybkiej edycji Paint.NET (nie potrzebujesz szalonych umiejętności Photoshopa do prostej edycji obrazu). Używam także Rozszerzenie strony do przechwytywania ekranu w przypadku Chrome, gdy muszę zrobić przewijany zrzut ekranu pełnej strony internetowej.

Jakiego typu pliku obrazu należy użyć?

Istnieje wiele różnych typów plików graficznych do wyboru, z których każdy ma swoje wady i zalety, ale zachowamy prostotę, patrząc tylko na trzy typy plików; JPEG, GIF i PNG.

JPEG

Stojak JPEG dla Joint Photographic Experts Group. Najważniejszą rzeczą, jaką należy wiedzieć o obrazach JPEG, jest to, że wykorzystuje kompresję stratną - co oznacza, że ​​istnieje kompromis między rozmiarem pliku a jakością obrazu. Poziom kompresji można dostosować, aby znaleźć właściwą równowagę między rozmiarem pliku a jakością obrazu.

Przezroczyste tła nie są obsługiwane, więc JPEG zazwyczaj nie jest odpowiednią opcją dla logo witryny.

JPEG to najlepsza opcja dla kolorowych obrazów fotograficznych.

GIF

GIF oznacza Graphics Interchange Format. Obsługuje proste animacje, jednak obsługuje tylko 256 kolorów z widma RGB na pojedynczym obrazie oraz w jednej klatce dla animowanych GIF (każda ramka może korzystać z różnych 256 kolorów).

GIF obsługuje przezroczyste tła, dzięki czemu jest odpowiednią opcją dla logo i innych elementów strony, takich jak przyciski.

GIFy są najlepiej używane do animowanych obrazów. Ograniczenia kolorów w obrazach GIF sprawiają, że nie nadają się one do kolorowych obrazów fotograficznych.

Uwaga: animowane pliki GIF często mają duże rozmiary plików, dlatego przed użyciem ich w witrynie należy pamiętać o rozmiarze pliku.

PNG

PNG oznacza Portable Network Graphics. Obsługuje bezstratną kompresję danych i został zaprojektowany jako nowy, ulepszony zamiennik GIF.

PNG obsługuje przezroczystość i szeroki zakres kolorów, takich jak JPEG.

PNG zapewnia niezrównaną jakość obrazu dla prostych obrazów w porównaniu z JPEG, ale będzie mieć znacznie większy rozmiar pliku dla obrazów kolorowych o wysokiej kolorystyce.

Zalecenie: użyj JPEG dla obrazów kolorowych, obrazów fotograficznych i obrazów PNG dla przezroczystych logo i obrazów w kilku kolorach. Używaj animowanych plików GIF oszczędnie ze względu na ich duże rozmiary plików.

Rozdzielczość obrazu

Rozdzielczość twoich zdjęć odgrywa dużą rolę w określaniu rozmiaru pliku i zawsze chcemy zachować rozmiary plików tak małe, jak to możliwe, aby zapewnić jak najszybsze załadowanie naszych stron.

Na przykład, jeśli twój blog może wyświetlać tylko obrazy o maksymalnej szerokości 720px, nie ma sensu używać obrazu o szerokości 2000px. Obraz 2000px zostanie zmieniony, aby zmieścił się w pojemniku 720px, ale obraz w pełnym rozmiarze jest nadal ładowany.

Różnica rozmiaru pliku między obrazem o szerokości 2000px a obrazem o szerokości 720px może przekraczać 1mb!

Używanie obrazów, które są dokładnymi wymiarami, które będą wyświetlane w witrynie, jest powszechnie nazywane wyświetlaniem skalowanych obrazów .

Zobacz przykład na obrazku poniżej . Jeśli potrzebujesz obrazu o wymiarach 250 x 250 pikseli, nie używaj większego obrazu (np. 500 x 500 pikseli) - utwórz obraz dokładnie taki, jaki potrzebujesz - 250 x 250 pikseli. Dzięki temu rozmiar strony będzie jak najmniejszy, aby strony ładowały się tak szybko, jak to możliwe.

Obsługuj skalowane obrazy: niepotrzebnie duże obrazy spowalniają witrynę. Zawsze zmieniaj rozmiar obrazów, aby były takie same, jak będą wyświetlane w witrynie.

Zalecenie: znać wymaganą rozdzielczość obrazów i uczynić je dokładnie takimi rozmiarami. Pomoże to zminimalizować rozmiar stron, co pomoże szybko załadować strony.

Zmniejsz rozmiar pliku obrazu

Po uzyskaniu prawidłowej rozdzielczości obrazu chcesz wycisnąć z niego każdy ostatni kilobajt - bez utraty jakości obrazu.

Chociaż istnieją doskonałe wtyczki WordPress, które pomagają zmniejszyć rozmiary obrazów, jestem przekonany, że obrazy powinny być dobrze zoptymalizowane przed ich przesłaniem. Po zoptymalizowaniu ich w trybie offline wtyczki WordPress lub inne narzędzia online mogą pomóc Ci je skompresować bez utraty (zauważalnej) jakości obrazu.

Najbardziej podstawowe oprogramowanie do edycji obrazów daje podgląd tego, jak będzie wyglądał zapisany obraz i daje opcje konfiguracji jakości i rozmiaru pliku wyjściowego:

Dostosowywanie jakości obrazu w Paint.net:
Przy ustawieniu jakości na 100 obraz miał rozmiar pliku 95 kB. W wieku 75 lat utrata jakości była minimalna, a rozmiar pliku zredukowany do zaledwie 28 kB.

Zasadniczo, podczas zapisywania obrazów JPEG, ustawienie jakości obrazu pomiędzy 70 a 85 pozwala na utrzymanie wysokiej jakości obrazu przy znacznym zmniejszeniu rozmiaru pliku wyjściowego. W przypadku ustawienia jakości poniżej 70 zazwyczaj występuje wyraźniejszy spadek jakości obrazu.

Przyjrzyjmy się teraz niektórym wtyczkom do optymalizacji obrazu WordPress i narzędziom online, w których można wycisnąć kilka dodatkowych KB z rozmiarów plików obrazów!

Wtyczki do optymalizacji obrazu WordPress

WP Smush

WP Smush jest bardzo łatwy w użyciu i będziesz zaskoczony, jak wiele kB może wycisnąć z twoich zdjęć bez utraty jakości.

Bezpłatna wersja ogranicza się do „masowego wymieszania” 50 obrazów naraz, co w przypadku małych witryn, ale może zająć trochę czasu, jeśli masz tysiące obrazów w bibliotece multimediów. Nowa funkcja WP Smush polega na tym, że konwertuje PNG na JPEG, w których uważa, że ​​mógł wybrać niewłaściwy typ pliku. Ta funkcja może spowodować znaczne zmniejszenie liczby plików obrazów.

Nowe zdjęcia są automatycznie „pomijane” podczas przesyłania.

Płatna wersja WP Smush pozwala na „super wymieszanie” obrazów, nawet w przypadku mniejszych rozmiarów plików, a jednocześnie eliminuje limit „masowego wymazywania” tylko 50 obrazów jednocześnie.

Ogólnie rzecz biorąc, WP Smush to świetna wtyczka do optymalizacji obrazu dla początkujących lub jeśli masz ograniczony czas na optymalizację obrazów. Wersja płatna jest lepsza dla dużych bibliotek obrazów.

EWWW Image Optmizer

EWWW Image Optimizer ma wiele takich samych funkcji jak WP Smush, ale daje również możliwość włączenia kompresji stratnej, jeśli nie masz nic przeciwko rezygnacji z jakości obrazu dla mniejszych rozmiarów plików.

W przeciwieństwie do WP Smush, EWWW Image Optimizer nie ma żadnych ograniczeń dotyczących funkcji „optymalizacji zbiorczej” - możesz zoptymalizować całą bibliotekę obrazów jednym kliknięciem.

Podobnie jak WP Smush, nowe obrazy są automatycznie optymalizowane podczas przesyłania.

EWWW to dobra opcja dla stron internetowych z dużymi bibliotekami obrazów, zwłaszcza jeśli nie chcesz płacić za wersję premium WP Smush.

Szaleństwo

Szaleństwo pozwala Ci na Zmień rozmiar biblioteki obrazów i ustaw maksymalną rozdzielczość dla nowych przesyłanych obrazów, w zależności od tego, gdzie są używane.

Na przykład, możesz ustawić maksymalną szerokość dla obrazów, które są przesyłane do wpisu na blogu, aby upewnić się, że nie masz niepotrzebnie dużych obrazów, które są ściśnięte do szerokości szablonu blogu.

Imsanity umożliwia dostosowanie ustawień jakości JPEG i może być ustawiony do konwersji obrazów BMP i PNG na JPEG, chociaż nie zawsze jest to pożądane.

Miejmy nadzieję, że twoje zdjęcia są poprawnie zwymiarowane przed ich przesłaniem, ale jeśli masz dużą bibliotekę obrazów, Imsanity może pomóc szybko wyczyścić zbyt duże obrazy.

Imsanity to świetna bezpłatna wtyczka do WP Smush lub EWWW Image Optimizer.

Narzędzia do kompresji obrazu online

Jeśli Twoja witryna nie znajduje się na WordPressie lub nie chcesz instalować tych wtyczek, istnieje wiele bezpłatnych narzędzi do kompresji online, w których możesz zmniejszyć rozmiary plików online.

Oto dwie witryny, których możesz użyć do kompresji obrazów:

1. TinyPNG.com - do kompresji obrazów PNG
2. CompressJPEG.com - do kompresji obrazów JEPG

Zalecenie: zmniejsz rozmiar plików obrazów przed przesłaniem ich do witryny. Wtyczki WordPress i narzędzia online mogą być przydatne w dalszym zmniejszaniu rozmiarów plików.

Użyj opisowych nazw plików

Nazewnictwo obrazów jest niezwykle proste, ale jest często pomijane.

W Wytyczne Google dotyczące publikowania obrazów , proszą cię o podanie jak największej ilości informacji o obrazie, a częścią tego jest nadanie zdjęciom opisowej nazwy pliku.

Na przykład informacyjna i opisowa nazwa zdjęcia to labrador-puppy-sleeping.jpg not IMG002299.jpg

Przykład 1 opisowego nazywania obrazów.

Lub Wieża Eiffla-paris-skyline-sunset.jpg nie StockImage312864000.jpg

Przykład 2 opisowego nazywania obrazów.

Zalecenie: upewnij się, że nazwy plików obrazów są opisowe dla obrazu.

Użyj opisowego tekstu Alt i tekstu tytułu

Alt Text

Alt text jest jednym z najważniejszych elementów optymalizacji obrazów. Tekst altowy zapewnia wyszukiwarkom opis tego, czym jest obraz, a Google używa tego jako silnego współczynnika rankingu w wyszukiwaniu obrazów.

Tekst Alt zostanie wyświetlony na stronie, jeśli z jakiegoś powodu obraz nie zostanie załadowany, a także jest używany przez czytniki ekranu dla osób niedowidzących.

Lubię pisać tekst Alt, aby uwzględnić odmianę słowa kluczowego i opisywać obraz, a jednocześnie - jeśli obrazy są istotne dla treści, opis obrazu powinien oczywiście zawierać powiązane słowa kluczowe.

Przykłady tekstu Alt:
(przykład zmodyfikowany z Wytyczne Google dotyczące publikowania obrazów ):

Źle (brak tekstu Alt):
<img src = ”labrador-puppy-sleeping.jpg” alt = ”” />

Lepiej (ale nie wystarczająco opisowo):
<img src = ”labrador-puppy-sleeping.jpg” alt = ”puppy” />

Świetnie (doskonały krótki opis obrazu):
<img src = ”labrador-puppy-sleeping.jpg” alt = ”śpiący szczeniak labradora” />

Za dużo (słowo kluczowe wypchane Alt):
<img src = ”labrador-puppy-sleeping.jpg” alt = ”szczeniak, labrador, szczeniak labradora, śpiący szczeniak, śpiący pies, śpiący szczeniak labradora” />

W tym przykładzie widać, że „ Wielki ” pokazuje krótki, prosty opis obrazu - do czego zawsze należy dążyć. Nigdy nie zostawiaj pustego tekstu Alt i powinieneś być bardziej opisowy niż używając jednego słowa.

Ostatni przykład pokazuje tekst Alt, który jest „wypchany słowem kluczowym” - którego zawsze należy unikać, ponieważ wygląda on jak spam w wyszukiwarkach.

Inną rzeczą, na którą należy zwrócić uwagę, jest to, że Internet Explorer używa tekstu Alt jako podpowiedzi przy najechaniu na obraz. Inne przeglądarki, takie jak Chrome, używają tekstu tytułu jako podpowiedzi na obrazach.

Tekst tytułu

Tekst tytułu nie jest czynnikiem rankingu dla wyszukiwania obrazów i nie jest uważany za ważny aspekt optymalizacji obrazu.

Chociaż nie pomoże to Twojej stronie lub obrazom działać lepiej w wyszukiwaniu, może to być sposób na dostarczenie użytkownikom większej ilości informacji, ponieważ większość nowoczesnych przeglądarek internetowych używa tekstu tytułu jako podpowiedzi przy najechaniu na obraz.

Korzystanie z tego samego tekstu Alt i tekstu tytułu jest w porządku.

Uwaga: użyj normalnych spacji w tekście Alt i tekście tytułu, a nie „-” lub „_”.

Zalecenie: użyj opisowego tekstu Alt na wszystkich obrazach. 2-6 słów zazwyczaj zapewnia wystarczający opis.

Mapy witryn

Chociaż nie jest to tak ważne, jak inne aspekty SEO SEO, powinieneś również dołączyć obrazy do map witryn XML, aby zwiększyć szanse na znalezienie obrazów w wyszukiwarce grafiki Google.

Do obrazów można odwoływać się za pomocą obrazka: obraz i obraz: znaczniki loc w mapie witryny XML.

Oto przykład obrazów przywoływanych w mapie witryny XML:

http://www.example.com/page-name/ http://www.example.com/images/descriptive-image-name.jpg http://www.example.com/images/another-descriptive-image -name.jpg

Dobrą wiadomością jest, jeśli używasz dobrej wtyczki SEO WordPress, takiej jak Wtyczka Yoast SEO , obrazy są automatycznie dodawane do Twojej mapy witryny XML, więc nie musisz nic robić!

Zalecenie: użyj dobrej wtyczki SEO WordPress (Yoast), która dodaje obrazy do mapy witryny XML i prześlij do Google Search Console.

Media społecznościowe

Meta tagi OG (Open Graph) (używane przez Facebooka i Pinteresta) oraz Twitter Cards określają ważne informacje dla platform mediów społecznościowych, a jedną z najważniejszych rzeczy do określenia jest obraz, który chciałbyś wyświetlić, gdy ktoś udostępni twoją treść.

Dlaczego obraz jest ważny? Dobry, wysokiej jakości obraz może mieć pozytywny wpływ na CTR z platform społecznościowych, podczas gdy słaby obraz o niskiej jakości może mieć negatywny wpływ na CTR.

Oczywiście chcesz, aby jak najwięcej osób klikało Twoją witrynę, więc upewnij się, że określiłeś obraz, który chcesz zobaczyć.

Możesz to zrobić, dodając następujące metatagi OG do sekcji głównej strony:

I dodając następujący metatag twitter: image do sekcji głównej strony:

Wtyczki SEO (takie jak Yoast) automatycznie zajmują się dodawaniem tych tagów do Twoich stron.

Wtyczki te domyślnie określą Twój prezentowany obraz dla obrazów OG i Twitter Card, ale możesz łatwo wybrać własny obraz, klikając ikonę „Udostępnij” w menu bocznym Yoast. Spowoduje to wyświetlenie opcji udostępniania Facebooka dla Twojej strony:

Określ swój obraz Facebook OG w wtyczce Yoast SEO. Zalecany rozmiar obrazu Facebooka to 1200 × 630 pikseli.

Kliknij ikonę Twitter, aby wyświetlić opcje Twittera i wybierz obraz swojej karty Twitter:

Określ obraz swojej karty Twitter w wtyczce Yoast SEO. Zalecany rozmiar obrazu na Twitterze to 1024 × 512 pikseli.

Możesz również określić Tytuły i Opisy dla Facebooka i Twittera w tym obszarze, jeśli chcesz, aby różniły się one od twojego tytułu i meta opisu.

Wskazówka na Pintereście: Pinterest używa Ci tekstu Alt jako opisu obrazu, gdy ktoś go przypina. Jest to ważne, aby Twoje zdjęcia działały lepiej w wyszukiwaniu Pinteresta, co może być niesamowitym źródłem ruchu.

Wskazówka bonusowa: jak dalej kompresować miniatury w WordPressie

Ponieważ miniatury są tak małe, często można je skompresować z większą szybkością niż oryginalny obraz bez utraty jakości.

Aby skompresować obrazy miniaturowe z większą szybkością w WordPressie, dodaj następujący kod do pliku functions.php:
(Ostrzeżenie: upewnij się, że wykonałeś kopię zapasową oryginalnego pliku przed edycją)

add_filter ('jpeg_quality', create_function ('', 'return 60;'));

Liczba określona w tym kodzie jest procentem oryginalnej jakości obrazu. Na przykład 60 jest używane powyżej, więc miniatury będą stanowiły 60% jakości oryginalnej miniatury.

Zwykle ustawienie 60-80 (domyślne ustawienie WordPress to 90) powoduje, że obrazy nie mają zauważalnego spadku jakości obrazu, ale można to sprawdzić, aby znaleźć to, co działa dobrze dla witryny i obrazów.

Pamiętaj, że po dokonaniu zmiany w pliku functions.php będziesz musiał zregenerować wszystkie miniatury, aby zmiany zostały uwzględnione. Możesz to łatwo zrobić za pomocą Wymuś wtyczkę Regeneruj miniaturki .

streszczenie

Optymalizacja obrazu nie jest trudna. Poświęcenie czasu na uporządkowanie słabo zoptymalizowanych (lub niezoptymalizowanych) obrazów i zapewnienie, że nowe obrazy są dobrze zoptymalizowane, może pomóc poprawić rankingi w wyszukiwarkach i przyspieszyć ładowanie stron. Oznacza to większy ruch na Twojej stronie i lepsze wrażenia dla użytkowników.

Masz więcej wskazówek dotyczących optymalizacji obrazu? Masz pytania dotyczące optymalizacji obrazu? Zostaw komentarz poniżej.