Responsive Images

Responsive web design (RWD) is an approach to web design which makes web pages render well on a variety of devices and window or screen sizes” – Wikipedia
Responsive Images are really very important . When we Use the img tag to provide images to the web pages, which give the site more energy. This tag was useful and really very easy to use. To request the image file It uses the cross-link in the src tag attached to the img.  Some techniques have been added to the alternative conditions where the image does not appear and a default image get displayed.
So I’ll discuss the industry techniques used for the responsiveness of images over the web apps and the latest technique at the end. 
From many years, developers are working on the responsive of the webpage, and also work on improving the img tag. Which is very easy to handle and improve.

Importance of Responsive Web Design (RWD)

  • Responsive web apps design is very important in modern day as this allows our apps to fit on several screen sizes.
  • Images do not automatically fit into different screen sizes without any effort.
  • Responsive images are important because they help us deliver optimal file size, the correct image for the right screen size, improves not only the user experience but improves loading time as well.
  • There should be different versions of your image for creating a responsive image.

The biggest advantage of RWD is, it can fit any technology mean tablet, mobile and computer screen of any size and try to find an attractive view. RWD is flexible and unpredictable

What Is An M-Dot Site?

It is important here before I start that what is an M-Dot Site? Web pages that we open through the web browsers in the cellular devices. Such as those links that contain the letter m followed by a point (we call them m-dot sites)

An m-Dot (mdot, m.) site is a website that’s specifically designed for mobile devices and exists on a separate subdomain.

Image Size Problem

To resolve the image size problem we’ve added the max-width: 100% within a CSS file, the images will appear as appropriate in the user-visible area.

For example, if we have an image file with 500px and we want to display it on a 300px screen. The image will fit into the screen and vice versa. In the small size, the image will be reduced to the right size instead of transferring the image size.

In simple words, high-resolution images on low-resolution screens always cause high cost in the bandwidth

The transfer was used this way even in the early days of using the RWD web design, so it was common to display or hide a whole block of content depending on the size and viewport view, but this practice is going less day by day.

On the other hand, it will always load the image at its original size without knowing the size of the width and height required which is the loss bandwidth.

Early Problems

The proliferation of m-dot sites in 2011 was widely regarded as the best practical solution for displaying websites on mobile devices, but at that stage, the use of responsive design was also a practical solution to display the site on all screen sizes.

Still, there was a problem with a big screen

The technical way to overcome the above problem is to get the screen display using the JavaScript code in the header section of the page, it gets the user screen size and save into cookies, then transfer that information to the server with screen size and there is bit more code on server side to send response back on behalf of screen size of user.

In the start, this method worked well, but then one big problem came.

THE HACKERS, it was quicked hacked by the hackers as they analyzed the behaviour of request and response and get the sensitive data from the response. Therefore developers stop using this method.


Then the idea of ​​prefetching was introduced, to prefetch the data before page load. It was really very faster when the page comes to display and really improves the load time. It approx. get 20 per cent faster than early techniques.

But there was a Road Blocker the request hits the server, which was never requested. So if there is a huge data, then it renders without any user need.

So to overcome this problem a new technique was introduced, dynamically inject base tags, of document.write and eval

But if you think, as a developer it is really very messy, huge code and browser dependent.  

If you note all the solutions which have been introduced are only time passing, not the real solutions.

The main solution to resolve this problem is in HTML5 was found to have potential.

A Native Solution for Responsive Images

W3C is important community for web developers to share their suggestions and build consensus or ideas for web development.

Bruce Lawson presented a proposal to update the way Responsive Images are presented to fit with the media . That has become rich and diverse in HTML5 and has proposed a format much like the video tag so that it borrowed media from it.

The new tag was proposed for the description of images in a picture.

tag as follows:

  <source ...>
  <img src = "source.jpg" alt = "...">
  </ picture>

It provides us with strong backup support with the presence of img tang inside the picture tag.

Now we don’t need to write any extra code to build all the features of img. And then send a request to the server for different sizes according to the user screen.

Web Browsers that never understand the  picture tag and its source elements would ignore it but still render the inner img

Browsers that did understand the picture a tag can use criteria attached to source elements to tell the inner img which source file to request.