Produ srcset și sizes pentru o imagine

Dezvoltatorii front-end apelează la el când o imagine trebuie să rămână clară pe mai multe ecrane fără a descărca fișierul maxim.

Produ srcset și sizes pentru o imagine. Rezultatul rămâne în browser, gata de verificat și adaptat fără cont sau trimiterea datelor introduse.

Cum se folosește

Introdu numele fișierului imagine, de exemplu photo.jpg.
Tastează lățimea maximă afișată în pixeli.
Rulează generatorul pentru a produce atributele srcset și sizes.
Copiază marcajul generat în elementul tău de imagine.

Exemplu

Un integrator front-end pregătește un banner care trebuie să rămână clar pe telefoane și pe ecrane mari. Introduce photo.jpg și o lățime maximă de 1200 de pixeli, apoi generează atributele. Codul este lipit în șablon pentru ca browserul să poată alege. Pregătește, de asemenea, fișierele imagine la lățimile sugerate de rezultat.

Date de intrare

photo.jpg
1200

Limite și formate

Instrumentul creează marcaj pentru o singură imagine; nu redimensionează fișierele imagine.
Variantele imaginii trebuie să existe la lățimile sugerate în rezultat.
Alegerea finală depinde, de asemenea, de browser și de densitatea ecranului.
Verifică căile și numele fișierelor înainte de a publica marcajul.
Codul generat nu înlocuiește verificările vizuale pe mai multe dispozitive.

Unde are loc procesarea

Detaliile pe care le tastezi sunt procesate în browserul tău pentru a construi marcajul responsive. Niciun fișier imagine nu este încărcat și nicio informație nu este trimisă în afara. Poți copia rezultatul imediat ce apare.

Întrebări frecvente

Acest instrument redimensionează imaginea mea?

Nu, nu modifică fișierul imagine în sine. Generează doar atributele srcset și sizes din numele și lățimea pe care le furnizezi. Pregătește versiunile diferite ale imaginii cu un instrument separat de redimensionare.

De ce sunt listate mai multe lățimi?

Browserul alege versiunea care se potrivește cel mai bine ecranului și densității pixelilor. Oferirea mai multor lățimi ajută la evitarea trimiterii unui fișier mare către un dispozitiv mic. Valorile exacte urmează lățimea maximă introdusă.

Pot folosi acest lucru pentru o imagine de fundal CSS?

Atributele srcset și sizes sunt pentru elemente imagine, nu pentru fundaluri CSS. Pentru fundaluri, folosește interogări media sau tehnici CSS adaptive. Potrivește metoda cu modul în care este afișată imaginea.