Responsive ‹img› tags

The Problem:

The current HTML spec does not allow for multiple image URLs based on screen size, nessesitating the use of complex Javascript hacks to supply smaller images to mobile devices.

The Solution:

<img src="large-default-file.jpg">
    <source src="smaller.jpg" media="max-width:600px">
    <source src="tiny.jpg" media="max-width:320px">
view raw imgtag.html This Gist brought to you by GitHub.
The Future. 0 to 80 in 1.21 Jiggawatts.

Can you see the image?



This suggested spec change would create a syntactic placeholder for mobile browsers to find mobile versions of image URLs. Inside each ‹img› tag would be a ‹source› tag, containing a "media" and "src" parameter. The "media" parameter would contain the media query string that would trigger the use of the alternate image URL.

Legacy browsers would simply use the default URL provided by the wrapper ‹img› tag. Mobile browsers could look for ‹source› tags contained by ‹img› tags, and validate the media query to determine which URL to use to load the image.

See Results >>

Fork on Github