Optimizuokite vaizdus su iš anksto nustatytais vaizdo dydžiais [WordPress patarimas]

Vaizdo optimizavimas svetainėje yra nelengvas uždavinys. Galite pasirinkti naudoti mažiau vaizdų, suspaustų vaizdų, spritų ar svg; sąrašas tęsiasi. Viena vieta, kur daugelis „WordPress“ svetainių atsiduria, yra apibrėžti vaizdo dydžius, kurie yra a esminis turinio sunkių svetainių optimizavimo aspektas.

Vaizdo dydžiai yra gyvybiškai svarbūs, nes vaizdai automatiškai sukuriami pagal dydžius, pateikiamus įkėlus vaizdus. Tai užtikrina, kad net jei turite 3000px platų originalų vaizdą, jis niekada nebus naudojamas, jei pakanka 600px vaizdo. Idealiu atveju 600 pikselių pločio erdvė turėtų būti naudojama 600px plataus vaizdo, o ne didesnio dydžio.

Šiame straipsnyje aš jus nueisiu kokie yra vaizdo dydžiai ir kaip juos apibrėžti.

Kaip „WordPress“ tvarko vaizdus

Jei kada nors įterpėte paveikslėlį į „WordPress“ straipsnį, turite būti atėję iš vaizdo dydžio selektoriaus. Tai leidžia įterpti mažas, vidutines ir dideles vaizdų versijas. Faktiniai jų dydžiai galima keisti „WordPress“ nustatymuose.

Kai įkeliate vaizdą per „WordPress“, jis sukuria šių vaizdų versijas ir saugo jas atskirai. Pavyzdžiui, jei įkeliate 1200 × 800 vaizdą, „WordPress“ gali sukurti 100 × 100, 600 × 400 ir 900 × 600 versijų. Įdėję vaizdą ir pasirinkę „terpė“, bus naudojama tikroji vidutinė versija, o ne mažesnė originalo versija.

Tai labai naudinga, nes ji išsaugo pralaidumą serveryje ir apdoroja laiką kliento kompiuteryje. Manau, kad nenuostabu, kad 600 × 400 vaizdų atsisiuntimas yra greitesnis nei parsisiųsdinant 1200 × 800 vaizdą.

Jei naudojamas didesnis vaizdas, kurį reikia sumažinti, naršyklė turi pasirūpinti skaičiavimais tai padaryti. Nors tai neužtruks valandų, tai gali būti pastebima sunkių svetainių vaizduose.

Dešinėje vietoje dešinėje

Galutinis tikslas turėtų būti visada naudokite tinkamus vaizdo dydžius. Jei jums reikia 440 × 380 vaizdo, tada iš serverio paimkite tokį tikslaus dydžio vaizdą. Yra dvi pagrindinės vietos, kuriose naudosite įkeltus vaizdus: vaizdinius ir vaizdo įrašus - pirmiausia norėčiau rekomenduoti sutelkti dėmesį į rodomus vaizdus.

Visuose, išskyrus labiausiai vizualiai nukreiptus straipsnius, iš tikrųjų nesvarbu, ar įvestas vaizdas yra 220px arba 245px pločio. Nepriklausomai nuo jūsų turimos versijos būtų vienodai naudinga. Vis dėlto paprastai rodomi įprastiniai vaizdai. Straipsnių sąrašuose galite naudoti 178 × 178 miniatiūrą. Straipsnio antraštėse galite naudoti 1200 × 600 pločio vaizdą.

Be to, galbūt norėsite išlaikyti atskirą miniatiūrą / vidutinį / didelį dydį, kaip nurodyta nustatymuose suteikia jums galimybę lengvai pasiekti konkrečius matmenis pridedant vaizdus į įrašus.

Taigi, ką visa tai lemia: ar tai būtų puiku, jei turėtume du papildomus vaizdo dydžius, kuriuos galėtume naudoti vaizdiniams vaizdams? Šie vaizdų dydžiai bus sukurti kartu su likusiu vaizdu, kai bus įkeltas vaizdas. Geros naujienos yra tai, kad „WordPress“ uždengėte gana paprastą funkciją.

Vaizdo dydžių kūrimas

Naudojant add_image_size () funkcija galite nustatyti visus jūsų svetainės poreikius atitinkančius vaizdo dydžius. Kurkime du pirmiau minėtus pavyzdžius. Įdėkite kodą žemiau temos funkcijose.php arba įskiepio faile.

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

Kaip matote, ši funkcija turi keturis parametrus. Pirmasis parametras leidžia nustatyti dydžio dydį. Antrasis parametras yra didžiausias plotis, trečiasis, didžiausias aukštis. Ketvirtasis parametras nustato kietą apkarpymą. Jei nustatytas ties, vaizdas bus sukurtas tiksliai nurodytu dydžiu.

Kai tai bus pridėta prie jūsų temos ar įskiepio, „WordPress“ sukurs dvi naujas kiekvieno įkeltos rinkmenos versijas.

Vaizdo dydžių naudojimas

Šie vaizdo dydžiai gali būti naudojami įvairiose funkcijose, susijusiose su medijos išgavimu. Pirmiausia pažiūrėkime į vaizdus. the_post_thumbnail () paprastai naudojamas rodyti skelbimo rodomą vaizdą. Šį kodą galima įterpti į „WordPress“ kilpą:

 the_post_thumbnail ('featured_thumbnail'); 

Pirmasis šios funkcijos parametras leidžia nurodyti naudojamo vaizdo dydį. Kadangi aš nurodiau „featured_thumbnail“, bus naudojama šio failo 178 × 178 versija.

Yra daug kitų funkcijų, tokių kaip wp_get_attachment_image ()ir wp_get_attachment_image_src () kuri taip pat naudoja vaizdo dydžio parametrą. Kai naudojate tokią funkciją, visada turėtumėte nurodyti tinkamą vaizdo dydį.

Atstatomos miniatiūros

Jei jau turite svetainę, negalėsite optimizuoti savo straipsnių retrospektyviai, tik apibrėždami vaizdo dydį. Į vaizdų dydžius atsižvelgiama tik įkeliant naują vaizdą, todėl jie nėra taikomi sistemoje jau esantiems vaizdams.

Nebijok, „Regenerate Thumbnails“ įskiepis viską padarys geriau! Šis įskiepis gali atkurti visų vaizdų miniatiūras, atsižvelgiant į visus nustatytus vaizdo dydžius. Jis taip pat gali nukreipti konkretų vaizdą, kuri yra naudinga, jei turite tik keletą, arba darote keletą bandymų.

Kai jūsų miniatiūros bus atkurtos, turėtumėte matyti optimizuotas jūsų svetainėje įkeltas versijas. Galite tai patikrinti peržiūrėdami vaizdo šaltinį. Jei įkėlėte „example.jpeg“ ir matote „example.jpeg“ kaip savo vaizduojamo vaizdo šaltinį, kažkas nėra teisinga. Jei matote “pavyzdys-178 × 178.jpeg” tada viskas gerai; rodomas optimizuotas vaizdas.

Atsakingi vaizdai

Vienas iš sunkumų išlaikant optimizuotą svetainę yra reagavimas. Kai žiūriu iPad straipsnį, didelės apimties vaizdo įrašas bus sumažintas, nes didžiausias plotis bus 786px.

Lengviausias sprendimas yra naudoti „Hammy“ papildinį. „Hammy“ veikia pagal temos turinio plotį (priešingai nei naršyklės lango plotis) ir gali jais remtis optimizuotais vaizdais. Tai ypač naudinga mobiliesiems vartotojams, kur apdorojimo galia ir pralaidumas gali būti problema.

Tolesnis vaizdo optimizavimas

Kaip minėjau įvade, yra daugybė būdų optimizuoti vaizdus. Nuo spritų iki vaizdo suspaudimo galima naudoti daug metodų, kad būtų sumažintas apkrovos laikas, kuris ateina kartu su vaizdais. Ashutosh KS parašė puikų straipsnį, rodantį 9 WordPress įskiepius, kad pagerintų vaizdo našumą, siūlau jį skaityti!

Taip pat siūlau pažvelgti į nemokamus atsakingus vaizdus, ​​kurie parodo, kaip pridėti paramą vaizdo elementui, ką norite naudoti, jei norite parašyti savo kodą.