Ako zobrazovať zmenšené obrázky vo WordPress (položka v GTmetrix)

Potreba zobrazovať zmenšené obrázky vo WordPress?


To len znamená, že musíte zmeniť veľkosť veľkých obrázkov, aby boli menšie.

GTmetrix vám povie, na ktoré obrázky je potrebné zmeniť mierku a na aké správne rozmery by sa mali orezať alebo zmeniť ich veľkosť. Ďalej zmeňte veľkosť (mierku) obrázka a staré obrázky nahraďte novými.

Served Scaled Images

Pretože GTmetrix zobrazuje iba neptimizované obrázky pre jednu testovanú stránku, začnite škálovaním SiteŠiroké obrázky, ktoré sa zobrazujú na viacerých stránkach (vaše logo, bočný panel a päta). Ďalej spustite ďalšie stránky cez GTmetrix a upravte na nich jednotlivé obrázky.

Môžem použiť doplnok na automatické škálovanie obrázkov?
Nie je pravdepodobné. Vo väčšine doplnkov na optimalizáciu obrázkov môžete nastaviť maximálnu šírku a výšku. Rôzne oblasti vášho webu si však vyžadujú konkrétne rozmery (obrázky sa musia zodpovedajúcim spôsobom upravovať).

Vytvorte cheat sheet rozmeru obrázka.
Najlepším spôsobom, ako sa vyhnúť chybám v mierke obrázkov, je naučiť sa dimenzie každej oblasti vášho webu (posuvníky, widgety, logo, obrázky blogu v celej šírke pásma atď.). Ďalej vytvorte cheatový list s rozmermi obrázkov so zoznamom rozmerov každej oblasti. Ak sledujete cheat sheet rozmerov obrázka a zmeníte veľkosť obrázkov pred odovzdaním, nemali by ste už znova zobrazovať zmenšené chyby obrázkov.

1. Nájdite nadmerne veľké obrázky v GTmetrix

Spustite stránku pomocou technológie GTmetrix a na karte PageSpeed ​​zobrazte zmenšené chyby obrázka. Rozbaľte ich odporúčania a uvidíte správne rozmery každého obrázka, ktorého veľkosť by sa mala zmeniť. Pamätajte, že spoločnosť GTmetrix bude zobrazovať chyby iba pre jednu testovanú stránku.

Poskytovať zmenšené obrázky GTmetrix

Môžete tiež ručne skontrolujte, či sú obrázky v mierke. Najprv kliknite pravým tlačidlom myši a skopírujte adresu obrázka.

Skopírujte adresu obrázku

Potom prilepte webovú adresu obrázka na novú kartu prehľadávača. Ak porovnáte obrázok zobrazený na vašom webe s adresou URL obrázka, uvidíte veľkosť, ktorá sa môže výrazne odlišovať. To znamená, že obrázok musí byť upravený na mierku. Porovnaním dvoch variácií obrázka vedľa seba môžete zistiť, aký veľký je obrázok (a prečo sa stránka, na ktorej sa obrázok nachádza, môže načítavať veľmi pomaly).

Obrázok v mierke vs Unscaled Image

2. Zmena veľkosti obrázkov na opravu rozmerov

Stiahnite si starý obrázok a otvorte ho vo vybranom nástroji na úpravu obrázkov (používam GIMP). Zmeňte veľkosť a / alebo orežte obrázok na rozmery odporúčané spoločnosťou GTmetrix. Mnoho nástrojov na úpravu obrázkov vám umožňuje komprimovať obrázky a odstraňovať ich EXIF údaje čo ešte viac zrýchli načítavanie obrázka.

Zmena mierky obrázka GIMP

Môžete tiež orezať a zmeniť veľkosť obrázkov priamo vo WordPress:

Zmena mierky obrázka v editore médií WordPress

3. Nahraďte starý obrázok novým

Nahrajte svoj nový obrázok do WordPress a potom starý obrázok nahraďte novým.

Unscaled Widget Image

Obrázok v mierke

4. Znovu otestujte stránku v GTmetrix

Znova otestujte stránku v GTmetrix a už by ste nemali zobrazovať zmenšené chyby obrázkov.

100% obrázky v mierke

5. Poskytovanie mierkových obrázkov na mobile

Poskytovanie zmenšených obrázkov sa v mobilných zariadeniach líši.

Ak sa zaregistrujete pre bezplatný účet GTmetrix, môžete vyskúšať svoj rýchlosť mobilnej webovej stránky v systéme Android. Ak vaše stránky nepoužívajú, je pravdepodobné, že sa vám zobrazia viac chýb v mierke zobrazovania adaptívne obrázky, čo znamená automaticky meniť veľkosť obrázkov pre mobilné zariadenia (zvyčajne sa to robí pomocou doplnku).

Krok 1: Spustite svoje stránky pomocou testu spoločnosti GTmetrix pre Android:

Mobilný test GTmetrix

Poskytovanie zmenšených obrázkov na mobile

Krok 2: Nájdite svoje mobilné pozadie, ktoré poskytuje GTmetrix:

Maximálna šírka pozadia

Krok 3: Nainštalujte doplnok Adaptive Images z ShortPixel alebo Adaptívne obrázky.

Adaptívne obrázky s krátkym rozlíšením

Krok 4: Nastavte rozmery poskytované spoločnosťou GTmetrix ako maximálna šírka pozadia.

Maximálna šírka pozadia

Krok 5: Znova spusťte web pomocou mobilného testu spoločnosti GTmetrix, aby ste sa uistili, že nedošlo k žiadnym chybám.

Mobilný test GTmetrix

Krok 5: Nakonfigurujte ďalšie nastavenia vo vašom doplnku adaptívnych obrázkov (ShortPixel zahŕňa podporu WebP, lenivé načítanie obrázkov, inteligentné orezanie a odstránenie EXIF ​​údajov). Môžu vám tiež pomôcť.

6. Zmena veľkosti obrázkov na viacerých stránkach

Ak používate rovnaký obrázok na viacerých stránkach a je potrebné ho zmenšiť, môžete zmeniť veľkosť obrázka, skopírovať jeho kód HTML a opraviť ho na viacerých stránkach pomocou doplnku Better Search Replace..

Krok 1: Nainštalujte Doplnok pre lepšie vyhľadávanie nahradiť.

Krok 2: Skopírujte HTML starého obrázka a vložte ho do poľa „Hľadať“ v doplnku Lepšie vyhľadávanie. Môžete použiť Textový editor WordPress na zobrazenie HTML obrázka. Poznámka: Nahradenie lepším vyhľadaním nahradí obrázok, iba ak obsahuje presný kód HTML, ktorý ste zadali do doplnku.

Krok 3: Skopírujte HTML nového obrázka a vložte ho do poľa Nahradiť.

Poskytovať zmenšený obrázok HTML

Krok 4: Vyberte tabuľky (napr. Príspevky), ktoré chcete skontrolovať, a zrušte začiarknutie políčka suché skenovanie.

Krok 5: Kliknite na „Hľadať / Nahradiť“ a doplnok nahradí starý obrázok novým.

7. Vytvorte Cheat Sheet Dimensions

Ako som už spomenul, mali by ste zmerať rozmery všetkých oblastí svojho webu, aby ste mohli obrázky pred ich odovzdaním zmeniť. Tieto dimenzie nájdete v GTmetrix (iba v prípade, že ste zobrazili zmenšené chyby obrázkov) alebo ich nájdete aj v šablóne CSS štýlov vášho motívu..

Príklad:

  • Posuvné obrázky: 1900 (š) x 400 (h)
  • Karuselové obrázky: 115 (w)
  • Obrázky miniaplikácií: 414 (w)
  • Obrázky príspevkov v blogu s plnou šírkou pásma: 680 (w)
  • Vybrané obrázky: 250 (š) x 250 (h)
  • Váš obrázok na Facebooku OG: 1200 (š) x 628 (h) – krok 11
  • Váš obraz Twitter OG 1024 (š) x 512 (h) – krok 11

Obdĺžnik so šírkou 680 pixelov

Šírka môjho blogu je 680 px, takže veľkosť každého obrázka v tomto príspevku bola zmenená na 680 pixlov.

8. Doplnky WordPress na zobrazovanie zmenšených obrázkov

Väčšina doplnkov na optimalizáciu obrázkov má možnosť zmeniť veľkosť obrázkov, avšak pri pokuse o opravu chýb v GTmetrix to nie je veľmi efektívne, pretože rôzne oblasti vášho webu požadovali rôzne dimenzie. Je to viac na zabezpečenie toho, aby vaše obrázky neboli absolútne obrovské. Ako hovorí doplnok Imagify, maximálna šírka by nemala byť menšia ako vaša najväčšia miniatúra.

smush

Zmena veľkosti snímok

Imagify

Zmena veľkosti obrázkov Predstavte si

EWW Image Optimizer

Zmena veľkosti obrázkov EWWW

Ďalšie optimalizácie obrázkov

Napísal som úplný návod optimalizácia obrázkov vo WordPress ktoré zahŕňa:

  • Kompresia obrázkov
  • Doručovanie obrázkov prostredníctvom CDN
  • Zmena veľkosti GIF
  • Odstraňujú sa údaje EXIF
  • Lenivý načítavanie obrázkov + videí
  • Cloudflare Mirage, Polish, Protection

Optimalizácia obrazu v GTmetrix

Hľadáte viac WordPress Rýchlostné príručky?
Tu sú ďalšie návody, ktoré som napísal:

  • Ako nastaviť WP Rocket (odporúčam doplnok pre vyrovnávaciu pamäť)
  • Cloudways vs. SiteGround (dvoch najlepších hostiteľov, ktorých odporúčam)
  • Ako som získal 100% skóre GTmetrix (Sprievodca rýchlosťou WordPress)

Mám tiež úžasné video o optimalizácii rýchlosti WordPress:

často kladené otázky

&# X2705; Môžem použiť doplnok na zobrazovanie zmenšených obrázkov?

Nie, rôzne časti vášho webu vyžadujú rôzne rozmery obrázka. Musíte zmeniť mierku obrázkov tak, aby vyhovovali týmto jedinečným rozmerom.

&# X2705; Aký je najjednoduchší spôsob zmeny mierky obrázka?

Stiahnite si obrázok, orežte ho / zmeňte jeho veľkosť v programe, ako je Photoshop alebo Gimp, a potom starý obrázok nahraďte novým.

&# X2705; Ktoré obrázky by som mal začať škálovať ako prvý?

Začnite škálovaním obrázkov, ktoré sa zobrazujú na viacerých stránkach, ako je vaše logo, bočný panel, obrázky, obrázky päty a ďalšie.

&# X2705; Kde nájdem správne rozmery obrázka?

Pri rozbalení položky na karte PageSpeed ​​vám GTmetrix povie správne rozmery každého obrázka.

&# X2705; Ako môžem úplne optimalizovať obrázok?

Prispôsobte ho správnym rozmerom, skomprimujte ho a odstráňte EXIF ​​údaje pomocou obrazového programu alebo doplnku, potom nezabudnite do HTML zadať rozmer obrázku (nastaviť šírku a výšku obrázka).

Dúfam, že vám tento návod pomohol! Ak na svojom webe WordPress stále zobrazujete zmenšené obrazové chyby, zanechajte mi komentár s otázkou a my vám v každom prípade pomôžem.

na zdravie,
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