srcset en sizes voor responsive images

[posttoast]

Al een tijdje worstel ik, ongetwijfeld net als andere frontend ontwikkelaars, met een écht goede oplossing voor responsive images. Uiteindelijk denk ik, voor nu, een goede oplossing te hebben gevonden maar er blijft iets knagen. Ik ben daarom benieuwd naar jullie mening.

De oplossing die ik nu inzet is deze: Srcset & sizes. Het gaat uit van de nieuwe spec van srcset en is op het oog erg interessant. De werking in het kort:

HTML:

    <img srcset="large.jpg 1400w, medium.jpg 700w, small.jpg 400w"
         sizes="(min-width: 700px) 700px, 100vw"
         alt="A woman reading">

Wat dit doet: je geeft de browser 3 afbeeldingen in de sourceset mee, en geeft per afbeelding aan wat de breedte ervan is. In het sizes attribuut geef je middels media queries aan hoe de afbeelding zich dient gedragen. In dit geval: bij een minimale viewport breedte van 700px, toon de afbeelding als 700px. In alle andere gevallen, toon de afbeelding op 100% van de viewport breedte. De browser kiest uit de srcset vervolgens zelf het relevante bestand (ook rekening houdend met pixel density).

Prima idee. Maar waar ik mee zit, is dat ik dus opmaak in mijn DOM moet gaan stoppen. In dit geval die media query die aangeeft dat het plaatje zich in een kolom van 700px breed bevindt. Dit voelt op de één of andere manier heel vies; je wilt opmaak en content gescheiden houden.

Ik snap dat het niet anders kan: de rendering gebeurt hier op een ander niveau dan de rendering van de CSS, dus je kunt dit (tenzij je trucs gaat uithalen met background images) niet puur in CSS oplossen. Maar ondanks dat ik het snap, voelt het alsof het niet klopt. Het druist in tegen hoe ik vind dat het zou moeten werken. Als ik op een later moment besluit dat de kolom 600px breed is, dan moet ik dat zowel in de CSS als in de HTML gaan aanpassen. Dat is niet echt DRY.

Wat is jullie idee hierover? Wie gebruikt deze methode? En waarom gebruik je het? Of waarom juist niet?

[Ventieldopje]

Waarom kan het niet anders? Met CSS kun je ook de rendering van afbeeldingen beinvloeden (filters en dergelijken) ... dat is juist het hele punt van CSS (en media queries in dit geval).

Imho zou je genoeg moeten hebben aan de srcset en zou de browser zelf al de meest optimale afbeelding moeten laden. Je zou dan in speciale gevallen dit kunnen overriden met CSS maar normaal zou dat niet nodig moeten zijn (anders wordt het nogal een copy pasta verhaal voor elke img).

Maar ook de srcset oplossing vind ik niet echt geweldig. Het zoekt wel de randjes op van HTML vind ik. Ik snap niet waarom ze niet gebruik maken van de nesting structuur die HTML/XML heeft om zo een srcset op te bouwen, dan zit je niet meer met vervelende comma's of CSS in je attributes te pielen. Bovendien kun je dan met simpele DOM manipulaties dingen on-the-fly aan de srcset toevoegen of verwijderen.

[Caelorum]

posttoast schreef op dinsdag 07 juni 2016 @ 16:03:
[...] Wat is jullie idee hierover? Wie gebruikt deze methode? En waarom gebruik je het? Of waarom juist niet?

Wij gebruiken dit op het werk. De srcset wordt gevuld met een tiental urls met de breedte van de afbeelding als vw opgegeven.
Dat ziet er dan ongeveer zo uit:

HTML:

<img style="width: 100%; height: auto ....." src="3840/afbeelding.png" srcset="/320/afbeelding.png 320w, /480/afbeelding.png, .... , /3840/afbeeling.png 3840w" sizes="100vw" ....>

We hebben dus een fallback voor browsers die de srcset niet ondesteunen (dmv. src). Daarnaast zijn de srcset geordend op klein naar groot. We merkten dat sommige browsers soms moeite hadden met bepalen welke afbeelding ze moesten gebruiken en daarom maar de eerste uit de srcset pakken. Wij hebben dan liever dat er een kleine afbeelding wordt gedownload ivm snelheid.
De daadwerkelijke grootte van de afbeelding wordt in CSS bepaalt. De afbeelding die op deze manier wordt ingeladen is altijd "net" groot genoeg. Dat wil zeggen dat er nooit een kleine afbeelding wordt opgerekt, maar altijd een afbeelding wordt gepakt die precies groot genoeg is of de eerstvolgende kleinste afbeelding die groter is dan nodig.

Ohja en dit is in WebForms, dus opmaak en html gescheiden houden is toch al een ramp

Ik vind overigens de syntax ook niet zo geweldig, maar er is prima mee te leven.

[posttoast]

Caelorum schreef op dinsdag 07 juni 2016 @ 17:44:
[...]

Wij gebruiken dit op het werk. De srcset wordt gevuld met een tiental urls met de breedte van de afbeelding als vw opgegeven.
Dat ziet er dan ongeveer zo uit:

HTML:

<img style="width: 100%; height: auto ....." src="3840/afbeelding.png" srcset="/320/afbeelding.png 320w, /480/afbeelding.png, .... , /3840/afbeeling.png 3840w" sizes="100vw" ....>

We hebben dus een fallback voor browsers die de srcset niet ondesteunen (dmv. src). Daarnaast zijn de srcset geordend op klein naar groot. We merkten dat sommige browsers soms moeite hadden met bepalen welke afbeelding ze moesten gebruiken en daarom maar de eerste uit de srcset pakken. Wij hebben dan liever dat er een kleine afbeelding wordt gedownload ivm snelheid.
De daadwerkelijke grootte van de afbeelding wordt in CSS bepaalt. De afbeelding die op deze manier wordt ingeladen is altijd "net" groot genoeg. Dat wil zeggen dat er nooit een kleine afbeelding wordt opgerekt, maar altijd een afbeelding wordt gepakt die precies groot genoeg is of de eerstvolgende kleinste afbeelding die groter is dan nodig.

Ohja en dit is in WebForms, dus opmaak en html gescheiden houden is toch al een ramp

Ik vind overigens de syntax ook niet zo geweldig, maar er is prima mee te leven.

Ik ga nu twijfelen of ik het allemaal wel goed begrepen heb, maar zie ik nu goed dat jij in sizes enkel 100vw gebruikt? Ofwel; je laat de browser er vanuit gaan dat een image altijd op 100% van de viewportgrootte gerenderd moet worden? Stel dat je een plaatje hebt dat nooit breder zal zijn dan 300px, en ik ga met een browser op 2560px breedte (non-retina) jouw site bekijken, dan zal hij dus altijd een heel grote afbeelding inladen, terwijl dat helemaal niet nodig is.

Of mis ik nu iets?

[Caelorum]

Nee, maak maar een voorbeeld en resize de window om chrome. In de inspector kan je ober het element hoveren en zien welke is ingeladen (of je kijkt in de network tab). De browsers zijn over het algemeen slim genoeg om de juiste te kiezen. Voor die enkeling die het niet kan wordt of de kleinste of degene die net zo groot is als de viewport gekozen.

Even een extra voorbeeld: https://jsfiddle.net/r0bgawjy/
Resize dat deel rechtsonder maar in Edge, druk dan op run en maak hem dan groter. Chrome is momenteel een van de browsers die het anders doet en altijd laad op 100vw. (OF Edge doet het anders, maar in dit geval beter IMO).

[ Voor 28% gewijzigd door Caelorum op 08-06-2016 08:02 ]

[Verwijderd]

Het zou inderdaad heerlijk zijn als ze dit in CSS hadden gestopt in plaats van in HTML. Het enige is dus creatief proberen het onderhoud zo eenvoudig mogelijk te houden. Je zou kunnen denken aan gegenereerde inline <style>'s om dit af te vangen.

[mrkoetje]

Waarom niet via img { content: url ('image.jpg') } op de diverse breakpoints? je houd de styling waar deze thuishoort en ik geloof dat inmiddels de meeste recente browsers dit ondersteunen.

[Caelorum]

Het ligt een beetje aan het plaatje, maar heel vaak is het geen styling. Een pijltje wel, maar een foto van een persoon bij een artikel over die persoon is geen styling IMO. Daarnaast is de grootte van de afbeelding die wordt geladen ook geen styling. Hoe groot die wordt weergegeven wel. Dat eerste kan je dmv srcset 'bepalen', dat tweede kan je in css doen.