Fluid image

Picture and source with media for fluid designs

With source you can give a multiple image sources and by using a media query you can load a different image for a fluid range of widths. There are basically two approaches on a scale. At one end you go for the maximum in detail and on the other you go for a minimum of bandwidth and processing.

Maximum image quality

If you want to serve the highest images quality you need to set a low break point for scaling up. This allows for a high density of pixels of the displayed image. Here is an example:

test
<picture>
 <source media=(min-width:1000px) srcset=4000-pixels.jpg>
 <source media=(min-width:500px) srcset=2000-pixels.jpg>
 <source media=(min-width:250px) srcset=1000-pixels.jpg>
 <source media=(min-width:0px) srcset=500-pixels.jpg>
 <img src=default.jpg alt="test" style=width:auto>
</picture>

Minimum bandwith, maximum of speed

If you want to serve fast and don't mind lower image quality you need to set a higher break point for scaling up. Here is an example:

test
<picture>
 <source media=(min-width:4000px) srcset=4000-pixels.jpg>
 <source media=(min-width:2000px) srcset=2000-pixels.jpg>
 <source media=(min-width:1000px) srcset=1000-pixels.jpg>
 <source media=(min-width:0px) srcset=500-pixels.jpg>
 <img src=default.jpg alt="test" style=width:auto>
</picture>
Setting image quality in HTML5
Small exercise in how to work with high definition images in web pages.