jak správně velikost obrázků v WordPress (PageSpeed Insights + GTmetrix Item)

pokud jste spustili svůj web prostřednictvím PageSpeed Insights nebo GTmetrix, můžete vidět doporučení pro správnou velikost obrázků.

Chcete-li správně velikost obrázků ve WordPressu, rozbalte položku v PageSpeed Insights a podívejte se, které obrázky jsou příliš velké. Změňte jejich velikost na správné rozměry (najdete je ve zprávě GTmetrix legacy). Nakonec nahraďte starý obrázek novým. Znovu otestujte svůj web a měl by být 100%.

správně velikost obrázků

vzhledem k tomu, PageSpeed Insights zobrazuje pouze neoptimalizované obrázky pro jednu stránku, kterou testujete, začněte změnou velikosti celoplošných obrázků, které se objevují na vašem webu (obrázky loga, postranního panelu a zápatí). Dále spusťte další stránky pomocí PageSpeed Insights a změňte velikost obrázků na nich.

Mohu použít plugin pro automatickou změnu velikosti obrázků?
není pravděpodobné. Ve většině pluginů pro optimalizaci obrázků můžete nastavit maximální šířku + výšku. Různé oblasti vašeho webu však vyžadují konkrétní rozměry(obrázky je třeba odpovídajícím způsobem změnit).

Vytvořte tahák s rozměrem obrázku.
nejlepší způsob, jak se vyhnout chybám správné velikosti obrázku, je naučit se rozměry různých oblastí vašeho webu (posuvníky, widgety, logo, obrázky blogu v plné šířce atd.). Dále vytvořte tahák s rozměrem obrázku s rozměry každé oblasti. Pokud se budete řídit rozměry obrázku tahák a velikost obrázků před nahráním, nikdy byste neměli mít správně velikost chyby obrazu.

Najděte Nadrozměrné obrázky v GTmetrix Legacy Reports

GTmetrix legacy reports vám ukáže správné rozměry pro vaše velké obrázky.

Vytvořte si bezplatný účet GTmetrix a přejděte na účty > výchozí pro starší zprávy > povolit.

spusťte stránku pomocí Gtmetrixu a zobrazte sekci „sloužit zmenšeným obrázkům“. Rozbalte jejich doporučení a uvidíte správné rozměry, na které by měly být tyto obrázky změněny.

 podávejte zmenšené obrázky GTmetrix

můžete také ručně zkontrolovat, zda jsou obrázky příliš velké. Klikněte pravým tlačítkem myši na obrázek > zkopírujte adresu obrázku.

zkopírujte adresu obrázku

poté vložte adresu URL obrázku na novou kartu prohlížeče. Pokud porovnáte obrázek zobrazený na vašem webu s adresou URL obrázku, uvidíte, že je znatelný rozdíl v jejich velikosti. To znamená, že obrázek musí být zmenšen. Porovnáním dvou variant obrázků vedle sebe můžete vidět, jak velký je obrázek (a proč se Stránka, na které se nachází, může načítat pomalu).

Scaled vs Unscaled Image

Změna velikosti obrázků pro správné rozměry

Stáhněte si starý obrázek a otevřete jej v nástroji pro úpravu obrázků (používám GIMP). Změňte velikost a / nebo ořízněte obrázek na rozměry doporučené Gtmetrixem. Některé nástroje pro úpravu obrázků vám umožňují komprimovat obrázky a odstranit data EXIF, díky nimž bude načítání obrazu ještě rychlejší.

škálování obrazu GIMP

můžete také oříznout a změnit velikost obrázků přímo v aplikaci WordPress:

Změna měřítka obrázku v editoru médií WordPress

nahraďte starý obrázek novým

nahraďte nový obrázek do WordPress a poté starý obrázek nahraďte novým.

Unscaled Widget Image

zmenšený obrázek widgetu

znovu otestujte stránku v GTmetrix

znovu otestujte stránku v GTmetrix (nebo PageSpeed Insights) a chyba by měla být opravena.

 podávejte zmenšené obrázky WordPress

správně velikost obrázků na mobilu

správně velikost obrázků se v mobilu liší.

pokud se zaregistrujete k prémiovému účtu GTmetrix, můžete otestovat svou mobilní rychlost v systému Android. Je pravděpodobné, že uvidíte více chyb v měřítku obrazu, pokud váš web nepoužívá adaptivní obrázky, což znamená automatickou změnu velikosti obrázků pro mobilní zařízení (obvykle se to provádí pomocí pluginu).

Krok 1: Spusťte svůj web pomocí testu Android GTmetrix:

GTmetrix Mobile Test

podávejte zmenšené obrázky na mobilu

Krok 2: Najděte rozměry mobilního pozadí poskytnuté společností GTmetrix:

Maximální šířka pozadí

Krok 3: nainstalujte plugin Adaptive Images (doporučuji ShortPixel nebo Adaptive Images).

ShortPixel Adaptive Images

Krok 4: Nastavte rozměry poskytnuté Gtmetrixem jako maximální šířku pozadí.

 Maximální šířka pozadí

Krok 5: znovu spusťte svůj web pomocí mobilního testu GTmetrix, abyste se ujistili, že neexistují žádné chyby.

 GTmetrix Mobile Test

Krok 5: nakonfigurujte další nastavení v pluginu adaptive images (ShortPixel zahrnuje podporu WebP, líné načítání obrázků, inteligentní oříznutí a odstranění dat EXIF). Ty mohou také pomoci.

Změna velikosti obrázků na Více stránkách

pokud používáte stejný obrázek na více stránkách/příspěvcích a je třeba jej opravit, můžete změnit velikost obrázku, zkopírovat HTML a poté použít plugin Better Search Replace k opravě na více stránkách.

Krok 1: nainstalujte plugin Better Search Replace.

Krok 2: zkopírujte HTML starého obrázku a vložte jej do pole“ Hledat “ v pluginu Better Search Replace. Pomocí textového editoru WordPress můžete zobrazit HTML obrázku. Poznámka: Lepší vyhledávání nahradit nahradí pouze obrázek, pokud obsahuje přesný HTML, který zadáte do pluginu.

 lepší vyhledávání nahradit obrázky

Krok 3: zkopírujte HTML nového obrázku a vložte jej do pole“ Nahradit“.

 podávejte zmenšený obrázek HTML

Krok 4: Vyberte tabulky (např. příspěvky) chcete naskenovat a zrušit zaškrtnutí políčka “ Spustit jako suché skenování.“

Krok 5: Klikněte na „Hledat/nahradit“ a plugin nahradí starý obrázek novým.

Vytvořte tahák s rozměry obrázku

jak jsem již zmínil, měli byste změřit rozměry všech oblastí vašeho webu, abyste mohli před nahráním změnit velikost obrázků. Tyto rozměry najdete v Gtmetrixu (pouze pokud máte správně velikost chyby obrázku) nebo je najdete také v šabloně stylů CSS vašeho motivu.

příklad:

  • Slider images: 1900 (w) x 400 (h)
  • Carousel images: 115 (w)
  • Widget images: 414 (w)
  • Full width blog post images: 680 (w)
  • doporučené obrázky: 250 (w) x 250 (h)
  • Yoast Facebook og image: 1200(w) x 628 (h – – krok 11
  • Yoast Twitter og image 1024 (w) x 512 (h – – krok 11

680 šířka pixelu obdélník

šířka mého blogu je 680px, takže každý obrázek na tomto příspěvku byl změněn na 680px.

WordPress pluginy pro správnou velikost obrázků

většina pluginů pro optimalizaci obrázků má možnost změnit velikost obrázků, nicméně to není příliš efektivní při pokusu o opravu chyb v Gtmetrixu, protože různé oblasti vašeho webu vyžadovaly různé rozměry. Je to spíše pro zajištění toho, aby vaše obrázky nebyly absolutně obrovské. Jak říká plugin Imagify, maximální šířka by neměla být menší než vaše největší miniatura.

Smush

Resize Images Smush

Imagify

Resize Imagify

EWW Image Optimizer

Resize Images EWWW

další způsoby, jak optimalizovat obrázky

napsal jsem úplný návod na optimalizaci obrázků v WordPress, který zahrnuje:

  • komprese obrázků
  • zobrazování obrázků z CDN
  • Změna velikosti GIF
  • odstranění dat EXIF
  • Lazy loading images + videos
  • Cloudflare Mirage, Polish, Hotlink Protection

GTmetrix optimalizace obrazu

hledáte více rychlosti tutoriály?
zde jsou další návody, které jsem napsal:

  • WordPress Speed Guide (Tato příručka trvalo věčně)
  • jak nastavit WP Rocket (cache plugin doporučuji)

mám také úžasné video o optimalizaci rychlosti WordPress:

Často kladené otázky

jak opravím správně velikost obrázků?

stáhněte obrázek, změňte jeho velikost na správné rozměry poskytované staršími zprávami GTmetrix a poté nahraďte starý obrázek novým.

Mohu použít plugin pro správnou velikost obrázků?

ne, různé části vašeho webu vyžadují různé rozměry obrázku. Je třeba škálovat své obrázky, aby se vešly tyto jedinečné rozměry.

které obrázky bych měl začít měnit velikost jako první?

začněte škálováním obrázků, které se objevují na více stránkách, jako jsou obrázky loga, postranního panelu a zápatí.

Kde najdu správné rozměry obrázku?

GTmetrix legacy reports vám při rozbalení položky na kartě PageSpeed sdělí správné rozměry každého obrázku.

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna.