Optimizați-vă imaginile cu dimensiuni prestabilite ale imaginilor [WordPress Tip]

Optimizarea imaginilor pe un site web este o sarcină descurajantă. Puteți alege să utilizați mai puține imagini, imagini comprimate, sprite sau svg; lista continuă. Un loc în care multe site-uri WordPress se blochează este definirea dimensiunilor imaginii, care este a aspectul crucial al optimizării site-urilor grele de conținut.

Dimensiunile imaginilor sunt vitale deoarece imaginile sunt create automat în funcție de dimensiunile date când sunt încărcate imagini. Acest lucru asigură că, chiar dacă aveți o imagine originală de 3000px, nu este niciodată folosită dacă este suficientă o imagine de 600px. În mod ideal, un spațiu lățimea de 600 de pixeli ar trebui să utilizeze o imagine la dimensiunea de 600 de pixeli, în loc să scadă o dimensiune mai mare.

În acest articol vă voi trece ce dimensiuni de imagine sunt și cum să le definiți.

Cum WordPress se ocupă de imagini

Dacă ați introdus vreodată o imagine într-un articol WordPress ar fi trebuit să veniți de selectorul de dimensiune a imaginii. Acest lucru vă permite să inserați versiuni mici, medii și mari ale imaginilor. Dimensiunile reale pentru acestea pot fi modificate în setările WordPress.

Ori de câte ori încărcați o imagine prin WordPress, aceasta generează versiuni ale acestor imagini și le stochează separat. De exemplu, dacă încărcați o imagine de 1200 × 800, WordPress poate crea versiuni de 100 × 100, 600 × 400 și 900 × 600. Când inserați o imagine și alegeți "mediu" va fi utilizată versiunea medie reală, spre deosebire de o versiune redusă a originalului.

Acest lucru este extrem de benefic pentru că conservă lățimea de bandă pe server și timpul de procesare de pe computerul client. Cred că nu este o surpriză faptul că descărcarea unei imagini de 600 × 400 este mai rapidă decât descărcarea unei imagini de 1200 × 800.

Dacă este utilizată o imagine mai mare, care trebuie redusă, browserul trebuie să aibă grijă de calcule pentru a face acest lucru să se întâmple. În timp ce acest lucru nu va dura ore, poate fi vizibil pe site-uri grele de imagine.

Imaginea corectă în locul potrivit

Scopul final ar trebui să fie utilizați întotdeauna dimensiuni adecvate de imagini. Dacă aveți nevoie de o imagine de 440 × 380, luați o imagine cu acea dimensiune exactă de la server. Există două locuri principale în care veți folosi imaginile încărcate: imagini speciale și imagini in-post - aș sfătui să vă concentrați mai întâi pe imaginile prezentate.

În toate articolele, cu excepția celor mai vizualizate, nu contează dacă o imagine in-post are o lățime de 220px sau 245px. Indiferent de versiunea pe care o aveți la dispoziție, ar fi la fel de utilizabilă. Imaginile recomandate, totuși, sunt de obicei afișate la dimensiuni comune. Pentru listele de articole puteți utiliza o miniatură de 178 × 178, pentru anteturile de articole puteți utiliza o imagine panoramică de 1200 × 600.

În plus, puteți dori să păstrați o miniatură separată / dimensiune medie / mare, așa cum este definită în setări vă oferă acces ușor la dimensiuni specifice când adăugați imagini la postări.

Deci, ceea ce se reduce la toate este la acest lucru: Nu ar fi minunat dacă am avea două dimensiuni suplimentare de imagine pe care am putea folosi pentru imaginile prezentate? Aceste dimensiuni de imagine vor fi create chiar alături de restul când se încarcă o imagine. Vestea bună este că WordPress te-a acoperit cu o funcție destul de simplă.

Crearea dimensiunilor imaginilor

Utilizând add_image_size () funcție puteți defini toate dimensiunile imaginii de care are nevoie site-ul dvs. web. Să formăm cele două exemple menționate mai sus. Plasați codul mai jos în fișierul functions.php al temei sau în fișierul unui plugin.

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

După cum puteți vedea, această funcție are patru parametri. Primul parametru vă permite să setați un nume pentru dimensiune. Al doilea parametru este lățimea maximă, al treilea, înălțimea maximă. Cel de-al patrulea parametru stabilește decuparea. Dacă este setat la true, imaginea va fi creată la dimensiunea exactă pe care o specificați.

Odată ce aceasta a fost adăugată la tema sau plugin-ul dvs., două versiuni noi ale fiecărui fișier pe care îl încărcați vor fi create de WordPress.

Utilizarea dimensiunilor imaginii

Aceste dimensiuni de imagine pot fi utilizate într-o serie de funcții care se ocupă cu recuperarea suporturilor de imprimare. Să ne uităm mai întâi la imaginile prezentate. the_post_thumbnail () este folosit în mod obișnuit pentru a afișa imaginea recomandată a unei postări. Următorul cod poate fi plasat într-o buclă WordPress:

 the_post_thumbnail ('featured_thumbnail'); 

Primul parametru al acestei funcții vă permite să specificați dimensiunea imaginii de utilizat. Deoarece am specificat "featured_thumbnail", va fi utilizată versiunea 178 × 178 a acestui fișier.

Există o serie de alte funcții, cum ar fi wp_get_attachment_image ()și wp_get_attachment_image_src () care utilizează de asemenea parametrul pentru dimensiunea imaginii. Ori de câte ori utilizați o astfel de funcție, trebuie să specificați întotdeauna o dimensiune adecvată a imaginii.

Regenerarea miniaturilor

Dacă aveți deja un site în loc, nu veți putea să vă optimizați articolele retrospectiv, doar prin definirea unei dimensiuni a imaginii. Dimensiunile imaginilor sunt luate în considerare numai când se încarcă o nouă imagine, astfel încât acestea nu sunt aplicate imaginilor deja existente în sistem.

Nu vă temeți, pluginul Regenerate Thumbnails va face lucrurile mai bune! Acest plugin poate regenera miniaturile pentru toate imaginile dvs., ținând cont de toate dimensiunile definite ale imaginilor. Poate deasemenea vizați o imagine specifică, care este util dacă aveți doar câteva sau faceți niște teste.

Odată ce miniaturile dvs. sunt regenerate, ar trebui să vedeți versiunile optimizate încărcate pe site-ul dvs. Puteți verifica acest lucru prin vizualizarea sursei imaginii. Dacă ați încărcat "example.jpeg" și vedeți "example.jpeg" ca sursă pentru imaginea recomandată, ceva nu este corect. Dacă vezi “exemplu-178 × 178.jpeg” atunci totul este bine; este afișată imaginea optimizată.

Imagini receptive

O dificultate în menținerea unui site optimizat este receptivitatea. Când văd un articol pe iPad, o imagine in-post de dimensiune mare va fi redusă, deoarece lățimea maximă va fi de 786 de pixeli.

Cea mai ușoară soluție este să folosiți un plugin ca Hammy. Funcția Hammy se bazează pe lățimea conținutului temei dvs. (spre deosebire de lățimea ferestrei browserului) și poate oferi imagini optimizate în funcție de aceasta. Acest lucru este deosebit de util pentru utilizatorii de telefonie mobilă în care puterea de procesare și lățimea de bandă pot fi o problemă.

Optimizarea suplimentară a imaginilor

După cum am menționat în introducere, există nenumărate moduri de optimizare a imaginilor. De la sprites la compresia imaginilor, multe tehnici pot fi folosite pentru a reduce timpul de încărcare care vin împreună cu imaginile. Ashutosh KS a scris un articol grozav prezentând 9 pluginuri WordPress pentru a îmbunătăți performanța imaginii, vă sugerez să o citiți!

De asemenea, vă sugerez să aruncați o privire la Hassle Free Responsive Images care vă arată cum să adăugați suport pentru elementul de imagine, ceva ce veți dori să îl utilizați dacă doriți să vă scrieți propriul cod.