So you have built a responsive web site. Congratulations – all of your mobile web problems are now solved! Well, not so fast. A common complaint is that responsive web sites look great on mobile devices, but the pages and images load slowly. Mobile users expect fast-loading sites and will start to abandon after several seconds. The biggest cause for slow-loading is oversized image payload. Typically, developers choose from 4 options to load images on mobile devices. Steve Kamerman, ScientiaMobile’s COO, outlines these approaches in an interview at Velocity 2016 – a conference focusing on web performance (start at 2:10)
To summarize these approaches:
None of the 3 approaches provide fast-loading pages. A much more elegant solution combines Device Detection, real-time image resizing, and an image-CDN that caches previously resized pictures. With proactive device detection, you recognize the mobile device and all its relevant characteristics (e.g. screen dimensions). Once you have this device intelligence, you can resize your full-size image in real-time and deliver via a CDN. And the next time, you need that image size, it is instantly available in the cache.
We call this solution ImageEngine. It typically yields 60% load-time improvement. And it is easy to implement. Just insert a short prefix to call the ImageEngine service in front of each of your images. Or, if you have WordPress, you can install the ImageEngine Plugin to instantly resize all the images on your site with the need of a prefix.