Maak srcset en sizes voor een afbeelding

Front-endontwikkelaars zetten het in wanneer één beeld op meerdere schermen scherp moet blijven zonder steeds het grootste bestand te laden.

Maak srcset en sizes voor een afbeelding. Je gegevens blijven lokaal terwijl het resultaat eenvoudig te controleren en hergebruiken is.

Hoe te gebruiken

Voer de bestandsnaam van de afbeelding in, bijvoorbeeld photo.jpg.
Typ de maximaal weergegeven breedte in pixels.
Voer de generator uit om de attributen srcset en sizes te produceren.
Kopieer de gegenereerde markup naar je afbeeldingselement.

Voorbeeld

Een front-endintegrator bereidt een banner voor die scherp moet blijven op telefoons en grote schermen. Hij voert photo.jpg en een maximale breedte van 1200 pixels in en genereert vervolgens de attributen. De code wordt in de template geplakt zodat de browser kan kiezen. Hij bereidt ook de afbeeldingsbestanden voor op de breedtes die de uitvoer voorstelt.

Invoer

photo.jpg
1200

Limieten en formaten

Het hulpmiddel maakt markup voor één afbeelding; het wijzigt de grootte van afbeeldingsbestanden niet.
De afbeeldingsvarianten moeten bestaan op de breedtes die in de uitvoer worden voorgesteld.
De uiteindelijke keuze hangt ook af van de browser en de beeldschermdichtheid.
Controleer bestandspaden en namen voordat je de markup publiceert.
De gegenereerde code vervangt geen visuele controles op meerdere apparaten.

Waar de verwerking gebeurt

De gegevens die je typt, worden in je browser verwerkt om de responsieve markup te maken. Er wordt geen afbeeldingsbestand geüpload en er wordt geen informatie verzonden. Je kunt het resultaat kopiëren zodra het verschijnt.

Veelgestelde vragen

Wijzigt dit hulpmiddel de grootte van mijn afbeelding?

Nee, het wijzigt het afbeeldingsbestand zelf niet. Het genereert alleen srcset- en sizes-attributen op basis van de naam en breedte die je opgeeft. Bereid de verschillende afbeeldingsversies voor met een apart hulpmiddel voor groottewijziging.

Waarom worden er meerdere breedtes vermeld?

De browser kiest de versie die het beste past bij het scherm en de pixeldichtheid. Meerdere breedtes aanbieden helpt om te voorkomen dat een groot bestand naar een klein apparaat wordt gestuurd. De exacte waarden volgen de maximale breedte die je hebt ingevoerd.

Kan ik dit voor een CSS-achtergrondafbeelding gebruiken?

De attributen srcset en sizes zijn bedoeld voor afbeeldingselementen, niet voor CSS-achtergronden. Gebruik voor achtergronden media queries of adaptieve CSS-technieken. Kies de methode die past bij hoe de afbeelding wordt weergegeven.