Jak obsluhovat zmenšené obrázky v WordPress (položka v GTmetrix)

Potřeba zobrazovat zmenšené obrázky ve WordPressu?


To jen znamená, že je třeba změnit velikost velkých obrázků, aby byly menší.

GTmetrix vám řekne, na které obrázky je třeba nastavit měřítko a na jaké správné rozměry by se měly oříznout nebo změnit jejich velikost. Dále změňte velikost (měřítko) obrázku a staré obrázky nahraďte novými.

Served Scaled Images

Protože GTmetrix zobrazuje pouze neptimalizované obrázky pro jednu testovanou stránku, začněte škálovat na celém webu obrázky obrázků, které se objevují na více stránkách (vaše logo, postranní panel a zápatí). Poté proveďte další stránky pomocí GTmetrix a upravte na nich jednotlivé obrázky.

Mohu použít plugin pro automatické měřítko obrázků?
Nepravděpodobně. Ve většině pluginů pro optimalizaci obrázků můžete nastavit maximální šířku a výšku. Různé oblasti webu však vyžadují specifické rozměry (obrázky je třeba odpovídajícím způsobem upravit).

Vytvořte cheat sheet dimenze obrázku.
Nejlepší způsob, jak se vyhnout chybám v měřítku obrázku, je naučit se rozměry každé oblasti vašeho webu (posuvníky, widgety, logo, obrázky v blogu s plnou šířkou atd.). Dále vytvořte cheatový list s kótami obrázku, který obsahuje rozměry každé oblasti. Pokud sledujete cheat sheet rozměrů obrázku a změníte velikost obrázků před nahráním, neměli byste už nikdy zobrazovat zmenšené chyby obrázků.

1. Najděte nadrozměrné obrázky v GTmetrix

Spusťte stránku pomocí GTmetrix a zobrazení zobrazujte zmenšené chyby obrázků na kartě PageSpeed. Rozbalte jejich doporučení a uvidíte správné rozměry, na které by měl být každý obrázek upraven. Mějte na paměti, že GTmetrix bude zobrazovat chyby pouze pro jednu stránku, kterou testujete.

Zobrazovat zmenšené obrázky GTmetrix

Můžete také ručně zkontrolujte, zda jsou obrázky v měřítku. Nejprve klikněte pravým tlačítkem a zkopírujte adresu obrázku.

Zkopírujte adresu obrázku

Dále vložte adresu URL obrázku na novou kartu prohlížeče. Porovnáte-li obrázek zobrazený na vašem webu s adresou URL obrázku, uvidíte, že se jedná o znatelně odlišnou velikost. To znamená, že obrázek musí být zmenšen. Porovnáním dvou variant obrázku vedle sebe uvidíte, jak velký je obrázek (a proč se stránka, na které se nachází, může načítat velmi pomalu).

Měřítko vs Unscaled Image

2. Změňte velikost obrázků na opravu rozměrů

Stáhněte si starý obrázek a otevřete ho ve vybraném 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é společností GTmetrix. Mnoho nástrojů pro úpravy obrázků umožňuje komprimovat obrázky a odebrat je EXIF data což zrychlí načítání obrazu.

Změna měřítka obrázku GIMP

Můžete také oříznout a změnit velikost obrázků přímo ve WordPressu:

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

3. Nahraďte starý obraz novým

Nahrajte svůj nový obrázek do WordPress a poté nahraďte starý.

Unscaled Widget Image

Měřítko Widget Obrázek

4. Znovu otestujte stránku v GTmetrix

Znovu otestujte stránku v GTmetrix a neměli byste již zobrazovat zmenšené chyby obrázků.

100% obrázky v měřítku

5. Zobrazujte zmenšené obrázky na mobilu

V mobilních zařízeních se zobrazování zmenšených obrázků liší.

Pokud se zaregistrujete k bezplatnému účtu GTmetrix, můžete vyzkoušet svůj rychlost mobilního webu v systému Android. Pokud váš web nepoužívá, je pravděpodobné, že se vám zobrazí více chyb v měřítku zobrazovaných v měřítku adaptivní obrazy, což znamená automaticky měnit velikost obrázků pro mobilní zařízení (obvykle se provádí pomocí pluginu).

Krok 1: Spusťte web pomocí testu GTmetrix pro Android:

Mobilní test GTmetrix

Poskytujte obrázky v měřítku na mobilu

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

Maximální šířka pozadí

Krok 3: Nainstalujte plugin Adaptive Images z ShortPixel nebo Adaptivní obrázky.

Adaptivní obrázky ShortPixel

Krok 4: Nastavte rozměry poskytované GTmetrix jako maximální šířka pozadí.

Maximální šířka pozadí

Krok 5: Znovu spusťte web pomocí mobilního testu GTmetrix, abyste se ujistili, že nedochází k chybám.

Mobilní test GTmetrix

Krok 5: Nakonfigurujte další nastavení v adaptéru adaptivních obrázků (ShortPixel zahrnuje podporu WebP, líné načítání obrázků, inteligentní oříznutí a odstranění EXIF ​​dat). Mohou také pomoci.

6. Změna velikosti obrázků na více stránkách

Pokud používáte stejný obrázek na více stránkách a je třeba ho upravit, můžete změnit velikost obrázku, zkopírovat jej HTML a poté jej opravit pomocí několika pluginů Better Search Replace..

Krok 1: Nainstalujte Doplněk pro lepší vyhledávání Vyměňte.

Krok 2: Zkopírujte HTML starého obrázku a vložte jej do pole „Hledat“ v zásuvném modulu pro lepší vyhledávání. Můžete použít Textový editor WordPress pro zobrazení HTML obrázku. Poznámka: Nahrazení pomocí lepšího vyhledávání nahradí obrázek, pouze pokud obsahuje přesný kód HTML, který zadáte do pluginu.

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

Zobrazovat zmenšený obrázek HTML

Krok 4: Vyberte tabulky (např. Příspěvky), které chcete prohledat, a zrušte zaškrtnutí pro suché skenování.

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

7. Vytvořte Cheat Sheet Dimensions Image Dimensions

Jak jsem již zmínil, měli byste změřit rozměry všech oblastí vašeho webu, abyste mohli obrázky před jejich nahráním změnit. Tyto kóty můžete najít v GTmetrixu (pouze pokud jste zobrazili chyby v měřítku obrázku) nebo je můžete také najít v šabloně stylů CSS vašeho motivu..

Příklad:

  • Posuvné obrázky: 1900 (š) x 400 (h)
  • Karuselové obrázky: 115 (w)
  • 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ů

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

8. Doplňky WordPress pro zobrazování zmenšených obrázků

Většina pluginů pro optimalizaci obrázků má možnost změnit velikost obrázků, ale toto není příliš efektivní, když se pokoušíte opravit chyby v GTmetrix, protože různé oblasti vašeho webu požadovaly různé dimenze. 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

Změna velikosti obrázků Smush

Představte si

Změna velikosti obrázků Představte si

EWW Image Optimizer

Změna velikosti obrázků EWWW

Další optimalizace obrázků

Napsal jsem kompletní návod optimalizace obrázků v WordPress který zahrnuje:

  • Komprese obrázků
  • Poskytování obrázků prostřednictvím CDN
  • Změna velikosti GIF
  • Odstraňování EXIF ​​dat
  • Líný načítání obrázků + videí
  • Cloudflare Mirage, Polish, Ochrana odkazů

Optimalizace obrazu v GTmetrix

Hledáte více WordPress Rychlostní návody?
Zde jsou další návody, které jsem napsal:

  • Jak nastavit WP Rocket (doporučuji plugin pro mezipaměť)
  • Cloudways vs. SiteGround (dva špičkové hostitele, které doporučuji)
  • Jak jsem získal 100% GTmetrix skóre (WordPress Speed ​​Guide)

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

Často kladené otázky

&# x2705; Mohu použít plugin pro zobrazování zmenšených obrázků?

Ne, různé části webu vyžadují různé rozměry obrázku. Musíte přizpůsobit obrázky tak, aby odpovídaly těmto jedinečným rozměrům.

&# x2705; Jaký je nejjednodušší způsob, jak změnit měřítko obrázku?

Stáhněte si obrázek, ořízněte ho / změňte jeho velikost v programu, jako je Photoshop nebo Gimp, a pak starý obrázek nahraďte novým.

&# x2705; Které obrázky bych měl začít škálovat jako první?

Začněte škálováním obrázků, které se objevují na více stránkách, jako je vaše logo, postranní panel, obrázky, obrázky zápatí a další.

&# x2705; Kde najdu správné rozměry obrázku?

Při rozbalení položky na kartě PageSpeed ​​vám GTmetrix řekne správné rozměry každého obrázku.

&# x2705; Jak mohu plně optimalizovat obrázek?

Přizpůsobte je správným rozměrům, zkomprimujte je a odeberte data EXIF ​​pomocí obrazového programu nebo pluginu a poté v HTML zadejte rozměry obrázku (nastavte šířku a výšku obrázku).

Doufám, že vám tento výukový program pomohl! Pokud na svém webu WordPress stále zobrazujete zmenšené chyby obrázků, zanechte mi komentář se svou otázkou a já vám v každém případě pomůžu.

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