Optimeerige oma pilte eelnevalt määratletud kujutise suurustega [WordPressi vihje]

Piltide optimeerimine veebisaidil on heidutav ülesanne. Võite valida, kas kasutada vähem pilte, tihendatud pilte, spriite või svg; nimekiri jätkub. Üks koht, kus paljud WordPressi saidid tõmbuvad üles, on kujutise suuruse määratlemine, mis on a sisu-raskete saitide optimeerimise oluline aspekt.

Pildi suurused on väga olulised, sest pildid luuakse automaatselt vastavalt piltide üleslaadimisel antud suurustele. See tagab, et isegi kui teil on 3000px lai originaalpilt, ei kasutata seda kunagi, kui piisab 600px pildist. Ideaaljuhul peaks 600px laiune ruum olema suurem kui 600px suur, mitte suurem.

Selles artiklis käin teid läbi millised kujutise suurused on ja kuidas neid määratleda.

Kuidas WordPress tegeleb piltidega

Kui olete kunagi sisestanud pildi WordPressi artiklisse, oleksite pidanud tulema pildi suuruse valija. See võimaldab teil lisada väikese, keskmise ja suure pildi versiooni. Nende tegelikud suurused saab muuta WordPressi seadetes.

Kui laadite pildi WordPressi kaudu, loob see nende kujutiste versioonid ja salvestab need eraldi. Näiteks, kui laadite üles 1200 × 800 kujutise, võib WordPress luua 100 × 100, 600 × 400 ja 900 × 600 versiooni. Pildi sisestamisel ja "keskmise" valimisel kasutatakse tegelikku keskmise versiooni, mitte originaali vähenenud versiooni..

See on väga kasulik, sest see on säilitab serveris ribalaiuse ja töötlemisaja kliendi arvutis. Ma arvan, et ei ole üllatav, et 600 × 400 kujutise allalaadimine on kiirem kui 1200 × 800 kujutise allalaadimine.

Kui kasutatakse suuremat pilti, mida tuleb vähendada, brauser peab arvutuste eest hoolt kandma et see juhtuks. Kuigi see ei kesta tunde, võib see olla pildi rasketes veebilehtedel märgatav.

Parem pilt õiges kohas

Lõplik eesmärk peaks olema kasutage alati sobivaid kujutise suurusi. Kui teil on vaja 440 × 380 pilti, siis võtke serverist täpne suurus. On kaks peamist asukohta, kus kasutate üleslaaditud pilte: esiletõstetud pilte ja post-pilte - soovitaksin esmalt keskenduda esiletõstetud piltidele.

Kõigis, välja arvatud kõige visuaalselt suunatud artiklites, ei ole tegelikult tähtis, kas post-image on 220px või 245px lai. Ükskõik milline versioon, mis teil on olemas, oleks võrdselt kasutatav. Soovitatavad pildid on tavaliselt tavaliste suuruste juures. Artiklite nimekirjade puhul võib kasutada 178 × 178 pisipilti, artikli pealkirjade puhul võib kasutada 1200 × 600 laiemat pilti.

Lisaks võite soovida säilitada eraldi pisipildi / keskmise / suure suurusega, nagu on määratletud seadetes annab teile kergesti ligipääsu konkreetsetele mõõtmetele piltide postituste lisamisel.

Niisiis, mida see kõik tähendab, on see: Kas poleks tore, kui meil oleks kaks ekstra suurust, mida saaksime kasutada piltide jaoks? Need pildi suurused luuakse paralleelselt ülejäänud, kui pilt üles laaditakse. Hea uudis on see, et WordPress on suletud päris lihtsa funktsiooniga.

Pildi suuruste loomine

Kasutades add_image_size () funktsioon saate määratleda kõik pildi suurused, mida teie veebileht vajab. Loome ülalmainitud kaks näidet. Asetage allolev kood oma teema funktsioonidesse.php või plugina failis.

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

Nagu näete, võtab see funktsioon neli parameetrit. Esimene parameeter võimaldab teil määrata suuruse nime. Teine parameeter on maksimaalne laius, kolmas, maksimaalne kõrgus. Neljas parameeter seab kõva kärpimise. Kui see on õige, pilt luuakse täpselt määratud suurusega.

Kui see on teie teemale või pluginale lisatud, koostab WordPress iga üleslaaditud faili iga uue versiooni.

Pildi suuruste kasutamine

Neid kujutise suurusi saab kasutada mitmesugustes funktsioonides, mis tegelevad meedia allalaadimisega. Vaatame esmalt esiletõstetud pilte. the_post_thumbnail () kasutatakse tavaliselt postituse iseloomuliku pildi kuvamiseks. Järgmise koodi saab paigutada WordPressi silmusesse:

 the_post_thumbnail ('featured_thumbnail'); 

Selle funktsiooni esimene parameeter võimaldab määrata kasutatava pildi suuruse. Kuna olen määranud "featured_thumbnail", kasutatakse selle faili 178 × 178 versiooni.

On mitmeid muid funktsioone, nagu näiteks wp_get_attachment_image ()ja wp_get_attachment_image_src () mis kasutavad ka pildi suuruse parameetrit. Kui kasutate sellist funktsiooni, peate alati määrama sobiva pildi suuruse.

Pisipiltide taastamine

Kui teil on juba olemas sait, ei saa te oma artikleid tagasiulatuvalt optimeerida lihtsalt kujutise suuruse määratlemisel. Pildi suurusi võetakse arvesse ainult uue pildi üleslaadimisel, nii et neid ei rakendata süsteemis juba olevate piltide suhtes.

Ära karda, Regenerate Thumbnails plugin teeb asjad paremaks! See plugin võib regenereerida kõigi teie piltide pisipildid, võttes arvesse kõiki määratletud kujutise suurusi. See võib ka olla sihtida kindlat pilti, mis on kasulik, kui teil on vaid mõned, või teete mõningaid teste.

Kui teie pisipildid on regenereeritud, peaksite nägema saidile laaditud optimeeritud versioone. Seda saab vaadata, vaadates pildi allikat. Kui olete üles laadinud „example.jpeg” ja näete oma näite pildi allikana „example.jpeg”, siis midagi ei ole õige. Kui näete “näide-178 × 178.jpeg” siis kõik on hästi; kuvatakse optimeeritud pilt.

Reageerivad pildid

Üks raskusi optimeeritud saidi säilitamisel on reageerimisvõime. Kui vaatan iPadis olevat artiklit, vähendatakse suurte suurustega postkujutist, kuna maksimaalne laius on 786 pikslit..

Lihtsaim lahendus on kasutada sellist pluginat nagu Hammy. Hammy töötab vastavalt teie teema sisu laiusele (erinevalt brauseri akna laiusest) ja võib selle põhjal pakkuda optimeeritud pilte. See on eriti mugav mobiilikasutajatele, kus töötlemise võimsus ja ribalaius võivad olla probleemiks.

Edasine pildi optimeerimine

Nagu sissejuhatuses mainisin, on piltide optimeerimiseks lugematuid viise. Alates spritidest kujutise kokkusurumisele saab pilte palju vähendada, et vähendada piltidega kaasnevat laadimisaega. Ashutosh KS on kirjutanud suurepärase artikli, mis tutvustab 9 WordPressi pluginaid, et parandada pildi jõudlust.!

Samuti soovitan vaadata pilkvaba vastupanuvõimelisi pilte, mis näitab, kuidas lisada pildielemendile toetust, mida soovite kasutada, kui soovite oma koodi kirjutada.