Ghid pentru începători pentru imagini receptive: Cum să le faci corect

Acest tutorial cu imagini receptive va trece prin tehnici CSS, funcții HTML și unele instrumente pe care veți dori să le luați în considerare. Toate acestea ar trebui să vă ofere o imagine de ansamblu bună despre începerea cu imagini receptive în proiectele dvs. de astăzi.

Cuprins:

• Imagini receptive cu CSS simplu
• Imagini receptive cu atributele srcset și sizes
• Utilizarea srcset cu un descriptor de densitate de pixeli
• Folosind elementul <picture>
• Instrumente și servicii pentru a ajuta cu imagini receptive

Imagini receptive cu CSS simplu

Cel mai simplu mod de a face ca orice imagine dintr-o pagină web să fie receptivă nu necesită interogări media sau HTML suplimentar. Puteți face orice imagine să crească și să se micșoreze în funcție de dimensiunea ferestrei cu câteva linii de HTML și CSS.

În primul rând, HTML-ul meu va include atributele de width și height :

Includerea valorilor de width și height în HTML este cea mai bună practică. Acest lucru asigură că browserul își rezervă spațiul necesar pentru imagine și că nu există o redistribuire ulterioară a paginii pe măsură ce imaginea se încarcă.

Împreună cu asta, voi folosi următorul CSS:

 img { max-width : 100% ; height : auto; }
 Limbajul codului: CSS ( css )

Aceste valori vor suprascrie HTML-ul meu. Proprietatea max-width este setată la 100% pentru a se asigura că umple orice spațiu este necesar, până la maximum 1000px (valoarea din HTML). Valoarea height auto asigură că înălțimea imaginii menține dimensiunile imaginii proporționale cu lățimea și înălțimea sa naturală. Dacă elimin height: auto , imaginea va rămâne la înălțimea definită în HTML, indiferent de lățime – care de obicei nu este ceea ce vreau.

Puteți încerca acest exemplu simplu folosind următorul CodePen. Cel mai bine este să deschideți demonstrația într-o fereastră nouă dacă doriți să testați capacitatea de răspuns.

Și rețineți că în exemplul meu, dimensiunile naturale ale imaginii sunt 2000px x 1333px, dar aleg să o afișez la maximum 1000px.

Teoretic, aș putea face cele de mai sus pentru fiecare imagine de pe pagina mea, iar aceasta ar fi o modalitate rudimentară și acceptabilă de a încorpora imagini receptive în proiectele mele. Dar, în mod ideal, aș dori să duc acest lucru la nivelul următor și să obțin controlul asupra rezoluției imaginii și al altor factori, pentru a îmbunătăți performanța și a ajuta la SEO, despre care voi discuta în secțiunile următoare.

Imagini receptive cu atributele srcset și sizes

În exemplul CSS simplu de mai sus, încarc o imagine cu o dimensiune de aproximativ 1,44 MB – chiar și după ce am folosit compresia fără pierderi pentru a reduce dimensiunea. Acest lucru nu este groaznic în sine atunci când este vizualizat pe un desktop, dar cu siguranță nu este dimensiunea pe care vreau să o încarc pe un dispozitiv mic, cum ar fi un smartphone. Aici sunt utile atributele srcset și sizes .

Atributul srcset vă permite să specificați mai multe dimensiuni de imagine într-o singură valoare. Acestea vor fi imaginile la care browserul sau dispozitivul va avea acces în anumite circumstanțe. Atributul sizes funcționează împreună cu srcset pentru a spune browserului care dintre imagini să aleagă.

Iată un exemplu care utilizează mai multe versiuni ale imaginii leopard.png din exemplul anterior:

 < img srcset = "images/leopard-480.png 480w, images/leopard-800.png 800w, images/leopard.png 2000w" sizes = "(max-width: 600px) 480px, (max-width: 1000px) 800px, 1000px" src = "images/leopard.png" alt = "Leopard on a tree branch" >
 Limbajul codului: HTML, XML ( xml )

Dacă nu ați mai văzut niciodată atributele srcset și sizes , acest lucru ar putea părea confuz la prima vedere. Voi descompune totul astfel încât să fie relativ ușor de înțeles.

Defalcarea atributului srcset

Atributul srcset acceptă o listă de unul sau mai multe șiruri separate prin virgulă. Fiecare șir conține:

• O adresă URL care indică către o imagine
• Unul dintre următorii descriptori opționali (separați printr-un spațiu):
  • Un descriptor de lățime
  • Un descriptor de densitate de pixeli

În exemplul meu, am inclus un descriptor de lățime, care este cel pe care îl veți vedea cel mai des. Am inclus trei versiuni diferite ale imaginii: versiunea mare de înaltă rezoluție, împreună cu una cu lățime de 800 pixeli și alta cu lățime de 480 pixeli.

Observați când am folosit descriptorul de lățime în exemplul de mai sus, sintaxa este valoarea lățimii urmată imediat de un „w” (nu folosiți o valoare unitară „px”!). Pentru fiecare dintre descriptorii de lățime care reprezintă imaginile, folosesc lățimea intrinsecă a imaginii în pixeli. Puteți obține dimensiunea reală a oricărei imagini în oricare dintre mai multe moduri diferite - făcând referire la proprietățile acesteia în sistemul dvs. de fișiere, un editor de fotografii sau chiar în browserul sau instrumentele de dezvoltare ale browserului.

Defalcarea atributului sizes

Atributul sizes funcționează numai împreună cu atributul srcset . Puteți folosi srcset singur (a se vedea secțiunea următoare), dar cel mai comun mod de a folosi srcset este împreună cu sizes .

Atributul sizes acceptă o listă separată prin virgulă de unul sau mai multe șiruri. Fiecare șir conține:

• O condiție media (similară cu interogările media utilizate în CSS)
• O valoare care definește dimensiunea „slot” pe care o va ocupa imaginea

Valoarea slotului poate fi o lungime absolută precum em sau px sau o unitate relativă de vizualizare (de exemplu vw ). Observați în exemplul meu că valorile slotului din atributul sizes nu se potrivesc exact cu cei trei descriptori de lățime. Iată din nou codul:

 < img srcset = "images/leopard-480.png 480w, images/leopard-800.png 800w, images/leopard.png 2000w" sizes = "(max-width: 600px) 480px, (max-width: 1000px) 800px, 1000px" src = "images/leopard.png" alt = "Leopard on a tree branch" >
 Limbajul codului: HTML, XML ( xml )

Faptul că valorile slotului nu se potrivesc exact cu descriptorii de lățime este în regulă. În cazul meu, pot descompune valoarea sizes astfel:

• O fereastră de vizualizare lată de 600 px va încărca imaginea de 480 W din valoarea srcset într-un slot care are 480 px în lățime.
• O fereastră de vizualizare lată de 1000 px va încărca imaginea de 800 W într-un slot de 800 px.
• Imaginea implicită de dimensiune completă (2000w) va umple un slot de 1000px dacă nu sunt îndeplinite condițiile media anterioare.

Ultimul șir este doar o valoare de slot, fără condiție media. După cum am menționat, acest lucru asigură că browserul va avea ceva de afișat dacă nu este îndeplinită niciuna dintre condițiile media, funcționând implicit.

Puteți vizualiza exemplul de cod în acțiune folosind demonstrația CodePen de mai jos. Rețineți că, în acest caz, va trebui să testați pe ceva care imită diferite dispozitive (cum ar fi DevTools din Chrome). De asemenea, puteți deschide pagina folosind o varietate de dispozitive reale pentru a face un test adevărat. Pentru comoditate, am inclus o suprapunere de text pe fiecare dintre imagini, astfel încât să puteți vedea care se încarcă atunci când vizualizați pagina.

Observați că după încărcarea imaginii originale, imaginea nu își schimbă dimensiunea atunci când modificați dimensiunea ferestrei de vizualizare. srcset și sizes sunt utile pentru încărcarea imaginilor în funcție de condițiile media la prima încărcare, dar nu vor ajuta la comutarea imaginilor pe baza redimensionării ecranului. Mai târziu, vă voi arăta o altă funcție de imagini receptive care va rezolva această problemă.

Utilizarea srcset cu un descriptor de densitate de pixeli

Mai devreme, am menționat că atributul srcset poate fi utilizat cu un descriptor de densitate de pixeli. Acest descriptor permite browserului să decidă ce imagine să folosească în funcție de capabilitățile de rezoluție ale dispozitivului. Iată cum arată:

 < img srcset = "images/leopard-480.png, images/leopard-800.png 1.5x, images/leopard.png 2x" src = "images/leopard-480.png" alt = "Leopard on a tree branch" >
 Limbajul codului: HTML, XML ( xml )

Observați câteva lucruri aici. În primul rând, pentru atributul obișnuit src , folosesc cea mai mică imagine, asigurând o abordare pe mobil. În continuare, atributul srcset include alte câteva versiuni ale imaginii, cu rezoluția indicată de descriptorii 1,5x și 2x. Imaginea 480 nu include un descriptor deoarece 1x este implicit. În cele din urmă, observați că nu este prezent un atribut de sizes , de care nu am nevoie în acest caz. MDN explică modul în care browserul alege imaginea:

Pentru a înțelege cum funcționează descriptorii, amintiți-vă că un pixel al dispozitivului reprezintă fiecare pixel CSS. Deci 1x ar fi un raport de 1:1, 1,5x ar fi un raport de 1,5:1 și așa mai departe. Îl puteți încerca în CodePen de mai jos, dar va trebui să utilizați diferite dispozitive (sau să utilizați un instrument care le imită) pentru a vedea diferența.

Folosind elementul <picture>

Până acum, caracteristicile pe care le-am discutat pentru încorporarea imaginilor receptive presupun că afișez întotdeauna aceeași imagine, dar la dimensiuni și rezoluții diferite. Și deși folosesc CSS în toate exemplele pentru a schimba lățimea imaginilor atunci când utilizatorul redimensionează browserul, imaginea în sine nu se schimbă niciodată odată ce pagina este încărcată.

Elementul <picture> este o caracteristică HTML care vă permite să oferiți versiuni alternative ale unei imagini bazate pe prezența unor caracteristici media specifice. Acest lucru permite, de asemenea, să comute imaginile atunci când utilizatorul redimensionează fereastra de vizualizare și, în esență, vă permite să faceți direcția artistică cu imaginile dvs., arătând varietăți ale aceleiași scene, dar decupate sau mărite diferit în funcție de dimensiunea dispozitivului.

De exemplu, o fotografie largă cu un obiect mic în mijloc ar fi potrivită pentru un dispozitiv mai mare de pe un desktop sau tabletă, dar un dispozitiv mai mic, cum ar fi un telefon inteligent, ar putea încărca aceeași imagine decupată sau mărită.

Iată un exemplu de cod care îmi va permite să fac o direcție artistică pe imaginea mea:

Observați următoarele despre cod:

• Elementul <picture> acceptă mai multe elemente <picture> imbricate ca copii
• Fiecare dintre elementele <source> din interiorul <picture> folosește atributul media pentru a defini condiția media care declanșează utilizarea acelei imagini sursă
• Elementul <picture> acceptă standardul <img> element ca copil, pe care browserul îl recunoaște ca alternativă dacă nu acceptă <picture>
• Nu există atribute direct pe elementul <picture> ( <picture> acceptă numai atributele globale ale HTML și nu are atribute proprii)

CodePen-ul de mai jos demonstrează acest lucru:

Dacă deschideți demonstrația într-o fereastră nouă, puteți redimensiona fereastra pentru a vedea schimbarea imaginii. Observați cum subiectul imaginii devine mai mărit pe măsură ce fereastra browserului devine mai mică. Aceasta este o modalitate ușoară de a realiza imagini receptive, orientate către artă, care arată adecvat pe orice dispozitiv utilizat. Desigur, acest lucru necesită puțin mai multă muncă, dar merită dacă doriți ca imaginile dvs. să aibă sens pe orice dispozitiv utilizat.

Instrumente și servicii pentru a ajuta cu imagini receptive

Există nenumărate instrumente disponibile, atât gratuite, cât și comerciale, care vă vor ajuta la implementarea imaginilor receptive. Și unele dintre acestea vă vor ajuta să evitați chiar și să fiți nevoit să scrieți o mare parte din codul despre care am discutat. Iată câteva pe care le puteți găsi utile:

Important și convenabil, o serie de servicii diferite pot face imagini receptive automat, oferind funcții precum diferite dimensiuni de imagine, un API pentru generarea de imagini din mers și multe altele.

Chiar și WordPress în sine vine cu suport încorporat pentru imagini receptive (începând cu versiunea 4.4).

Un alt instrument/serviciu care merită analizat este Optimole. Este un instrument avansat de optimizare și livrare a imaginii, creat de echipa din spatele Themeisle. Acesta nu numai că va reduce dimensiunea discului imaginilor dvs. fără a avea de suferit calitatea vizuală, dar se va ocupa și de livrarea imaginilor vizitatorilor site-ului dvs. printr-un CDN de imagine. Unul dintre aspectele acestei caracteristici de livrare a imaginilor este că imaginile dvs. vor fi, de asemenea, optimizate pentru vizualizare pe diferite dispozitive.

Există o versiune gratuită de Optimole disponibilă. Permite până la 5.000 de vizite lunare pe site și vă va oferi toate funcțiile de scalare automată, CDN și multe altele.

Care este experiența ta cu imaginile responsive pe site-uri web? Anunțați-ne în comentariile de mai jos.

Aspect și prezentare de Chris Fitzgerald și Karol K.