The Omni Advantage

The Omni Advantage is simple – we provide the services our clients want, nothing more and nothing less. Not every market is the same, not every medical practice, bariatric surgeon, plastic surgeon, otolaryngologist, etc. is the same. Why should online marketing companies only offer you one package without understanding your needs and desires?

Newsletter Signup

Get the latest Medical Marketing News & Tips from Omni Medical Marketing

Enter your e-mail address above and hit enter to be added to our newsletter. We never give out your e-mail address or any other information.
Call us to learn more today(800) 549-0170

Dev Blog

Re-sizing Website Images for Mobile Users With Minimum Bandwidth Usage

Posted by

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?

Adaptive Images

Our chosen solution is Adaptive Images, by Matt Wilcox.

A mostly server-side solution that uses a little JavaScript, the Apache 2 Web Server, PHP 5.x and the GD library. Installation only requires you modify or add an .htaccess file, installation of some PHP files to your website’s root directory, one line of JavaScript on your pages and some configuration of breakpoint variables in the PHP files to match your site’s media queries.

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.

PROS:

  • 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

CONS:

  • 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

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

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 <img> tags.

The <picture> Element

The html5 <picture> element allows developers to skip CSS, JavaScript or solutions like those listed above to achieve fluid image re-sizing using minimum bandwidth no matter the user’s device size. By placing multiple images inside <source> tags with media queries or “hints” within your <picture> tags you can tell your browser which size image to display based on the user’s screen width or other elements using only HTML, no CSS, JavaScript or anything else required.

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.

*Major Mobile Milestones in May: Apps Now Drive Half of All Time Spent on Digital