Using srcset (Source Set) attribute for responsive images

srcset attribute for responsive images in responsive web designOne of the most daunting challenge for web designers and web developers in implementing responsive web design has been using responsive images. The true benefits of responsive web design can only be yielded if responsive images are used since images are a large component of web design. HTML5 makes developing responsive web design easier. To ensure that responsive images are being used using the srcset attribute ensures that the right size image is served for different screen sizes.

Purpose of srcset

Srcset attribute gives the ability to web designers and developers to specify a list of sources for an image and the image is displayed depending on the screen resolution of the user’s device. With srcset attribute you can specify different images for 1x and 2x displays.

An example of srcset attribute is

<img src="photo.png" srcset="photo.png 1x, photo2.png 2x">

The srcset attribute takes a comma separated list of image declaration which contains a URL string followed by image resolution. In the above example the resolution of the images are declared as 1x and 2x. The image resolution of the image is also used to scale the image so that it appears as the right size.

Support for srcset attribute

Support for srcset attribute is there in webkit based browsers. It can be turned on in Firefox and unfortunately Internet Explorer does not support it. More information on support of srcset attribute across browsers can be found on can I user website. Keeping this in mind it is advisable to have a fall back system by providing a src (source) attribute for the images so that browsers which do not support srcset attribute can still display the image.

Using srcset is advisable in today’s day and age as it does make the images responsive thereby improving the browsing experience.

One thought on “Using srcset (Source Set) attribute for responsive images

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s