Responsive Images

Browser’s pre-loading feature:
When browser loads a web page, it first loads the HTML page and then it look for the image tags. It then downloads the images asynchronously and then it starts to download the CSS and JS. You can check this by inspecting the network when a page is getting rendered on the browser. This feature is provided by browser for fast rendering.

But there is a hidden problem associated with this feature.
So if you have a CSS on an image for ex: if device width is 200px,then download sample.jpg, then this image is downloaded for second time.
This is a serious performance issue.

There are some open source js libraries like Mobify.js,Polyfill.js which are specialized to solve these problems.
Also, there is a group called RICG(Responsive Images Consortium Group)created to define new html elements to make images Responsive.
They have come up with <picture> element where you can provide different image sources based on the size and resolution.

Browsers who understands these tags can intelligently chose the correct image based on the device width and resolution.
Also there are some concepts like Breakpoints, Art direction, Media queries etc related to Responsive images which developers needs to understand before writing a responsive CSS.

Example:

<picture>
<source media=”(min-width: 650px)” srcset=”img_pink_flowers.jpg”>
<source media=”(min-width: 465px)” srcset=”img_white_flower.jpg”>
<img src=”img_orange_flowers.jpg” alt=”Flowers” style=”width:auto;”>
</picture>