I HTML 5.1 kommer ett nytt element för att hantera bilder kallat picture.
Det här elementet är i grunden utformat för responsiv design och löser det hela betydligt mer elegant.

Picture är en form av container som i sin tur innehåller flera bildkällor där utvecklare kan specificera vilken bild som ska laddas beroende på pixeltäthet, skärmens storlek, bildformat och andra faktorer. Det är sedan upp till webbläsaren att läsa in lämplig bild.

Så här kan du t.ex. skriva med picture-elementet om du vill:
[code]
<picture>
<source media="(min-width: 45em)" srcset="large.jpg">
<source media="(min-width: 32em)" srcset="med.jpg">
<img src="small.jpg" alt="The president giving an award.">
</picture>
[/code]

Först ut med stöd för detta är Google Chrome från och med version 38.

Detta verkar ju helt klart vara ett mycket smartare sätt att lösa detta på. Skulle du vilja lösa detta utan denna funktion får du helt enkelt göra ett javascript som ändrar bildstorleken beroende på vilken skärm det ska visas på. Det innebär att det är betydligt mer komplicerat och tidsödande än det här picture-elementet.