Cum să redimensionați și să difuzați corect imaginile la scară cu WordPress
Servirea de imagini la scară este una dintre cele mai ignorate modalități de a oferi o performanță mai bună a site-ului. Imaginile dvs. vă țin înapoi site-ul WordPress?
Imaginile ocupă mult spațiu pentru dimensiunea fișierului, mai ales dacă sunt umflate și supradimensionate. De aceea, imaginile ar trebui să fie numărul unu pe lista dvs. de lucruri pe care să le optimizați dacă încercați să îmbunătățiți viteza paginii, conversiile sau vânzările.
În această postare, ne vom concentra asupra modului de servire a imaginilor la scară cu WordPress. Veți afla cum să dimensionați corect imaginile în WordPress în mai multe moduri diferite și cum să vă îmbunătățiți fluxul de lucru de optimizare a imaginii cu Smush Pro.
Ce sunt imaginile scalate?
Imaginile de pe web trebuie să cadă în zona Goldilocks. Nu prea mare, nici prea mic. Trebuie să aibă dreptate. Dacă sunt prea mici și sunt mărite, vor fi neclare.
Pe de altă parte, dacă o imagine este prea mare, browserul o va micșora la dimensiunea potrivită. Acest lucru nu afectează aspectul imaginii, dar se va adăuga la dimensiunea fișierului paginii.
Deoarece nu puteți vedea o schimbare a calității, greutatea suplimentară pe fișierele de imagine devine ușor de trecut cu vederea. Și, deoarece majoritatea oamenilor nu știu că există o problemă, nu o rezolvă. Ei continuă să se bazeze pe browser pentru a servi dimensiunea corectă, pentru că browserul este pentru asta, corect?
Potrivit Google ...
În mod ideal, pagina dvs. nu ar trebui să difuzeze niciodată imagini mai mari decât versiunea redată pe ecranul utilizatorului. Orice lucru mai mare ... rezultă doar octeți irosiți și încetinește timpul de încărcare a paginii.
Oferirea unei imagini prea mari te rănește în mai multe moduri.
- În primul rând, distrage atenția browserului, forțându-l să efectueze cereri suplimentare de server. În loc să livreze o pagină web cât mai repede posibil, trebuie să oprească și să redimensioneze imaginea. Acest lucru necesită timp prietenilor mei, mai ales dacă paginile dvs. web sunt greu de imaginat.
- În al doilea rând, dacă încărcați un selfie full-size direct de pe telefon, dar îl afișați ca un mic Gravatar, atunci pierdeți timp și date descărcând o imagine excesiv de mare.
Introduceți imagini scalate. O imagine scalată este o imagine care a fost dimensionată pentru a se potrivi cu dimensiunile exacte pentru care o utilizați. Spre deosebire de decupare, care poate modifica în cele din urmă proporțiile unei imagini, scalarea păstrează dimensiunile.
Dacă citiți această postare pe un ecran complet, atunci corpul acestei postări are o lățime de 600 px. Întrucât ne preocupăm de optimizare aici la WPMU DEV, când creez imagini pentru postări pe blog, le fac exact 600px lățime. Aceasta este dimensiunea exactă de care am nevoie, astfel încât browserul nu trebuie să facă nicio lucrare suplimentară și astfel nu trebuie să utilizați mai multe date.
Optimizatorii de viteză ai site-ului, cum ar fi Hummingbird, GTmetrix și Google PageSpeed Insights, vor recomanda scalarea imaginilor pentru a îmbunătăți performanța.
Nu ar trebui ca atributele srcset și size să se ocupe de redimensionarea imaginii?
Da și nu. Vrei optimizare de vârf nu? Dacă faceți acest lucru, srcset și dimensiune vă vor ajuta să vă apropiați de dimensiunea ideală a imaginii, dar nu vă va oferi întotdeauna dimensiunea exactă de care aveți nevoie și nu va reduce excesul la cea mai mare dimensiune.
Atributul srcset funcționează furnizând adresa URL pentru imagine și apoi oferind browserului o listă de imagini din care să aleagă la diferite dimensiuni. Acest set de surse pentru acel selfie de telefon mobil pe care l-am menționat mai devreme ar arăta cam așa:
srcset = „selfie-100x100.png 100w, selfie-200x200.png 200w, selfie-400x400.png 400w”
Mai sus, WordPress spune browserului că știți mai multe despre utilizator decât mine, iată imaginea pe care o doriți în 3 dimensiuni diferite, alegeți-o pe cea care va funcționa cel mai bine.
Când browserul trebuie să afișeze un Gravatar de 75 px x 75 px lângă un comentariu, va alege prima opțiune din set și o va redimensiona ușor. Dacă utilizatorul are un dispozitiv retină, va alege a doua opțiune.
Acest lucru reduce anumite deșeuri, dar scalarea vă va permite să obțineți un pic de performanță suplimentară.
Cum se difuzează imagini scalate în WordPress
Pentru a începe, trebuie să cunoașteți dimensiunile imaginilor care vor fi utilizate pe site-ul dvs. Vorbesc despre imagini banner, imagini erou, imagini postate pe blog, Gravatar etc.
Urmăriți tutorialul nostru rapid despre cum să detectați imagini de dimensiuni incorecte în WordPress.
Vrem să știm care este cea mai mare dimensiune la care fiecare imagine va fi afișată vreodată, deoarece știm că totul peste acest prag este inutil.
De exemplu, să presupunem că vreau să folosesc o fotografie a oceanului pe pagina principală a site-ului meu. Imaginea în starea sa nealterată este de 4534px x 3023px.
Nu am făcut nimic pentru a modifica dimensiunea fotografiei ... încă
Pentru o imagine din corpul unei postări de blog, va trebui probabil să difuzați o imagine între 600px-960px lățime și pentru imaginile cu caracteristici erou care se întind pe lățimea ecranului unui computer desktop, vă uitați la ceva în lățimea de 1600px gamă.
Rețineți, de asemenea, că va trebui să dublați aceste dimensiuni pentru a găzdui ecranele retinei. Cea mai mare dimensiune pe care va trebui să o aibă imaginea de 1600 px este de 3200 px.
Pentru a găsi dimensiunea pe care trebuie să o aibă imaginea pentru a se potrivi perfect, vom căuta imaginea pe site și vom deschide instrumentele pentru dezvoltatori ale browserului.
Dacă utilizați Chrome, faceți clic dreapta pe imagine și accesați Inspectați. În Firefox, selectați Inspectare element.
În Chrome, când treceți cu mouse-ul peste adresa URL a imaginii, veți vedea dimensiunea la care este afișată imaginea cu dimensiunea originală a imaginii „naturale” între paranteze. Fișierul de imagine mare este ceea ce vizitatorii dvs. descarcă.