5 Methods To Serve True Responsive Images

1. Adaptive Image

Adaptive Image is a small PHP script that detects user screen size and deliver the proper image for that screen size. It does not require the changing of your current <img> markup, but the implementation is rather intimidating for less tech-savvy users.

Responsive images - Adaptive Image

Responsive images – Adaptive Image

2. Responsive Image Using Cookies

Keith Clark has his approach on serving responsive image with Cookies. It technically detects the screensize by using JavaScript and sizes the proper image size using PHP before it is served and loaded on the page.

However, this technique has a lot of issues and require some more experimenting before it can become a practical solution. You can read his explanation as well as get the code from the article at Clark’s blog, Responsive Image Using Cookies.

3. Sencha.io Src

Sencha is a mobile development framework that allows us to build a native-looking app with HTML, CSS and JavaScript. If you build your app with Sencha, you can utilize its API, Sencha.io Src, for resizing your images in a smart way, based on users device screen size.

The API has a set of functions allowing flexibility over the output. For more technical details, head over to this reference.

Responsive images

Responsive images

4. HTML5 Picture Element

This seems to be the future standard of responsive image. A new element called <picture> is proposed to allow us to set different sources of images, and also to refer to the breakpoint for which the source of image should be served, like so:

This element, however, is still in a Working Draft stage. It is not yet applicable. Until then you can use a Polyfill called Picture Fill.

5. Picture Fill

Picture Fill is a tiny JavaScript library that is developed by Scott Jehl. It mimics how <picture> works using the <span> element.

 

 

 

5 Methods To Serve True Responsive Imageshttps://i2.wp.com/plexusworld.com/wp-content/uploads/AdaptiveImage.jpg?fit=960%2C416https://i2.wp.com/plexusworld.com/wp-content/uploads/AdaptiveImage.jpg?resize=150%2C150 angelsujimeena Computers & Internet,,,,,
1. Adaptive Image Adaptive Image is a small PHP script that detects user screen size and deliver the proper image for that screen size. It does not require the changing of your current <img> markup, but the implementation is rather intimidating for less tech-savvy users. 2. Responsive Image Using Cookies Keith Clark has...
<h3>1. Adaptive Image</h3> <a href="http://adaptive-images.com/" target="_blank" rel="external">Adaptive Image</a> is a small PHP script that <strong>detects user screen size and deliver the proper image for that screen size</strong>. It does not require the changing of your current <code><img></code> markup, but the implementation is rather intimidating for less tech-savvy users. <h3>2. Responsive Image Using Cookies</h3> Keith Clark has his approach on serving responsive image with Cookies. It technically <strong>detects the screensize by using JavaScript </strong>and <strong>sizes the proper image size using PHP</strong> before it is served and loaded on the page. However, this technique has a lot of issues and require some more experimenting before it can become a practical solution. You can read his explanation as well as get the code from the article at Clark’s blog, <a href="http://blog.keithclark.co.uk/responsive-images-using-cookies/" target="_blank" rel="external">Responsive Image Using Cookies</a>. <h3>3. Sencha.io Src</h3> <a href="http://www.sencha.com/" target="_blank" rel="external">Sencha</a> is a mobile development framework that allows us to build a native-looking app with HTML, CSS and JavaScript. If you <strong>build your app with Sencha, </strong>you can <strong>utilize its API, Sencha.io Src, for resizing your images</strong> in a smart way, based on users device screen size. The API has a set of functions allowing <strong>flexibility over the output</strong>. For more technical details, head over to <a href="http://www.sencha.com/learn/how-to-use-src-sencha-io/" target="_blank" rel="external">this reference</a>. <h3>4. HTML5 Picture Element</h3> This seems to be the future standard of responsive image. <a href="http://www.w3.org/TR/html-picture-element/" target="_blank" rel="external">A new element called <picture></a> is proposed to allow us to set different sources of images, and also to refer to the breakpoint for which the source of image should be served, like so: This element, however, is still in a Working Draft stage. It is not yet applicable. Until then you can use a <a href="http://www.hongkiat.com/blog/html5-shiv-polyfills/" target="_blank" rel="external">Polyfill</a> called <strong>Picture Fill</strong>. <h4>5. Picture Fill</h4> <a href="https://github.com/scottjehl/picturefill" target="_blank" rel="external">Picture Fill</a> is a tiny JavaScript library that is developed by <strong>Scott Jehl</strong>. It mimics how <code><picture></code> works using the <code><span></code> element.      

This site uses Akismet to reduce spam. Learn how your comment data is processed.