Re-sizing Website Images for Mobile Users With Minimum Bandwidth Usage
With the advent of smart phones, tablets and other mobile-friendly devices the web is increasingly being viewed at a wide range of varying screen sizes. Whereas 5+ years ago the web was almost solely viewed through desktop computer screens and similarly sized laptops, the web is now increasingly viewed on devices that range from large desktop computer monitors to palm-sized smartphone screens. Recent statistics show that mobile devices make up 60% off all online traffic*.
CSS allows us to tell browsers at what width to display an image for optimal viewing based on the user’s device/screen width. However this does nothing to eliminate the fact that mobile devices will still be loading up a version of the image much larger than is needed and then re-sizing it. Leading to unnecessary bandwidth/data usage and bloat that can hinder many mobile user’s experience on a website.
How can we make sure that images on our sites are optimized and view-able for every visitor to our websites, no matter what device they are using while keeping the amount of data/bandwidth used to a minimum?
That’s all. Now when someone visits your website a session cookie is written that stores the visitor’s screen size in pixel dimension. Adaptive Images then intercepts any request for an image made by the browser and re-sizes the image based on the data of the session cookie to best fit the visitor’s screen width automatically. This newly created image size is cached and stored in an
ai-cache file and displayed in the browser. This is all done server-side, reducing the bandwidth/data required for mobile user’s to view each image. If no cookie is found your sites responsive media queries are used to determine screen width.
This can all be implemented with no custom markup on any of your
img tags. Making this solution extremely beneficial if you use a CMS or want to include it for existing markup as it is entirely non-destructive and requires no markup rewrite or modification.
The PHP file also allows for configuration of options such as image quality, breakpoints, caching a sharpening filter.
- Requires no custom markup
- Works on existing sites
- Mobile-first structure
- Quick and easy installation
- Meant for use with responsive design and fluid image techniques
- May not work with all CMS and website platforms due to the fact that it requires a combination of Apache and PHP
- Works by intercepting image requests, so if your images are hosted elsewhere, like a content delivery service, it won’t work
This is the solution we have chosen and currently implement but there are many others that may be of use for this or different situations.
Some Other Solutions:
Picturefill, by Scott Jehl is a script that doesn’t require jQuery but only the
picturefill.js script be included in your pages. Then include separate versions of an image optimized for different screen widths and differentiate the image versions with
data-media attributes that will act just like CSS media queries.
Picturefill is a tried and true solution. However it is a bit more work as it requires multiple sizes of images and special markup that may interfere with current markup or your CMS.
HiSRC is a jQuery plugin by, Marc Grabanski and Christopher Schmitt that enables you to create three separate version of an image in low, medium and high resolutions that the script will then serve up depending on the Retina-readiness and network speed of the user’s device. The script will always load the lowest resolution version first and then check to see if the user’s device is appropriate for a higher resolution image, and if so it will serve up the highest resolution version appropriate.
Some drawbacks are the fact that the script uses jQuery which may be an issue for some and requires special markup that may interfere with a CMS that does not allow modification to the
The <picture> Element
<source> tags with media queries or “hints” within your
While this solution is the most attractive it has severe limitations at the moment as it is recognized by only a fraction of browsers. So until it receives native implementation across all browsers it is not really a viable option when serving up a large variety of visitors.