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="header.png" width="480" height="240" alt="head" media= "handheld and (max-device-width: 480px)"> <source src= "header.png" type="image/png" media= "screen and (max-device-width: 800px)"> <source src= "header.png" type="image/png" media="screen and (max-device-width: 1600px)"> </img>
Some of the features of adaptive images are as follows:
- It requires no mark-up changes
- It can be easily configured or customized
- It works fine with any CMS or works without CMS too
- It works easily on our existing website
- It follows the mobile-first philosophy which means design for mobile devices is covered first and then the larger screens.
- It is up and running within minutes
The steps to use adaptive images are as follows:
- Add the
.htaccessandadaptive-images.phpfiles to thedocument-rootfolder. - We can download these files from https://github.com/mattwilcox/Adaptive-Images.
- Add JavaScript to the
<head>of the web page. Following is the JavaScript needed to be copied:<script> document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/'; </script>
- For retina displays in Apple devices, we can use the following line:
<script> document.cookie='resolution='+Math.max(screen.width,screen.height)+("devicePixelRatio" in window ? ","+devicePixelRatio : ",1")+'; path=/'; </script> - Add CSS media query values to
$resolutionsin the PHP file.
We can also change the default values by looking in the configuration section at the top of the PHP file (adaptive-images.php). The following points can be customized accordingly:
- We can set breakpoints to match CSS media queries
- We can change the name and location of the
ai-cachefolder - We can change the quality of any generated JPG images saved
- We can set how long the browser should cache images for
- To help keep detail, we can sharpen rescaled images