Optimizirajte svoje slike z vnaprej določenimi velikostmi slik [WordPress Tip]

Optimizacija slik na spletnem mestu je težavna naloga. Lahko uporabite manj slik, stisnjenih slik, duhov ali svg; seznam se nadaljuje. Eno mesto, kjer se množijo WordPress spletna mesta, je določanje velikosti slik, kar je a ključni vidik optimizacije vsebin, ki so težka.

Velikosti slik so bistvenega pomena, ker se slike samodejno ustvarijo glede na velikosti, ki so podane pri nalaganju slik. To zagotavlja, da tudi če imate 3000px široko izvirno sliko, se nikoli ne uporablja, če je slika 600px dovolj. Idealno bi bilo, če bi 600px širok prostor uporabljal 600px široko sliko, namesto da bi povečal večjo sliko.

V tem članku vas bom popeljal skozi velikosti slik in kako jih opredeliti.

Kako WordPress obdeluje slike

Če ste kdaj vstavili sliko v WordPress članek, bi morali priti z izbirnikom velikosti slike. Tako lahko vstavite majhne, ​​srednje in velike različice slik. Dejanske velikosti za te lahko spremenite v nastavitvah WordPress.

Vsakič, ko naložite sliko v WordPress, ustvari različice teh slik in jih shrani ločeno. Na primer, če naložite sliko 1200 × 800, lahko WordPress ustvari različice 100 × 100, 600 × 400 in 900 × 600. Ko vstavite sliko in izberete »medij«, bo uporabljena dejanska različica medija, v nasprotju s skrčeno različico originala.

To je zelo koristno zaradi tega ohranja pasovno širino strežnika in čas obdelave na odjemalskem računalniku. Mislim, da ni presenetljivo, da je prenos slike velikosti 600 × 400 hitrejši kot nalaganje slike velikosti 1200 × 800.

Če se uporabi večja slika, ki jo je treba zmanjšati, brskalnik mora skrbeti za izračune da bi se to zgodilo. Čeprav to ne bo trajalo več ur, je lahko opazno na spletnih mestih, ki so težka.

Prava slika na pravem mestu

Končni cilj mora biti vedno uporabite ustrezne velikosti slik. Če potrebujete sliko 440 × 380, nato s strežnika vzemite sliko s to velikostjo. Obstajata dve glavni mesti, kjer boste uporabljali naložene slike: predstavljene slike in slike v sporočilu - najprej bi se najprej osredotočili na predstavljene slike..

V vseh, razen najbolj vizualno usmerjenih člankih, ni pomembno, ali je slika v pošti 220px ali 245px široka. Ne glede na različico, ki jo imate na voljo, bi bila enako uporabna. Prikazane slike pa so ponavadi prikazane pri običajnih velikostih. Za sezname člankov lahko uporabite 178 × 178 sličic, za glave člankov pa lahko uporabite široko sliko 1200 × 600.

Poleg tega boste morda želeli ohraniti ločeno sličico / srednje / veliko velikost, kot je določeno v nastavitvah vam omogočajo enostaven dostop do določenih dimenzij pri dodajanju slik v objave.

Torej, kaj vse se zdi, je to: Ali ne bi bilo super, če bi imeli dve dodatni velikosti slik, ki bi jih lahko uporabili za predstavljene slike? Te velikosti slik bi bile ustvarjene tik ob ostalih slikah, ko se naloži slika. Dobra novica je, da je WordPress pokril s precej preprosto funkcijo.

Ustvarjanje velikosti slik

Z uporabo add_image_size () funkcija lahko določite vse velikosti slik, ki jih potrebujejo vaše spletno mesto. Ustvarimo dva zgoraj omenjena primera. Spodnjo kodo postavite v datoteko functions.php ali v datoteko dodatka.

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

Kot lahko vidite, ima ta funkcija štiri parametre. Prvi parameter vam omogoča, da nastavite ime za velikost. Drugi parameter je največja širina, tretja pa maksimalna višina. Četrti parameter določa močno obrezovanje. Če je nastavljeno na true, slika bo ustvarjena s točno določeno velikostjo.

Ko je ta dodana vaši temi ali vtičniku, bo WordPress ustvaril dve novi različici vsake datoteke, ki jo naložite.

Uporaba velikosti slike

Te velikosti slik lahko uporabite v številnih funkcijah, ki se ukvarjajo s pridobivanjem medijev. Najprej si oglejmo predstavljene slike. the_post_thumbnail () se pogosto uporablja za prikaz predstavljene slike objave. Naslednjo kodo lahko postavite v zanko WordPress:

 the_post_thumbnail ("featured_thumbnail"); 

Prvi parameter te funkcije vam omogoča, da določite velikost slike za uporabo. Ker sem podal "featured_thumbnail", bo uporabljena 178 × 178 različica te datoteke.

Obstajajo številne druge funkcije, kot so wp_get_attachment_image ()in wp_get_attachment_image_src () ki prav tako uporabljajo parameter velikosti slike. Kadar koli uporabljate takšno funkcijo, morate vedno določiti ustrezno velikost slike.

Obnavljanje sličic

Če že imate spletno mesto, ne boste mogli optimizirati člankov z retrospektivno določitvijo velikosti slike. Velikosti slik se upoštevajo le pri nalaganju nove slike, zato se ne uporabljajo za slike, ki so že v sistemu.

Ne bojte se, plugin Regenerate Thumbnails bo vse izboljšal! Ta vtičnik lahko regenerira sličice za vse slike, pri čemer upošteva vse določene velikosti slik. Lahko tudi ciljati na določeno sliko, kar je uporabno, če imate le nekaj ali pa nekaj testirate.

Ko so vaše sličice obnovljene, morate videti optimizirane različice, naložene na vašem spletnem mestu. To lahko preverite tako, da si ogledate vir slike. Če ste naložili »example.jpeg« in vidite »example.jpeg« kot vir za vašo predstavljeno sliko, nekaj ni prav. Če vidite “primer-178 × 178.jpeg” potem je vse dobro; prikazana je optimizirana slika.

Odzivne slike

Ena od težav pri vzdrževanju optimizirane strani je odzivnost. Ko pregledujem članek na iPad-u, bo velikost, objavljena v sporočilu, pomanjšana, ker bo največja širina 786 slikovnih pik..

Najlažje je uporabiti vtičnik, kot je Hammy. Hammy deluje na podlagi širine vsebine vaše teme (v nasprotju s širino okna brskalnika) in na podlagi tega lahko uporablja optimizirane slike. To je še posebej priročno za mobilne uporabnike, kjer je lahko težava pri obdelavi in ​​pasovni širini.

Nadaljnja optimizacija slike

Kot sem omenil v uvodu, je na voljo nešteto načinov za optimizacijo slik. Od sprites do stiskanja slik je mogoče uporabiti veliko tehnik za zmanjšanje časa nalaganja, ki pridejo z roko v roki s slikami. Ashutosh KS je napisal odličen članek, ki prikazuje 9 vtičnikov za WordPress, ki izboljšajo slikovno učinkovitost.!

Predlagam tudi, da si ogledate Hassle Free Responsive Images, ki vam pokaže, kako dodati podporo elementu slike, kar boste želeli uporabiti, če želite napisati lastno kodo.