Setting image quality in HTML5

Small exercise in how to work with high definition images in web pages.

Before we go and look to the images I provide you with a bit of information on the screen and settings fo the browser you are using now:

Fixed width image: img with srcset  

This HTML5 code picks a fixed image. But the resolution might vary based on the settings and capabilities of the screen. This setting is called Device Picture Ratio and here is the outcome for your specific screen and setting:

Specifying density with x

It depends on the sort of screen. When the screen has a high definition it will display the image with the 2x indication. So with use an increased resolution of the image to create a higher density. The image is displayed at half the pixel size.

So in this example of 2x times the default the browser will choose the 1000 px image and display it with width 500px.

The image below works with the settings of your browser and will display the width of the image it selected:

Markup

<img srcset="
 4000-pixels.jpg 4x,
 2000-pixels.jpg 3x,
 1000-pixels.jpg 2x,
 500-pixels.jpg 1x "
 src="default.jpg" >

Specifying width w

The other way to inform the browser about the different sizes is to actually specify the image width in pixels with 'sizes'. From this value the browse calculates the prefered source image.

Markup

<img srcset="
 4000-pixels.jpg 4000w,
 2000-pixels.jpg 2000w,
 1000-pixels.jpg 1000w,
 500-pixels.jpg 500w" 
 src=default.jpg
 sizes = 500px>
Fluid image
Picture and source with media for fluid designsWith 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

More information

What Img Srcset Does In HTML5: A Quick & Simple Guide »
Defines multiple sizes of the same image, allowing the browser to select the appropriate image source.
A Guide to the Responsive Images Syntax in HTML | CSS-Tricks
This guide is about the HTML syntax for responsive images (and a little bit of CSS for good measure). We’ll go over srcset and , plus a whole bunch of things to consider to help you get the best performance and design control from your images.

Files