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.

Author: palimadra

An earthling who is a perpetual learner as I constantly find new stuff to learn. I make websites and help to improve their visibility for professionals and small businesses to ensure that I put the food on the table. Each time I realize that I have been in the industry for 15 years it seems surreal as it feels as if I started about a year back but then I realize I have a 13 year old daughter! Some of the skills I have acquired are HTML5 & CSS3 development Website Development and Design WordPress Development Tumblr Development Bootstrap Framework node.js Jekyll Mentoring some bright and hardworking people is something I have enjoyed in the past. Blogging allows me to share my thoughts with whoever wants to hear (or read). Training is another area which I have dabbled in training (web development, SEO and online marketing) and I plan to take it further. At times I do practice Taekwondo and if I can find a partner play Lawn Tennis. Should you have the desire, feel free to contact me.

1 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: Logo

You are commenting using your 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