Un ghid pentru începători pentru imagini receptive în HTML

O imagine receptivă este o imagine care se adaptează la diferite caracteristici ale dispozitivului. Când sunt făcute corect, imaginile receptive pot îmbunătăți performanța și experiența utilizatorului unui site.

Acest articol explorează modul în care puteți crea imagini receptive în HTML folosind srcset și elementul de imagine.

De ce ar trebui să folosiți imagini responsive?

Când inginerii de software creau web, nu s-au gândit la modul în care browserele vor gestiona imaginile receptive. La urma urmei, utilizatorii accesau web doar de pe desktop-uri sau laptopuri. Desigur, asta nu este adevărat astăzi.

Conform Statista, peste 90 la sută din populația globală de internet se accesează online folosind telefonul mobil. Majoritatea paginilor web de pe internet conțin imagini, iar aceste imagini sunt una dintre valorile folosite pentru a măsura performanța web. Pentru a îmbunătăți performanța, trebuie să vă optimizați imaginile făcându-le receptive.

Cum se creează imagini receptive în HTML

Puteți aborda imaginile receptive din două unghiuri — fie difuzând aceeași imagine cu dimensiuni diferite, fie difuzând imagini diferite în funcție de caracteristicile afișajului. Ai putea folosi sau. Aceste două opțiuni tratează imaginile receptive în mod diferit, dar toate afișează o imagine din alternativele date, în funcție de regulile stabilite.

Legate de: Cum să vă faceți site-ul web receptiv și interactiv cu CSS și JavaScript

Folosind srcset

Standardul HTML vă permite să specificați doar un fișier imagine. Dacă doriți să afișați o imagine diferită în funcție de dimensiunea dispozitivului, atunci ar trebui să utilizați srcset.

Sintaxă:

srcset vă permite să furnizați fișiere sursă suplimentare, iar browserul va alege imaginea care pare optimă pentru acea dimensiune a imaginii.

 src="cute-cat.jpg"
 alt="O pisică drăguță">

srcset este format din trei părți: numele fișierului imagine care specifică calea către imaginea sursă, un spațiu și lățimea intrinsecă sau reală a imaginii.

Folosind srcset With sizes

Problema cu utilizarea srcset este că nu aveți control asupra imaginii pe care browserul va alege să afișeze. Combinând srcset cu dimensiuni rezolvă această problemă. dimensiuni definiți un set de condiții media care sugerează imaginea cu dimensiunea optimă.

Acum puteți rescrie etichetați mai sus, după cum urmează.

sizes="(max-width: 600px) 480px,
 800px"
 src="cute-cat.jpg"
 alt="O pisică drăguță">

dimensiuni este alcătuit dintr-o condiție media, în acest exemplu este (max-width: 600px) care reprezintă fereastra de vizualizare lățimea, spațiul și lățimea slotului (480px) specificând spațiul pe care imaginea îl va umple dacă condiția media este Adevărat.

Legate de: Cum să utilizați interogări media în HTML și CSS pentru a crea site-uri web receptive

Aici, browserul va verifica mai întâi lățimea dispozitivului și o va compara cu starea media. Dacă condiția este adevărată, va verifica lățimea slotului și va încărca o imagine din srcset cu aceeași lățime sau următoarea mai mare.

Rețineți că includeți și dvs src care oferă imaginea să se retragă pe browsere care nu acceptă srcset și dimensiuni.

srcset de asemenea, vă permite să difuzați imagini la rezoluții diferite folosind descriptori x.

 src="cute-cat-low.jpg"
 alt="O pisică drăguță">

În acest exemplu, dacă dispozitivul are o rezoluție de doi pixeli de dispozitiv pe CSS sau mai mult, browserul va încărca imaginea cute-cat-high1.jpg.

Pixeli hardware și software

Problema cu această soluție este că imaginile răspund doar în ceea ce privește densitatea pixelilor dispozitivului. Acesta este raportul dintre pixelii hardware și pixelii software sau CSS. Un pixel hardware este punctul real de lumină de pe ecran, în timp ce pixelul software sau pixelul CSS este o unitate de măsură. Densitatea pixelilor determină rezoluția dispozitivului.

Când redați imagini receptive, nu luați în considerare doar rezoluția; dimensiunea afișajului este de asemenea importantă. În caz contrar, s-ar putea ajunge să încarci în mod inutil imagini mari sau imagini prea pixelate.

 src="cute-cat-low.jpg"
 alt="O pisică drăguță">

Folosind

este un element HTML care include mai multe elemente care conțin diferite fișiere sursă și an element. In timp ce face ca imaginile să răspundă prin difuzarea de dimensiuni diferite ale aceleiași imagini, vă permite să schimbați efectiv imaginea afișată.

Sintaxă:

Luați în considerare o situație în care aveți o imagine mare de peisaj. Imaginea se afișează și arată proporțional pe un desktop, dar se micșorează semnificativ pe mobil, astfel încât elementele din imagine devin minuscule. Imaginea care nu răspunde contribuie la o experiență proastă a utilizatorului. Cu puteți spune browserului dvs. să treacă la o imagine portret de aproape atunci când sunteți pe mobil.

La fel ca în prima abordare, conține un atribut media pe care îl puteți utiliza pentru a furniza condiția media. De exemplu, browserul va afișa „cute-cat-480w.jpg” dacă lățimea ferestrei de vizualizare este de 639 px sau mai puțin. The srcset deține calea fișierului imagine pe care doriți să o afișați și src specifică imaginea implicită.

Legate de: 7 noi funcții CSS pentru a crea un site web receptiv

Rezervare pentru formatul de imagine WebP

Un alt lucru care se descurcă bine oferă o soluție de rezervă pentru formatele moderne de imagine precum WebP. Imaginile WebP au performanțe ridicate, sunt mici și oferă o experiență web rapidă. Prin urmare, puteți decide să le folosiți pe site-urile dvs. O provocare pe care o puteți experimenta este că nu toate browserele acceptă imagini WebP. Cu, nu vă confruntați cu această problemă, deoarece browserul dvs. poate încărca o imagine alternativă dacă nu acceptă WebP.

De ce să creați imagini receptive în HTML și nu în CSS?

CSS oferă opțiuni robuste pentru gestionarea imaginilor receptive. Deci de ce să nu-l folosești? Browserul preîncarcă imagini înainte de a analiza CSS. Deci, înainte ca JavaScript al site-ului dvs. să detecteze lățimea ferestrei de vizualizare pentru a face modificările corespunzătoare imaginilor, imaginile originale au fost deja preîncărcate. Din acest motiv, este mai bine să gestionați imaginile receptive folosind HTML.

Urmărește cea mai bună calitate posibilă a imaginii

Ați văzut cum puteți crea imagini receptive în HTML folosind > și în acest articol. Servirea de imagini receptive implică de obicei luarea în considerare a dimensiunii imaginii și a rezoluției imaginii, deoarece acestea se referă la dimensiunea afișajului. Dacă este făcut greșit, calitatea imaginii poate avea de suferit. Asigurați-vă că alegeți o imagine care oferă o utilizare optimă folosind cele mai puține resurse.

Principii de design web receptiv

Designerii web susțin designul responsive de ani de zile, dar ce este acesta și cum poate produce pagini web superioare?

Citiți în continuare

Despre autor