Optimalizujte svoje obrázky s preddefinovanými veľkosťami obrázkov [WordPress Tip]

Optimalizácia obrázkov na webových stránkach je skľučujúca úloha. Môžete si zvoliť použitie menšieho počtu obrázkov, komprimovaných obrázkov, sprites alebo svg; zoznam pokračuje. Jedným miestom, kde sa mnohé stránky WordPress dostanú do poplachu, je definovanie veľkostí obrázkov, čo je a kľúčovým aspektom optimalizácie webových stránok s obsahom.

Veľkosti obrázkov sú dôležité, pretože obrázky sa automaticky vytvárajú podľa veľkostí, ktoré sa dajú pri nahrávaní obrázkov. To zaručuje, že aj keď máte originálny obrázok s rozlíšením 3000 pixelov, nikdy sa nepoužije, ak je postačujúci obraz 600 pixlov. V ideálnom prípade by širokopásmový priestor s rozlíšením 600 pixelov mal používať širokouhlý obraz s rozlíšením 600 pixelov, než aby sa zmenšil väčší.

V tomto článku vás budem prechádzať aké veľkosti obrázkov sú a ako ich definovať.

Ako WordPress spracováva obrázky

Ak ste niekedy vložili obrázok do článku WordPress, mali by ste prejsť voličom veľkosti záberu. Umožňuje vám vkladať malé, stredné a veľké verzie obrázkov. Skutočné veľkosti pre tieto môžete upraviť v nastaveniach programu WordPress.

Kedykoľvek odovzdáte obrázok pomocou aplikácie WordPress, generuje verzie týchto obrázkov a uloží ich samostatne. Napríklad, ak odovzdáte obrázok 1200 × 800, WordPress môže vytvoriť verzie 100 × 100, 600 × 400 a 900 × 600. Keď vložíte obrázok a zvolíte "stredné", použije sa skutočná verzia média, na rozdiel od skrátenej verzie originálu.

Toto je mimoriadne prospešné, pretože šetrí šírku pásma na serveri a spracuje čas na klientskom počítači. Myslím, že nie je prekvapením, že sťahovanie obrázka s rozlíšením 600 × 400 je rýchlejší ako prevzatie snímky s rozlíšením 1200 × 800.

Ak sa použije väčší obrázok, ktorý je potrebné zmenšiť, prehliadač sa musí postarať o výpočty aby sa to stalo. Zatiaľ čo to nebude trvať hodiny, môže to byť zrejmé na webových stránkach s vysokým rozlíšením.

Správny obrázok na správnom mieste

Konečným cieľom by malo byť vždy používajte vhodné veľkosti obrázkov. Ak potrebujete obrázok s rozmermi 440 × 380, potom odneste obrázok zo servera s presnou veľkosťou. Existujú dve hlavné miesta, kde budete používať odovzdané obrázky: najdôležitejšie obrázky a obrázky v službe - radšej by som radšej zamerať na najdôležitejšie obrázky.

Vo všetkých článkoch, okrem tých, ktoré sú najviac vizuálne riadené, nezáleží na tom, či je obrázok in-post široký 220 x 245 pixlov. Ktorákoľvek verzia, ktorú máte k dispozícii, by bola rovnako použiteľná. Odporúčané obrázky sa však zvyčajne zobrazujú v bežných veľkostiach. Pre zoznamy článkov môžete použiť miniatúru 178 × 178, pre hlavičky článku môžete použiť širokouhlý obrázok s rozlíšením 1200 × 600 pixlov.

Okrem toho môžete tiež chcieť mať samostatnú miniatúru / strednú / veľkú veľkosť podľa definície v nastaveniach jednoduchý prístup k určitým rozmerom pri pridávaní obrázkov do príspevkov.

Takže to, čo všetko klesá, je toto: Nebolo by to skvelé, ak by sme mali dve extra veľkosti obrázkov, ktoré by sme mohli použiť pre zobrazené obrázky? Tieto veľkosti obrázkov by sa vytvorili hneď vedľa ostatných, keď sa odovzdá obrázok. Dobrou správou je, že WordPress máte dostatočne jednoduchú funkciu.

Vytváranie veľkostí obrázkov

Použitím add_image_size () môžete definovať všetky veľkosti obrázkov, ktoré vaše webové stránky potrebujú. Vypracujme dva príklady uvedené vyššie. Umiestnite kód nižšie do súboru functions.php alebo do súboru pluginu.

 add_image_size ('featured_thumbnail', 178, 178, true); add_image_size ('featured_wide', 1200, 600); 

Ako vidíte, táto funkcia trvá štyri parametre. Prvý parameter vám umožňuje nastaviť názov veľkosti. Druhým parametrom je maximálna šírka, tretia, maximálna výška. Štvrtý parameter nastavuje tvrdé orezanie. Ak je nastavené na hodnotu true, obrázok sa vytvorí v presnej veľkosti, ktorú zadáte.

Po pridaní do vášho motívu alebo doplnku vytvoríte WordPress dve nové verzie každého odovzdaného súboru.

Použitie veľkostí obrázkov

Tieto veľkosti obrázkov je možné použiť v mnohých funkciách, ktoré sa zaoberajú získavaním médií. Najskôr sa pozrime na vybrané obrázky. the_post_thumbnail () sa bežne používa na zobrazenie zobrazeného príspevku príspevku. Nasledujúci kód môže byť umiestnený v slučke WordPress:

 the_post_thumbnail ('featured_thumbnail'); 

Prvý parameter tejto funkcie umožňuje určiť veľkosť záberu, ktorú chcete použiť. Keďže som zadal "featured_thumbnail", bude použitá verzia 178 × 178 tohto súboru.

Existuje množstvo ďalších funkcií, ako napríklad wp_get_attachment_image ()a wp_get_attachment_image_src () ktoré tiež používajú parameter veľkosti obrázka. Kedykoľvek použijete takúto funkciu, vždy by ste mali špecifikovať vhodnú veľkosť obrázka.

Regenerácia miniatúr

Ak už máte miesto na mieste, nebudete môcť retrospektívne optimalizovať svoje články jednoduchým vymedzením veľkosti obrázka. Veľkosti obrázkov sa berú do úvahy iba pri nahrávaní nového obrázka, takže sa na obrázky už v systéme nevzťahujú.

Nebojte sa, plugin Regenerate Thumbnails urobí všetko lepšie! Tento doplnok môže obnoviť miniatúry všetkých vašich obrázkov pri zohľadnení všetkých definovaných veľkostí obrázkov. To môže tiež zacielenie na konkrétny obrázok, čo je užitočné, ak máte len pár, alebo robíte nejaké testovanie.

Po obnovení miniatúr by ste mali vidieť optimalizované verzie načítané na vašich stránkach. Môžete to skontrolovať zobrazením zdroja obrázka. Ak ste odovzdali príklad "example.jpeg" a ako zdroj pre váš zobrazený obrázok vidíte "example.jpeg", niečo nie je správne. Ak vidíte “Príklad 178 × 178.jpeg” potom všetko je dobré; zobrazí sa optimalizovaný obrázok.

Citlivé obrázky

Jedným z problémov pri udržiavaní optimalizovaného miesta je reakcia. Keď si prezerám článok na zariadení iPad, obrázok veľkej veľkosti v režime "in-post" bude zmenšený, pretože maximálna šírka bude 786 pixelov.

Najjednoduchšie riešenie je použiť doplnok ako Hammy. Funkcia Hammy je založená na šírke obsahu vašej témy (na rozdiel od šírky okna prehliadača) a môže na to zobrazovať optimalizované obrázky. To je obzvlášť užitočné pre mobilných používateľov, kde môže byť problémom spracovanie výkonu a šírky pásma.

Ďalšia optimalizácia obrazu

Ako som uviedol v úvode, existuje nespočetné množstvo spôsobov, ako optimalizovať obrázky. Od skriptov až po kompresiu obrázkov je možné použiť veľa techník na zníženie doby zaťaženia, ktoré prichádzajú ruka v ruke s obrázkami. Ashutosh KS napísal skvelý článok predstavujúci 9 WordPress Pluginy na zlepšenie výkonnosti obrazu, navrhujem, aby bol prečítaný!

Navrhujem tiež pozrieť sa na Hassle Free Response Images, ktorý vám ukáže, ako pridať podporu pre element obrázka, čo budete chcieť použiť, ak chcete napísať svoj vlastný kód.