Jak optimalizovat obrázky v WordPress (pro obě rychlosti + SEO)

Pokud jde o optimalizaci obrázků, pravděpodobně jste už slyšeli dost o alt textu.


Ve skutečnosti existuje 20 různých způsobů, jak optimalizovat obrázky (pokud zahrnujete SEO i optimalizaci rychlosti). To vám poskytne lepší skóre v GTmetrix / Pingdom, potenciálně vás řadí vyšší ve vyhledávání a zrychlí načítání vašeho obsahu. Podařilo se mi získat 100% zprávu GTmetrix s dobami načítání 0,5 s… velkou část toho měla optimalizace obrázků ve WordPressu.

Před odesláním optimalizujte obrázky – použití programu jako Photoshop k optimalizaci obrázků před jejich nahráním může ušetřit spoustu práce. Můžete změnit velikost, komprimovat, odstranit EXIF ​​data, uložit ve správném formátu (např. PNG / JPEG) a napsat popisný název souboru (který se automaticky použije jako alt text, pokud používáte Automatická zásuvka pro doplňkové atributy obrázků). To je 6 optimalizací!

Pokud požadujete obrázky s vysokým rozlišením (např. web pro fotografie), možná nebudete chtít změnit jejich velikost a zkomprimovat (krok 3 a 8), protože tyto mohou snížit kvalitu, i když je to o malé množství.

Hlavní nástroje, které používám – Používám GIMP změnit velikost / komprimovat obrázky (můj editor obrázků), WP Rocket pro můj plugin pro mezipaměť, Představte si pro další bezztrátovou kompresi + odstranění EXIF ​​dat, obojí Zataženo a StackPath CDN, Automatický plugin ALT Attributes plugin automaticky použít název souboru obrázku jako alternativní text a Optimální gravitační mezipaměť ukládat do poznámek Gravatary. používám WP Review Pro jako můj plugin pro bohaté úryvky, Nahrazení lepšího vyhledávání pro hromadnou aktualizaci obrázků (velmi užitečný) a GTmetrix jako můj nástroj pro testování rychlosti. Podívejte se na úplný seznam nástrojů.

1. Najděte neoficiální obrázky

Projděte svůj web GTmetrix a tyto položky se zobrazí na kartách Rychlost stránky / YSlow. Prvních pět je obvykle specifických pro stránku, což znamená, že GTmetrix zobrazí pouze neoptimizované obrázky pro jednu testovanou stránku. Poslední 3 se obvykle vyskytují na celém vašem webu. Toto je samozřejmě jen 7 způsobů, jak optimalizovat obrázky, ale některé z nejdůležitějších, takže je uděláme jako první.

  • Obsluhujte zmenšené obrázky: změna velikosti velkých obrázků na správné rozměry (krok 2)
  • Určete rozměry obrázku: zadejte šířku / výšku v HTML nebo CSS obrázku (krok 3)
  • Optimalizujte obrázky – bezeztrátově komprimovat obrázky (krok 4)
  • Kombinování obrázků pomocí CSS skřítků – kombinovat více obrázků do 1 obrázku (krok 5)
  • Vyhněte se přesměrování URL – nezobrazovat obrázky z nesprávné verze www nebo http (s) (krok 6)
  • Použijte síť pro doručování obsahu – zobrazovat obrázky / soubory z CDN (krok 7)
  • využití mezipaměti prohlížeče – obrázky / soubory v mezipaměti pomocí pluginu pro mezipaměť (krok 8)
  • Make favicon malý a cacheable – použijte favicon 16x16px a uložte jej do mezipaměti (krok 9)

Optimalizace obrazu v GTmetrix

Začněte opravou obrázků, které se objevují na více stránkách: logo, obrázky z postranního panelu / zápatí atd. Začněte také zobrazováním obrázků v měřítku, protože je možná budete muset změnit jejich velikost / znovu načíst s novými rozměry.

2. Served Scaled Images

Pokud vidíte slouží měřítko obrázky chyby v GTmetrix, to znamená, že máte nadrozměrné obrázky a musíte je změnit jejich velikost na správné rozměry (které vám GTmetrix poskytuje). Pokud budete sledovat cheat sheet rozměrů obrázku (viz níže), neměli byste vidět tyto chyby. Pokud jste však již nahráli příliš velké obrázky, musíte je změnit ručně nebo použít plugin.

Serve-Scaled-Images

Hromadná změna velikosti obrázků pomocí pluginu – problém s tím spočívá v tom, že různé obrázky vyžadují různé rozměry (widgety, posuvníky, obrázky s plnou šířkou pásma). Většina pluginů pro optimalizaci obrázků má možnost změnit velikost obrázků na jeden singl konkrétní sadu dimenzí, měli byste je před nahráním opravdu oříznout / změnit jejich velikost. Pokud změníte velikost obrázků pomocí pluginu, uchová se záloha původních obrázků (a vyzkoušíte pouze několik z nich) pro případ, že nebudete s výsledky spokojeni..

Změna velikosti velkých obrázků

Ruční změna velikosti obrázků – získejte správné rozměry od GTmetrix a změňte jejich velikost / znovu načtěte. Pamatujte, že GTmetrix zobrazuje pouze neoptimizované obrázky pro jednu testovanou stránku.

Vytvořte podvádět obrazových dimenzí vašeho webu
Všechny vaše posuvníky, postranní panel blogu, doporučené obrázky a obsah obsahu blogu vyžadují specifické rozměry, na které by se měly obrázky změnit. Vytvořte cheat sheet, takže můžete změnit jejich velikost před nahráním do WordPress. To je zvláště užitečné, pokud máte mnoho oblastí na vašem webu, které vyžadují různé velikosti obrázků, a pokud máte více návrhářů / editorů.

Příklad:

  • Posuvné obrázky: 1900 (š) x 400 (h)
  • Karuselové obrázky: 115 (h)
  • Obrázky widgetu: 414 (w)
  • Obrázky příspěvků blogu Fullwidth: 680 (w)
  • Hlavní obrázky: 250 (š) x 250 (h)
  • Váš obrázek OG na Facebooku: 1 200 (w) x 628 (h) – krok 11
  • Váš obrázek OG Twitteru 1024 (š) x 512 (h) – krok 11

Obdélník o šířce 680 pixelů

3. Určete rozměry obrázku

To znamená přidání šířky / výšky do obrázku HTML nebo CSS. Vizuální editor to provede za vás (ale widgety, některé tvůrce stránek a vlastní HTML ne). Vyzkoušejte několik stránek v GTmetrix.

GTmetrix vám řekne rozměry obrázku …

Druhy Image Dimensions GTmetrix

Přidejte šířku / výšku do HTML obrázku …

Určete rozměry obrázku

4. Bezeztrátová komprese obrázků

Toto jsou položky „optimalizace obrázků“ v GTmetrix. Mnoho programů (např. Photoshop a Gimp) má možnost exportovat při exportu. I když je to skvělý začátek, pluginy pro kompresi obrázků obvykle dosahují ještě lepších výsledků. preferuji Představte si, Kraken, ShortPixel, nebo Smush. Je známo, že jiné pluginy vizuálně snižují kvalitu obrazu a mohou s obrázky způsobit chyby.

Komprese obrázků s představou

  1. Přihlásit se Představte si
  2. Nainstalujte Představte si plugin
  3. Zobrazí se výzva s níže uvedenými pokyny:
  4. Zadejte klíč API z účtu Imagify
  5. Nastavte úroveň komprese (normální, agresivní, ultra)
  6. Představte si vše (foto níže) s hromadnou optimalizací všech obrázků na vašem webu
  7. Jakmile dosáhnete limitu, zaplaťte 4,99 $ nebo počkejte příští měsíc, než bude limit nastaven

představit si

Otestujte, jak obrázky vypadají s různými úrovněmi komprese …

Představte si srovnání komprese

Po registraci můžete hromadně optimalizovat všechny obrázky na vašem webu…

imagify-wordpress-image-optimisation

Nastavte možnost optimalizace obrázků při nahrávání …

Představte si optimalizaci obrázků při nahrávání

5. Kombinujte obrázky do CSS Sprite

Na mé domovské stránce si možná myslíte, že uvidíte 21 ikon, ale ve skutečnosti jde o jeden jediný obrázek. Toto je CSS sprite, kde kombinujete více obrázků do jednoho jediného obrázku. Tím se sníží počet obrázků (a požadavků), a proto má moje domovská stránka pouze 10 požadavků. Namísto načtení 21 obrázků se načte 1. K tomu budete potřebovat znalost CSS nebo použít a CSS sprite generátor.

Sprite CSS

Sprite GTmetrix CSS

Sprite CSS používejte pouze pro dekorativní obrázky – při zkombinování 21 obrázků do 1 ztratíte mnoho značek alt. Nekombinujte důležité obrázky do CSS sprites, pokud popisují váš obsah. Pokud jde o mě, rychlost mé domovské stránky je důležitější než SEO. Používám zprávu GTmetrix své domovské stránky na mnoha místech (takže ji musím udržovat v čistotě) a moje domovská stránka, věřte tomu nebo ne, necílí na klíčové slovo. Účelem je nastínit mé návody … a načíst rychle.

6. Vyhněte se přesměrování URL obrázků

Pokud jste změnili HTTPS, verze www nebo začali zobrazovat obrázky z CDN, měli byste hromadně aktualizovat všechny své obrázky (a odkazy) pomocí Nahrazení lepšího vyhledávání takže obsluhují správnou verzi. Jinak to uvidíte minimalizovat přesměrování nebo používat domény bez souborů cookie chyby.

Minimalizace přesměrování

Domény bez souborů cookie

K hromadné aktualizaci adres URL obrázku použijte plugin Nahrazení lepšího vyhledávání…

Lepší vyhledávání Nahrazujte verze WWW

Lepší vyhledávání Nahrazujte HTTP vs. HTTPS

7. Podávat obrázky z CDN

To vyžaduje změnu adres URL obrázku tak, aby obsahovala vaše URL CDN

  • Adresa URL starého obrázku (bez CDN): Https://onlinemediamasters.com/wp-content/uploads/2017/02/Tom-Dupuis-Widget.png
  • Nová adresa URL obrázku (S CDN): Https://t9w8m8j8.stackpathcdn.com/wp-content/uploads/2017/02/Tom-Dupuis-Widget.png

Cloudflare vs. StackPath – Používám oba Zataženo a StackPath protože více datových center = rychlejší doručování obsahu. Cloudflare má 200+ datových center, StackPath má 34+ datových center které jsou silně umístěny ve Spojených státech (odkud pochází většina mých návštěvníků). Cloudflare vám nepřiřazuje URL CDN takže k poskytování obrázků použijeme CDN StackPath.

StackPath-Data-Centers

Krok 1: Vyberte CDN. používám StackPath (mají 30denní zkušební verzi).

Krok 2: Na hlavním panelu klikněte na kartu CDN a poté vytvořte web StackPath CDN

StackPath-CDN-Tab

StackPath-CDN-Domain

CDN-URL-StackPath

Krok 3: Zkopírujte adresu URL CDN a vložte ji do mezipaměti (níže je pro WP Rocket)…

WP-Rocket-CDN

Krok 4: Nahraďte adresy URL obrázků tak, aby obsahovaly vaši adresu CDN (pomocí Nahrazení lepšího vyhledávání).

Lepší vyhledávání Nahraďte URL CDN

Krok 5: Zkontrolujte staré adresy URL obrázků pomocí Chrome DevTools. Někdy váš mezipaměť plugin nebo CDN Enabler postará se o to, s výjimkou odkazů v CSS a JavaScript, které jsou pevně zakódovány. U odkazů, které zůstanou, jsou obvykle v soubory (například CSS nebo Javascript), které vyžadují ruční kontrolu a výměnu. Chrome DevTools zobrazuje všechny aktuálně používané domény.

Krok 6: Provozujte své stránky v GTmetrix a „síť pro doručování obsahu“ by měla být v YSlow zelená. Neměli byste mít žádné chyby ani v „minimalizaci přesměrování“, ani v „používání domén bez souborů cookie“.

CDN GTmetrix YSlow

8. Obrázky mezipaměti

Většina pluginů pro mezipaměť má možnost ukládání do mezipaměti prohlížeče, který ukládá obrázky do mezipaměti. Používám WP Rocket, který byl hodnocen jako # 1 cache plugin ve více průzkumech na Facebooku, a mám k tomu návod. Rychlý výkon je obecně hodnocen jako # 1 bezplatný cache plugin (mám na to i návod).

Prohlížeč mezipaměti

9. Make Favicon malé a caacheable

Ujistěte se, že váš favicon je 16x16px, je ve formátu favicon.ico a zda je ukládán do mezipaměti pomocí pluginu mezipaměti.

10. Odstraňte data EXIF

Exif data obsahuje informace jako clona, ​​rychlost závěrky, ISO, ohnisková vzdálenost, model fotoaparátu, datum pořízení fotografie a další. Nepotřebujete to pro obrázky na svém webu. VA Odebrání pluginu Exif odebere data Exif automaticky po nahrání obrázků.

Většina pluginů pro optimalizaci obrázků (včetně Imagify, ShortPixel, Kraken, EWWW a Smush) má možnost automaticky odebrat data EXIF. Zde je nastavení pro Imagify …

Představte si, že chcete odebrat data EXIF

11. Optimalizace obrazu cloudflare

Cloudflare má také několik způsobů, jak optimalizovat obrázky. Mirage a polština se nacházejí ve vaší Nastavení rychlosti zákalu zatímco ve vašem Nastavení stíracího štítu.

Cloudflare Mirage (Pro Feature) – snižuje požadavky na obrázky, líné načítání obrázků a zlepšuje časy načítání obrázků na mobilních zařízeních s pomalým připojením k síti. Zde jsou další podrobnosti…

  • Změní velikost obrázků na základě zařízení / připojení návštěvníka. Návštěvník se špatným připojením získá menší verzi (nižší rozlišení), dokud se nevrátí na vyšší šířku pásma.
  • Snižuje počet žádostí – namísto odesílání více žádostí o všechny obrázky na webu, Mirage to stáhne do jednoho požadavku, takže návštěvníci mohou obrázky okamžitě zobrazit..
  • Líný načte obrázky (načte se pouze tehdy, když uživatelé přejdou dolů a skutečně uvidí obrázek).

Cloudflare Image Mirage

Cloudflare Polish (Pro Feature) – stripuje EXIF ​​data a komprimuje obrázky.

Cloudflare Image Polish

Ochrana horkých odkazů v cloudu – zabraňuje lidem kopírovat vaše obrázky a vkládat je na jejich vlastní webové stránky, které (protože stále pořádáte tento obrázek) vysají vaši šířku pásma.

Ochrana horkých odkazů v cloudu

12. Obrázky Lazy Load

Tím se zpožďuje načítání obrázků, dokud uživatelé neposouvají stránku dolů a nevidí obrázek. I když to zlepšuje počáteční časy načítání, neustále načítání obrázků během posouvání může být velmi nepříjemné. Osobně nahrávám pouze líná videa, protože načítání trvá mnohem déle než obrázky.

Můžete použít Lazy Load plugin, Plugin Lazy Load For Videos, nebo použijte WP Rocket…

WP-Rocket-Lazy-Load

13. Uložit jako správný formát

PNG vs. JPEG – PNG je nekomprimovaný (větší velikost souboru) a měl by být použit v jednoduchých obrázcích bez velkého množství barev. JPEG je komprimovaný (menší velikost souboru), který mírně snižuje kvalitu obrazu, ale je menší, a používá se u obrázků se spoustou barev. GIMP a další programy pro úpravu obrázků by měly používat správný formát automaticky, ale to je dobré vědět.

jpg_vs_png

Ilustrace od Labnol

14. Názvy souborů obrázků

Vyhledávače používají názvy alternativních textových i obrazových souborů, takže pojmenujte své soubory před jejich nahráním do WordPress. Pokud používáte plugin, že automaticky přidá alternativní text podle názvu souboru je pojmenování souborů vše, co musíte udělat! Nepoužívejte klíčová slova, pouze popište obrázek.

Názvy obrazových souborů

15. Alt Text

Měly by být stejné jako název vašeho obrazového souboru. Můžete použít Automatická zásuvka pro doplňkové atributy obrázků automaticky použít název souboru jako alternativní text. Pokud používáte relevantní obrázky, některé z nich by přirozeně měly obsahovat (bity) vašeho klíčového slova … neexistuje absolutně žádný důvod k tomu, aby se do obrázků vložila klíčová slova, což představuje riziko penalizace za klíčové slovo.

Automaticky přidejte alternativní text k obrázkům – použijte Automatická zásuvka pro doplňkové atributy obrázků. Nyní, kdykoli přidáte obrázek, plugin přidá alt text, který je stejný jako název souboru …

alt ="WP-Fastest-Cache-Plugin" width ="577" výška ="247" />

Najděte chybějící text – Screaming Frog je bezplatný nástroj, který vám ukáže, že všechny obrázky chybí alt text.

Chybí obrázek Alt Text - křičící žába

16. Otevřený graf (Facebook + Twitter)

Díky tomu je formát obsahu při sdílení na Facebooku / Twitteru správně, konkrétně váš obrázek, protože obě sítě používají k zobrazení vlastní rozměry, jinak to bude vypadat legrační.

sdílení na Facebooku

Používáte-li službu Yoast, přejděte do nastavení „Sociální“ a povolte Open Graph pro Facebook / Twitter…

Yoast-Social-Meta-Data

Nyní upravte stránku / příspěvek, poté klikněte na odkaz „Sdílet“ ve službě Yoast a zobrazí se možnosti pro upload vlastních obrázků pro Facebook (1200 šířka x 628 výška) a Twitter (1024 šířka x 512 výška).

yoast-social-media-optimisation

17. Obrázky na doporučených úryvcích

Doporučené úryvky jsou, když Google zobrazuje kousky vašeho obsahu v horní části výsledků vyhledávání a může (ale není zaručeno) zahrnout obrázek. Google je vytáhne z jakéhokoli výsledku 1. stránky, záleží však na nich, zda zobrazí úryvek nebo obrázek. To také způsobí, že se váš úryvek objeví dvakrát a je to neuvěřitelný způsob, jak získat velký provoz.

3 typy doporučených úryvků

  • Odpovědi
  • Tabulky
  • Seznamy

Úryvky s doporučeným obrázkem

Jak získat doporučené úryvky v Googlu

  • Cílení na klíčové slovo, kde lidé chtějí stručný Odpovědět
  • Použití Prohlížeč klíčových slov Moz identifikovat klíčová slova otázek
  • Chcete-li najít ještě více klíčových slov s otázkami, použijte odpověď Veřejnost
  • Vyberte, zda má být odpověď odstavcem, seznamem nebo tabulkou
  • Navrhněte pěknou grafiku (nebo vyfotografujte) popisující klíčové slovo
  • Použijte optimální délku znaku (viz fotografie níže převzatá z Moz)
  • Vytvářejte faktografický obsah s kvalitními odkazy (odkazy, grafika atd.)
  • Cílení na klíčová slova, která již mají doporučený úryvek, ale vykonávají špatnou práci
  • Pokud se snažíte o odpověď, zacílíte na klíčové slovo pomocí přesné shody
  • Ujistěte se, že jste na 1. stránce pro klíčové slovo, pokud ne, vylepšete obsah

Optimální délka úryvků

18. Strukturovaná data

Obrázky lze použít v strukturovaná data (a odznaky) pro následující typy obsahu:

Video Rich Snippet

Útržky s bohatými recepty

Produktový úryvek

Jaký doplněk Rich Snippets bych měl použít?
používám MyThemeShop’s WP Review Pro (zde je stránka, na které ji používám), která podporuje 14 typů dat včetně receptů a recenzí produktů. Používal jsem fragmenty WP Rich Snippets, ale vývojář plugin opustil a nebyl aktualizován 2+ let a Doplněk Vše v jednom schématu je prostě nuda (nemá dostatek možností a stylů). WP Review Pro se velmi snadno používá.

19. Stylové obrázky

Nezapomeňte styly obrázků! Na většině svých používám hranice.

  • Názvy obrázků
  • Odkazy na obrázky
  • Hranice obrázku
  • Popisky obrázků

20. Změna velikosti GIF

Stejně jako změníte velikost obrázků na správné rozměry, velikost GIF by měla být také změněna (použijte GIF).

Změnit velikost GIF…

Změna velikosti GIF

Pak to komprimujte…

Komprimujte GIF

Výsledek :-)

Optimalizace Dog GIF

21. Cache Gravatars

Pokud máte příspěvky se spoustou komentářů, Gravatary může vaši zprávu úplně zničit. Můžete je zakázat, přerušit komentáře a zobrazit pouze určitý počet komentářů, nebo vyzkoušet zásuvný modul Gravatar cache. Možná budete muset udělat trochu testování, protože některé pluginy na některých webech nefungují.

Cache-Gravatar-Images

22. Vyvarujte se vkládání obrázků z externích webových stránek

Obrázky vždy nahrávejte na svůj web, nikdy je nekopírujte / nevkládejte. V opačném případě skončíte se zvláštními požadavky, protože obrázek není hostován na vašem serveru, takže ho musí odtáhnout někam jinam.

23. Nástroje pro optimalizaci obrazu

Nepoužívejte pluginy s duplicitními funkcemi – Imagify, ShortPixel, Kraken, EWWW a Smush to v podstatě dělají totéž (bezeztrátová komprese, odstranění EXIF ​​dat, změna velikosti obrázků). WP Rocket má možnosti pro líné načtení, ukládání do mezipaměti a CDN (a vyčištění databáze + hostování Google Analytics lokálně), které většina pluginů pro mezipaměť ne, což vám ušetří používání dalších pluginů.

Často kladené otázky

&# x2705; Jak opravit chyby Optimize Image v GTmetrix?

Jejich bezeztrátovou kompresí pomocí pluginu, jako je ShortPixel, Imagify nebo Smush. Používám ShortPixel, protože vždy opravuje tuto chybu v GTmetrix.

&# x2705; Jak opravit chyby zobrazování zmenšeného obrázku v GTmetrix?

To znamená, že musíte oříznout / změnit velikost obrázků na správné rozměry. Pokud jsou obrázky příliš velké, GTmetrix zobrazí chyby v měřítku zobrazovaných v měřítku a sdělí vám správné rozměry, na které mají být změněny velikosti.

&# x2705; Jak opravit chyby Určit rozměry obrázku v GTmetrix?

Prohlédněte si HTML obrázku a zkontrolujte, zda má zadanou šířku a výšku, jak je uvedeno v tomto tutoriálu.

&# x2705; Jakékoli jiné způsoby, jak zrychlit načítání obrázků?

Odstranění EXIF ​​dat a použití CDN k zobrazení vašich obrázků udělá největší rozdíl mimo doporučení v GTmetrix.

&# x2705; Která optimalizace obrazu je nejlepší?

Používám ShortPixel, protože dochází téměř ke ztrátě kvality a opravuje položku Optimize Images v GTmetrix.

Co myslíš?
Vypadá vaše zpráva GTmetrix trochu lépe? Dejte mi vědět v komentářích! A pokud chcete více tipů, které vám poskytnou ještě lepší skóre / časy načítání, viz můj úplný průvodce rychlostí WordPress.

Na zdraví,
Tom

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map