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%.

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.

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.

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).

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ší.

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

nahraďte starý obrázek novým

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

znovu otestujte stránku v GTmetrix

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

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:

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

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

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

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

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.

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

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.

šíř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

Imagify

EWW Image Optimizer

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

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