Ako urobiť obrázky načítať rýchlejšie na vašom webe WordPress

Takže chcete, aby sa obrázky načítali rýchlejšie?


Dobre, nebudem usilovne hrať. Poďme sa ponoriť priamo do dobrých vecí!

Existujú tri spôsoby, ako zrýchliť načítavanie obrázkov v programe WordPress:

  • resize
  • Compress
  • Lenivý náklad

V tomto príspevku vysvetlím, ako každá z týchto techník funguje a prečo spôsobia rýchlejšie načítanie vašich stránok. Ukážem vám tiež, ako implementovať každú taktiku pomocou manuálnych riešení a odporúčaní doplnkov.

Táto prvá technika je veľmi jednoduchá, ale často ju nováčikovia WordPress prehliadajú.

Ako optimalizovať obrázky v

Zmena veľkosti obrázkov

Najjednoduchší spôsob, ako zrýchliť načítavanie obrázkov, je zmena ich veľkosti. Nechaj ma vysvetliť.

Čo je zmena veľkosti?

Keď poviem „zmena veľkosti“, mám na mysli zmenu rozmerov obrázka av takom prípade chcete zmenšiť rozmery príliš veľkých obrázkov..

Napríklad blogeri niekedy robia fotografie na svojich telefónoch alebo digitálnych fotoaparátoch a odovzdávajú ich na svoje blogy. Neupravené kópie fotografií môžu mať šírku až 5 000 pixlov. Teraz o tom premýšľajte …

Šírka sekcie príspevkov na vašom webe pravdepodobne nie je širšia ako 800 pixlov. Text, ktorý práve čítate, pokrýva na stránke iba asi 700 pixelov, takže si predstavte, že sem pridáte obrázok, ktorý je široký 5 000 pixelov. Bolo by oveľa väčšia, ako je potrebné a hoci by sa veľkosť stránky zmenšila, aby sa zmestili na stránku, načítaný obrazový súbor je stále masívny a veľmi zbytočný. A to preto, že …

Obrázky, ktoré majú väčšie rozmery, majú tiež väčšie veľkosti súborov.

Pokiaľ ide o výkon a zrýchlenie načítavania obrázkov, zníženie rozmerov obrázka je skvelý spôsob, ako drasticky zmenšiť veľkosť súboru, čím sa rýchlosť načítania obrázkov zrýchli..

Vráťme sa k môjmu príkladu a predpokladajme, že obrázok má šírku 5 000 pixelov a je vysoký. Ak by ste ho znížili z 5 000 pixelov na iba 700 pixlov, obrázok by v skutočnosti používal o 99% menej pixelov. Inými slovami, veľkosť súboru by sa znížila asi o 99%. Ak by bol obrázok 5 MB, skončil by iba 50 kB a na vašu stránku by sa načítal o 99% rýchlejšie.

Zmena veľkosti obrázkov

Ak nechcete mať na starosti starostlivú zmenu veľkosti snímok, je takmer určite možné dosiahnuť určité zisky.

Existuje niekoľko spôsobov, ako môžete zmeniť veľkosť svojich obrázkov tak, aby sa perfektne zmestili na stránku.

Ručne zmeňte veľkosť obrázkov

Pred odovzdaním nového obrázka na svoj web ručne zmeňte jeho veľkosť pomocou zabudovaných nástrojov na úpravu obrázkov v počítači.

Ak máte veľmi veľký obraz, ako v mojom príklade, okamžite to urobí veľký rozdiel. Po zmene veľkosti obrázka ho môžete nahrať do knižnice médií.

Aj keď sa chystáte použiť obrázok v lightboxe alebo slideri, zvyčajne nie je dôvod, aby bol väčší ako 2 000px. Ak sa obrázok bude nachádzať v oblasti obsahu príspevku alebo stránky, pravdepodobne sa vám bude dariť, ak bude mať šírku 800px.

Tento spôsob zmeny veľkosti obrázkov funguje dobre, ale nepomáha pri obrázkoch, ktoré sa už na váš web odovzdali. Jednoduchou technikou pre existujúce obrázky je jednoducho zvoliť inú veľkosť.

Používajte menšie veľkosti

Keď odovzdáte obrázok do mediálnej knižnice, WordPress vytvorí až 3 ďalšie verzie: miniatúry, stredné a veľké.

Ak navštívite stránku s nastaveniami médií, uvidíte, že si môžete vybrať tieto veľkosti:

Nastavenia médií WordPress

Aj keď môžete zmeniť nastavenia, predvolená veľká veľkosť je 1024 px, čo je dosť veľké na to, aby sa dalo použiť na príspevky bez zbytočného plytvania. Túto veľkosť môžete použiť pre všetky obrázky, ktoré pridáte do svojich príspevkov.

Ak chcete zmeniť veľkosť obrázka, ktorý ste pridali do príspevku, kliknite na neho v editore a na pravom bočnom paneli sa zobrazí rozbaľovacia ponuka Veľkosť obrázka..

Veľkosť obrázka WordPress

Vyberte veľkosť „Large“ a aktualizujte príspevok. Ak máte nejaké obrázky s nadmernou veľkosťou, táto technika vám umožní rýchlo obslúžiť vhodnejšiu veľkosť, ktorá sa načíta rýchlejšie, bez potreby opätovného načítania a výmeny originálu..

To však môže byť hrozne únavné, ak máte desiatky príspevkov s desiatkami obrázkov. K dispozícii je ešte rýchlejšia a efektívnejšia metóda.

Automatická zmena veľkosti pomocou doplnku

Namiesto zmeny veľkosti obrázkov sami môžete nechať doplnok, aby to urobil automaticky za vás. Pokiaľ ide o automatickú zmenu veľkosti obrazu, nič neprekonáva Optimole zapojiť.

Optimole Image Optimizer

Nefunguje to tak, ako by ste očakávali.

Namiesto úpravy obrázkov v knižnici médií si Optimole uchováva vlastné kópie vašich obrázkov a poskytuje ich z vysoko výkonného CDN. Týmto spôsobom sa vaše originály nijako neupravujú.

Ďalej nemusíte dať Optimole jednu veľkosť, ktorá sa použije pre vaše obrázky. Skôr získava veľkosť obrazovky návštevníka a generuje optimálne veľkú verziu každého obrázka za behu. To znamená, že niekto v mobilnom zariadení môže načítať verziu obrázka s rozlíšením 400 pixelov, zatiaľ čo iný návštevník v notebooku získa verziu toho istého obrázka s rozlíšením 700 pixlov..

Tento spôsob zmeny veľkosti je oveľa ľahšie implementovateľný a efektívnejší pre mobilné zariadenia, čo je obzvlášť dôležité, pretože mobilní návštevníci majú často tendenciu byť pomalšie..

Ak sa chcete naučiť, ako používať Optimole, môžete sledovať moje úplné video s návodom:

Odporúčame zmeniť veľkosť najprv, pretože nech už to urobíte manuálne alebo automatizujete pomocou doplnku, je to jednoduché a môže ponúknuť obrovské zisky.

Ak sú vaše obrázky už pre váš web primerane veľké, môžete kompresiou vylepšiť výkonnosť svojho webu oveľa viac.

Komprimujte svoje obrázky

Kompresia je spôsob, ako zmenšiť veľkosť súboru obrázka bez zmeny jeho rozmerov.

K dispozícii sú dva typy kompresie obrázkov.

Prvý typ kompresie obrázka sa nazýva „bezstratová“ kompresia.

Bezstratová kompresia

Vďaka bezstratovej optimalizácii sa samotný obrázok v skutočnosti neupravuje. Táto technika skôr odstráni všetky metadáta uložené v obrazovom súbore. Napríklad obrázky často ukladajú názov zariadenia použitého na nasnímanie obrázka, dátum nasnímania fotografie a niekedy dokonca aj GPS súradnice snímky..

Keďže tieto údaje sú zvyčajne dosť obmedzené, bezstratová optimalizácia by mohla iba zmenšiť veľkosť obrázka o 1-5%, ale v skutočnosti nie je dôvod ich používať, pretože to nemá žiadny vplyv na kvalitu obrázka..

Skutočné zisky pochádzajú zo stratovej optimalizácie.

Stratová kompresia

Stratová kompresia optimalizuje samotný obrázok a vedie k zhoršeniu kvality. Ale tu je tá vec …

Kompresné algoritmy sú v súčasnosti také dobré, že často dokážete zmenšiť veľkosť súboru obrázka o 50 – 70% bez zjavného rozdielu. Pokiaľ nie ste profesionálnym fotografom a nepotrebujete, aby boli vaše obrázky dokonale ostré na 4k monitoroch, ani si nevšimnete stratu kvality.

Ako skomprimovať obrázky

Môžete manuálne komprimovať svoje obrázky pomocou nástroja ako TinyPNG pred ich odovzdaním alebo pomocou doplnku na automatizáciu vecí.

ShortPixel je vynikajúci doplnok na optimalizáciu obrázkov na vašom webe. Môže ich hneď pri odovzdávaní optimalizovať a hromadne optimalizovať všetky obrázky, ktoré už sú v knižnici médií.

shortpixel

Na zmenu veľkosti obrázka som odporúčal Optimole a veľmi efektívne komprimuje obrázky. Opäť nebude optimalizovať originály uložené v knižnici médií, ale skôr skomprimuje kópie, ktoré slúži vašim návštevníkom..

Tu nájdete niekoľko ďalších doplnkov na optimalizáciu obrázkov.

Pri zmene veľkosti a komprimácie obrázkov sa váš web načíta oveľa rýchlejšie, ale pre obrázky, ktoré môžete vykonať, existuje jedna posledná optimalizácia..

Implementujte lenivé načítanie

Lenivé načítanie je skutočne inteligentný spôsob, ako ďalej optimalizovať obrázky.

Povedzme, že máte blogový príspevok s 12 obrázkami. Keď niekto navštívi váš web, nie všetky obrázky sa okamžite zobrazia na jeho obrazovke. Aby sa väčšina z nich mohla zobraziť, budú sa musieť posunúť ďalej. Tak prečo naložiť všetkých 12 ihneď?

Pri lenivom načítaní sa načítajú iba obrázky, ktoré sa zobrazujú na obrazovke. Namiesto načítania 12 obrázkov sa namiesto nich môžu načítať iba 2 až 3 obrázky. Keď sa návštevník posúva po stránke nadol, zvyšné obrázky sa načítajú pri ich vstupe na obrazovku. To znamená, že počiatočné načítanie je oveľa rýchlejšie a keďže väčšina návštevníkov sa neposúva po celej stránke, veľa obrázkov sa nikdy nenačíta, čo vám ušetrí cenné prostriedky servera..

Toto video obsahuje vizualizáciu, ktorá ho lepšie vysvetľuje, ak chcete jasnejšiu predstavu o tom, ako funguje lenivé načítanie:

Teraz, keď ste predaný koncept, môžete na svojom webe implementovať lenivé načítanie.

Ako používať lenivé načítanie

Táto technika optimalizácie výkonu sa dá ľahko pridať do programu WordPress pomocou doplnku.

Ak hľadáte bezplatnú možnosť, vyskúšajte Optimole alebo a3 Lazy Load.

Pri Optimole sa lenivé načítavanie automaticky zapne a plugin a3 sa dá ľahko nakonfigurovať.

Navyše, ak vám to nevadí platiť, pozrite sa WP Rocket. Má vysoko výkonné ukladanie do pamäte cache a množstvo ďalších rýchlych nástrojov.

Ak chcete zapnúť lenivé načítanie pomocou programu WP Rocket, stačí prepnúť tento prepínač:

WP Rocket Media

To nemôže byť jednoduchšie!

Užite si rýchlejšie načítanie obrázkov

Zhrnutie toho, čo ste sa práve naučili…

Predimenzované obrázky odovzdané na vaše stránky sú veľmi pomalé. Iba jeden z týchto obrázkov môže váš web zastaviť.

Najdôležitejšou vecou, ​​ktorú môžete urobiť pre zrýchlenie vašich obrázkov, je zmeniť veľkosť príliš veľkých obrázkov tak, aby zodpovedali veľkosti vášho webu. Môžete to urobiť manuálne alebo automatizovať pomocou Optimole.

Ďalej algoritmy kompresie obrázkov prešli dlhú cestu a v týchto dňoch môžete zmenšiť veľkosť súboru obrázka o 50 – 70% bez výrazného ovplyvnenia kvality. Toto nie je nič iné. Použite ShortPixel alebo Optimole na kompresiu každého obrázka na vašom webe.

Nakoniec je lenivé načítanie skvelým spôsobom, ako selektívne načítať obrázky. Na okamžitú implementáciu lenivého načítania na svoje stránky môžete použiť Optimole, a3 Lazy Load alebo WP Rocket.

Ak ste niektorú z týchto techník nepoužívali, po implementácii sa váš web načíta dramaticky rýchlejšie. Odfúkne vás to.

Máte nejaké otázky týkajúce sa konceptov a techník v tomto príspevku? Máte ďalší tip na zdieľanie? Príspevok v sekcii komentárov nižšie!

Tiež sa ti môže páčiť,

Ako opraviť pomalý web WordPress a správcovský panel (trvalo)

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