Skapa srcset och sizes för en bild

Frontendutvecklare tar hjälp av det när en bild ska vara skarp på flera skärmar utan att största filen alltid hämtas.

Skapa srcset och sizes för en bild. Dina uppgifter stannar lokalt medan resultatet är lätt att kontrollera och återanvända.

Så använder du

Ange bildfilens namn, till exempel photo.jpg.
Skriv den maximala visade bredden i pixlar.
Kör generatorn för att skapa attributen srcset och sizes.
Kopiera den genererade markeringen till ditt bildelement.

Exempel

En frontendintegratör förbereder en banner som måste vara skarp på telefoner och stora skärmar. De anger photo.jpg och en maximal bredd på 1200 pixlar och genererar sedan attributen. Koden klistras in i mallen så att webbläsaren kan välja. De förbereder också bildfilerna i de bredder som resultatet föreslår.

Indata

photo.jpg
1200

Gränser och format

Verktyget skapar markering för en bild; det ändrar inte storleken på bildfiler.
Bildvarianterna måste finnas i de bredder som föreslås i resultatet.
Det slutliga valet beror också på webbläsaren och skärmens densitet.
Kontrollera filsökvägar och namn innan du publicerar markeringen.
Den genererade koden ersätter inte visuella kontroller på flera enheter.

Var bearbetningen sker

Uppgifterna du skriver in bearbetas i din webbläsare för att bygga den responsiva markeringen. Ingen bildfil laddas upp och ingen information skickas iväg. Du kan kopiera resultatet så snart det visas.

Vanliga frågor

Ändrar det här verktyget storleken på min bild?

Nej, det ändrar inte själva bildfilen. Det genererar bara attributen srcset och sizes från namnet och bredden du anger. Förbered de olika bildversionerna med ett separat storleksändringsverktyg.

Varför listas flera bredder?

Webbläsaren väljer den version som bäst passar skärmen och pixeldensiteten. Att erbjuda flera bredder hjälper till att undvika att skicka en stor fil till en liten enhet. De exakta värdena följer den maximala bredd du angav.

Kan jag använda detta för en CSS-bakgrundsbild?

Attributen srcset och sizes är för bildelement, inte CSS-bakgrunder. Använd mediefrågor eller adaptiva CSS-tekniker för bakgrunder. Matcha metoden med hur bilden visas.

Måste bildfilerna redan finnas i de bredder som visas?

Ja. Verktyget skapar bara markup för en bild och ändrar inte själva bildfilen. De bildvarianter som anges i resultatet måste finnas på de bredder som föreslås, annars kan webbläsaren inte hämta rätt fil. Kontrollera filnamn och sökvägar innan du publicerar koden. Gör också visuella kontroller på flera enheter.

Skickas mina bilduppgifter någonstans när koden skapas?

Nej. Uppgifterna du skriver in behandlas i webbläsaren för att bygga den responsiva markeringen. Ingen bildfil laddas upp och ingen information skickas iväg. Du kan kopiera resultatet så snart det visas. Verktyget skapar markup för en bild i taget, så upprepa processen om du har flera bilder.