Adaptive images load different types of images depending on the client-side adaption. They detect the user's device screen size and automatically create caches and deliver the appropriate type of HTML web page's images. Their basic purpose is to be used with responsive designs and to be combined with fluid image techniques. This is because our website is being viewed not only in smaller devices, but also devices that are slower and have lower bandwidth. So, particularly in these devices, our desktop-based images load slowly, which causes more user bandwidth, increases cost, and rendering of user interface takes time. All these problems are fixed by adaptive images.
Adaptive images follow an identical semantic and structural model for <img>
, <audio>
, or <video>
elements. Moreover, the <source>
element should have the media
attribute that supports CSS3 media queries which add the respective elements rendered on the given device.
For example:
<imgsrc...