Responsive och retina images specification

Trädvy Permalänk
Medlem
Registrerad
Aug 2011

Responsive och retina images specification

Nu när RICG äntligen (ett år sen, var det visst) har enats om hur responsive och retina images ska hanteras, och nyaste Wordpress implementerat deras specifikation, försöker jag förstå vad man har kommit fram till. Många har hänvisat till Jason Grigsbys artiklar på : http://blog.cloudfour.com/responsive-images-101-definitions/

Han går metodiskt igenom scenarier och i del 4 avvisar han srcset+display density (@2x, @3x) för att i del 5 förespråka srcset+viewport width (100vw, 33vw, etc ).

Typ:

<img src="cat.jpg" alt="cat" srcset="cat-160.jpg 160w, cat-320.jpg 320w, cat-640.jpg 640w, cat-1280.jpg 1280w" sizes="(max-width: 480px) 100vw, (max-width: 900px) 33vw, 254px">

Jag förstår inte för mitt liv hur den tekniken kan leverera större bilder till högdensitetsskärmar? 33vw på en retina-skärm behöver väl fortfarande motsvarande dubbla storleken för att se snygg ut.

Kan nån förklara för mig vad jag missar? (Han har stängt av kommentarer så jag kan inte fråga honom direkt.)