Astăzi vom vorbi despre imaginile web responsive, un subiect foarte popular și destul de problematic.

Dacă căutați acest subiect veți găsi nenumărate articole cu tot felul de explicații, cu toate acestea eu nu le voi repeta și vă voi învăța diferit.

Încărcați imaginile corect, creșteți-vă ranking-ul SEO și oferiți o experiență mai bună utilizatorilor site-ului vostru.

Ce sunt imaginile responsive?

Imaginile responsive se vor (ar trebui) ajusta automat la dimensiunea ecranului. Dar… este acesta modul corect de a face lucrurile? Ei bine, da și nu. Dacă căutați pe Google sau vă uitați la framework-uri moderne precum Bootstrap, veți observa că definiția lor pentru „imagini responsive" este un CSS simplu similar cu:

1max-width: 100%;
2height: auto;

Deși acest lucru „funcționează", nu este complet corect. Există mai multe motive, dar cel mai important este dimensiunea imaginii. Nu vorbesc despre „lățimea/înălțimea" imaginii, ci despre dimensiunea reală a imaginii în kiloocteți/megaocteți.

Majoritatea site-urilor web (circa 80% din cele pe care le-am văzut în toți acești ani) folosesc imagini incredibil de mari și pur și simplu le „scalează" în sus și în jos. O astfel de imagine este de obicei de la 1000px până la 4000px și am văzut chiar și 8000px!!! (cât de nebunesc este).

Aceste imagini tind să fie foarte mari, de la 1 MB la 10 și chiar 20 MB. Foarte rar am văzut oameni care își comprimă imaginile când le exportă. Acestea fiind spuse, imaginați-vă când aveți un site web cu multe imagini compus din 5, 10, 20 sau mai multe imagini și un utilizator vă vizitează site-ul pe Mobil. Chiar și pe 5G, sunt o mulțime de date de descărcat doar pentru imagini, fără a menționa restul.

Cum se creează imagini responsive?

Browserele ne ajută cu suportul pentru image source set (srcset). Cu această funcție putem avea efectiv mai multe versiuni ale imaginii în dimensiuni diferite și browserul va alege cea corectă în funcție de dimensiunea ecranului. Asta e responsive!

Cu toate acestea, majoritatea oamenilor nu pot gestiona image source set-urile din mai multe motive, de la „Habar n-am" la „Nu înțeleg" și multe altele.

Pe măsură ce tehnologia a evoluat, acum putem folosi instrumente online și API-uri pentru a crea aceste source set-uri automat. Dar nu atât de repede, crearea lor automată nu înseamnă că puteți pur și simplu copia rezultatul și să vă așteptați să funcționeze corect.

Din toată munca și testele mele, nu există o soluție „universală" și întotdeauna este nevoie de muncă suplimentară.

Alegerea tag-urilor HTML potrivite pentru imagini

Acesta este primul și cel mai important lucru pe care trebuie să-l înțelegeți. Puteți folosi tag-ul tradițional <img /> sau tag-ul modern <picture>.

Fiecare are propriile capcane, dar din experiența mea <picture> câștigă mereu. Acest tag este suportat pe scară largă de browsere, deci nu ar trebui să fie o problemă.

Nu există o modalitate automată de a genera dimensiunile corecte (din câte știu) pentru un site web dinamic. Luați de exemplu binecunoscutul WordPress, acesta va genera dimensiuni eronate în funcție de ce imagine încărcați și unde o plasați.

Folosirea tag-urilor img

Tag-urile img sunt pe majoritatea site-urilor web; pentru imagini responsive tag-urile <img /> sunt combinate cu atributul srcset, dar vă pot spune cu încredere că niciunul dintre ele nu funcționează corect.

Una dintre probleme este că tag-ul <img /> nu funcționează corect pe unele browsere, de exemplu Chrome. Am de fapt o întrebare deschisă pe stackoverflow.com în legătură cu aceasta, fără explicație de ce.

O altă problemă este că obținerea corectă a atributului sizes este dureroasă. Există foarte multe articole cu explicații foarte neclare și incomplete pe care sincer le-am găsit foarte frustrante.

Acestea fiind spuse, nu voi discuta folosirea <img /> pentru imagini responsive pentru că este inutilă (după părerea mea).

Folosirea tag-urilor picture

Tag-urile picture sunt cele mai bune după părerea mea, ne permit să manipulăm și să instruim browserul să încarce imaginea pe care o dorim.

De asemenea, suportă multe alte funcții precum specificarea direcției artistice, formate alternative de imagine și altele. Cu acest set frumos de abilități putem atinge obiectivul nostru.

Nicio problemă totuși, era timpul ca acest browser să moară anul acesta .

Generarea dimensiunilor responsive ale imaginilor

Așa cum am menționat mai sus, putem folosi multe instrumente online pentru a redimensiona și genera imaginile corecte și codul sursă cu doar câteva clicuri.

Vă recomand să folosiți acesta: https://responsivebreakpoints.com/ ca punct de plecare. Instrumentul va redimensiona imaginile și va genera breakpoints pentru a avea imagini responsive.

De exemplu, fotografia cu câinele de pe site-ul lor va avea mai multe imagini redimensionate și codul HTML respectiv:

 1<picture>
 2
 3<source
 4		media="(max-width: 767px)"
 5		sizes="(max-width: 1534px) 100vw, 1534px"
 6		srcset="
 7		dog_ar_1_1,c_fill,g_auto__c_scale,w_200.jpg 200w,
 8		dog_ar_1_1,c_fill,g_auto__c_scale,w_493.jpg 493w,
 9		dog_ar_1_1,c_fill,g_auto__c_scale,w_707.jpg 707w,
10		dog_ar_1_1,c_fill,g_auto__c_scale,w_877.jpg 877w,
11		dog_ar_1_1,c_fill,g_auto__c_scale,w_1032.jpg 1032w,
12		dog_ar_1_1,c_fill,g_auto__c_scale,w_1108.jpg 1108w,
13		dog_ar_1_1,c_fill,g_auto__c_scale,w_1259.jpg 1259w,
14		dog_ar_1_1,c_fill,g_auto__c_scale,w_1353.jpg 1353w,
15		dog_ar_1_1,c_fill,g_auto__c_scale,w_1468.jpg 1468w,
16		dog_ar_1_1,c_fill,g_auto__c_scale,w_1534.jpg 1534w">
17<source
18		media="(min-width: 768px) and (max-width: 991px)"
19		sizes="(max-width: 1983px) 70vw, 1388px"
20		srcset="
21		dog_ar_4_3,c_fill,g_auto__c_scale,w_538.jpg 538w,
22		dog_ar_4_3,c_fill,g_auto__c_scale,w_793.jpg 793w,
23		dog_ar_4_3,c_fill,g_auto__c_scale,w_1004.jpg 1004w,
24		dog_ar_4_3,c_fill,g_auto__c_scale,w_1198.jpg 1198w,
25		dog_ar_4_3,c_fill,g_auto__c_scale,w_1238.jpg 1238w,
26		dog_ar_4_3,c_fill,g_auto__c_scale,w_1384.jpg 1384w,
27		dog_ar_4_3,c_fill,g_auto__c_scale,w_1388.jpg 1388w">
28<source
29		media="(min-width: 992px) and (max-width: 1199px)"
30		sizes="(max-width: 2400px) 60vw, 1440px"
31		srcset="
32		dog_ar_16_9,c_fill,g_auto__c_scale,w_596.jpg 596w,
33		dog_ar_16_9,c_fill,g_auto__c_scale,w_877.jpg 877w,
34		dog_ar_16_9,c_fill,g_auto__c_scale,w_1086.jpg 1086w,
35		dog_ar_16_9,c_fill,g_auto__c_scale,w_1314.jpg 1314w,
36		dog_ar_16_9,c_fill,g_auto__c_scale,w_1440.jpg 1440w">
37<img
38		sizes="(max-width: 7000px) 40vw, 2800px"
39		srcset="
40		dog_c_scale,w_480.jpg 480w,
41		dog_c_scale,w_713.jpg 713w,
42		dog_c_scale,w_1036.jpg 1036w,
43		dog_c_scale,w_1180.jpg 1180w,
44		dog_c_scale,w_1313.jpg 1313w,
45		dog_c_scale,w_1433.jpg 1433w,
46		dog_c_scale,w_1606.jpg 1606w,
47		dog_c_scale,w_1748.jpg 1748w,
48		dog_c_scale,w_1884.jpg 1884w,
49		dog_c_scale,w_2015.jpg 2015w,
50		dog_c_scale,w_2133.jpg 2133w,
51		dog_c_scale,w_2260.jpg 2260w,
52		dog_c_scale,w_2377.jpg 2377w,
53		dog_c_scale,w_2345.jpg 2345w,
54		dog_c_scale,w_1871.jpg 1871w,
55		dog_c_scale,w_2800.jpg 2800w"
56		src="dog_c_scale,w_2800.jpg"
57		alt="">
58</picture>

Observați câte dimensiuni de ecran acoperă pentru noi, tare nu? Dar este suficient de bun pentru a-l copia pe site-ul vostru? NU.

Cea mai mare problemă cu aceste image source set-uri sunt atributele sizes și media. Este destul de complicat de înțeles și și mai complicat de făcut să funcționeze corect.

Acestea fiind spuse, ceea ce trebuie să faceți este să faceți codul mai scurt și mai ușor de înțeles. Pe site-ul meu (cel pe care îl citiți) am folosit breakpoints-urile responsive generale furnizate de Bootstrap și mi-am creat propriile seturi.

Creați dimensiunile responsive ale imaginilor singuri

Cea mai bună (și sincer singura soluție) este să creați tag-urile de imagine singuri.

Aceasta funcționează bine când dezvoltați un site web personalizat de la zero, dar când aveți ceva precum WordPress e altă poveste și va fi un alt articol în legătură cu asta.

Ca punct de plecare, aveam nevoie de un mod clar și simplu de a înțelege breakpoints-urile dispozitivelor; așa că am folosit cele furnizate de Bootstrap care sunt extrem de fiabile:

BreakpointDispozitivDimensiune
X-SmallDispozitive mici (telefoane portret, sub 576px)<576px
SmallDispozitive mici (telefoane peisaj, de la 576px)≥576px
MediumDispozitive medii (tablete, de la 768px)≥768px
LargeDispozitive mari (desktop-uri, de la 992px)≥992px
Extra largeDispozitive mari (desktop-uri mari, de la 1200px)≥1200px
Extra extra largeDispozitive mari (desktop-uri mai mari, de la 1400px)≥1400px

Cu cele de mai sus am creat „propriile" mele image source set-uri care încarcă imaginea potrivită conform dimensiunilor dispozitivului de mai sus:

 1<picture>
 2
 3<source srcset="" media="(min-width: 1400px)">
 4<source srcset="" media="(min-width: 1200px)">
 5<source srcset="" media="(min-width: 992px)">
 6<source srcset="" media="(min-width: 768px)">
 7<source srcset="" media="(min-width: 576px)">
 8<source srcset="" media="(min-width: 320px)">
 9<img src="" width="" height="" class="" alt="" >
10</picture>

Aceasta îmi oferă o viziune clară și o înțelegere a ceea ce ar trebui să se întâmple și cum. Cu alte cuvinte, știu ce imagine ar trebui să se încarce pe fiecare dispozitiv și chiar se va întâmpla.

Deși pare gata de utilizare, nu este chiar gata încă. Încărcarea acestor imagini pe un dispozitiv specific nu este suficient de bună deoarece imaginea ar putea fi încă prea mare.

Exemplu 1:

  • Pe un dispozitiv mare (desktop-uri mari, 1200px și mai sus) containerul dvs. unde încorporați setul de imagini are o dimensiune fixă de 800px
  • Browserul se va uita la viewport-ul dvs. care este de exemplu 1920px, va încărca imaginea de 1400px (când de fapt ați avea nevoie de imaginea de 768px…)

Exemplu 2:

  • Pe orice dispozitiv, containerul dvs. unde încorporați setul de imagini are o dimensiune fixă de 400px (poate fi un card sau o simplă cutie)
  • Browserul se va uita la viewport-ul dvs. care este de exemplu 1920px, va încărca imaginea de 1400px (când de fapt ați avea nevoie de imaginea de 320px…)

Acestea fiind spuse, încărcați imaginea greșită, aceasta vă costă pe dvs. și pe utilizatorul dvs. În primul rând pierdeți viteză (ceea ce afectează și ranking-ul SEO apropo) și apoi utilizatorul dvs. așteaptă la nesfârșit ca imaginea să se încarce dacă este pe mobil sau lățime de bandă lentă.

Soluția corectă este să investigați containerul unde încorporați imaginea și să determinați dimensiunea potrivită.

Puteți face acest lucru foarte ușor inspectând pagina și emulând diferite dispozitive, de obicei containerele rămân mai mult sau mai puțin aceleași.

Deci pentru Exemplul 1 de mai sus, am modificat codul meu astfel:

1<picture>
2
3<source srcset="" media="(min-width: 1200px), (min-width: 1400px), (min-width: 2500px)">
4<source srcset="" media="(min-width: 992px)">
5<source srcset="" media="(min-width: 768px)">
6<source srcset="" media="(min-width: 576px)">
7<source srcset="" media="(min-width: 320px)">
8<img src="" width="" height="" class="" alt="">
9</picture>

Ce înseamnă aceasta? Este destul de evident dar voi explica oricum:

  • Pe un dispozitiv cu lățimea minimă de 320px, încarcă imaginea de 320px
  • Pe un dispozitiv cu lățimea minimă de 576px, încarcă imaginea de 576px
  • Pe un dispozitiv cu lățimea minimă de 768px, încarcă imaginea de 768px
  • Pe un dispozitiv cu lățimea minimă de 992px, încarcă imaginea de 992px
  • Pe un dispozitiv cu lățimea minimă de 1200px SAU 1400px SAU 2500px încarcă imaginea de 1200px

Ultima linie asigură faptul că browserul nu încarcă o imagine mai mare când dimensiunea containerului este doar de 800px (sau 1200px în cazul meu când apăsați expandare articol)

Consider că metoda de mai sus este aproape perfectă în ceea ce privește încărcarea dimensiunii corecte a imaginii. Chiar și Google Pagespeed o apreciază și nu generează avertismente deoarece încărcăm dimensiunea corectă a imaginii.

Testarea imaginilor responsive

Sunt destul de sigur că după ce ați citit cele de mai sus aveți o idee generală despre cum să testați dacă imaginile se încarcă corect, cu toate acestea voi explica.

Procesul de testare poate fi descurajant dacă aveți multe imagini, dar merită efortul.

Ce trebuie să faceți este simplu, doar ia ceva timp:

  • Deschideți browserul dorit și încărcați pagina
  • Deschideți instrumentele pentru dezvoltatori și mergeți la tab-ul Network și selectați doar filtrul „Images"
  • Reîmprospătați pagina pe mai multe dispozitive (mobil, tablete, etc.) și vedeți ce imagini se încarcă

Cam atât, nimic complicat.

Sfaturi și trucuri

  • Dacă aveți multe imagini (mai mult de un header), folosiți atributul loading=lazy. Puteți citi mai multe despre asta aici .
  • Dacă nu puteți exporta/redimensiona imaginile singuri, puteți folosi servicii online. Acestea vor oferi și CDN care vă va încărca imaginile foarte rapid. Vă recomand Cloudflare Images .
  • Denumiți-vă imaginile corect, acest lucru este foarte important. Dacă nu vă denumiți imaginile corect (precum image-small.jpg sau image-320.jpg), nu puteți determina ușor ce imagine se încarcă când testați.

Cam asta e tot, sper că acest articol v-a ajutat.