As the web became a more mobile-friendly environment, developers produced various ways to deal with images. Due to data limitations and loading on mobile devices, inserting an image at its original resolution became unacceptable. When a user loaded a website that was not mobile-optimized, images had the potential to be several megabytes in size. This effectively ate through the meager and over-priced amount of data provided by our overlord ISP’s. Along with this, a large image caused a major time delay in loading the page.
For example, SpaceX’s website is not mobile-friendly and has three large images embedded within a slider. After testing the homepage within Chrome’s Developer tools, one image alone took 10.98 seconds to load on a 3G connection. The second image took 9.37 seconds and the third 9.12. These three images were between 465kb and 678kb.
As this became more of an issue, new and innovative solutions started becoming available:
After a few days of researching responsive image techniques, I’ve come to the conclusion that Picturefill 2.0 is currently the best solution for responsive images. I based this on several ideas:
- It seems to be one of the few (potentially the only) technique that has been updated in the past two years.
- While researching, Picturefill was consistently referenced as the more efficient technique.
- It’s simple to implement.
I put together an extremely basic example of picturefill on my school domain. In this example, I took one of the images from the SpaceX example and made images at different resolutions. There are four different images: one at 1920px, 960px, 480px, and 380px. As the viewport changes, the browser will load the image that corresponds with the associated width. When tested at a width of 400px, the browser loaded the smallest image I created (360×168 — 10.6kb) in 1.697ms.
I tried HiSRC, but had no luck. It seemed to only want to load one image, no matter the viewport size. Foresight.js is now outdated — the repo says to use the picture element polyfill instead. I saw a third-party service, Sencha.IO recommended several times, but it seems to be nonexistent anymore. However, there are other third-party solutions around (ReSRC.it, responsive.io), but they charge per image and have a cap on size. Through my research, most of the techniques that I saw recommended had not been updated in the last two years — save Picturefill.
picture element becomes more widely adopted, I’d continue to use Picturefill 2.0 with the
srcset attribute. As of this writing, the
picture element is only available as of Chrome 38, Firefox 38, and Opera 27 as well as Chrome for Android, while
srcset is available on those and Safari — where a large number of mobile users exist.