Last Thursday we had the pleasure of hosting a few customers at our European HQ at a Technology Day. In a slight departure from previous events which were industry-aligned, this tech day focused exclusively on Images and the Web.
Although this is a fairly narrow topic for a full day of talks and discussion, the growing size and influence of images on web pages, coupled with the increasingly diverse range of devices and networks over which they are accessed means that there's plenty of opportunity to optimise web performance with the right image strategy.
As Guy Podjarny pointed out in his opening comments, image weight on the average web page has nearly doubled over the past 3 years, with image resource types making up 63% of average page weight. Guy's test that removed images across the top 1000 websites showed a 30% reduction in page load time - and although removing images from web pages would most likely be counter-productive, there's lots that can be done to optimise their delivery. I'll leave you to read Guy's Post on Medium to view his tips on Image Compression, Loading and Operations.
Meanwhile, Michael Gooding drilled into more detail on the Business Impact of Images posing the question: could ineffective image delivery be part of the reason for the far lower conversion rates seen on mobile devices? The combination of device sizes, their network quality and speed, and the varying capabilities of these devices, plus the trend towards Responsive Web Design has made delivering fast images hard. So, key areas to focus on are :
- Image size
- image format
- Image quality
Michael's game of image quality "Higher or Lower" showed how hard it can be to perceive discrete levels of image compression - with most of the audience unable to detect differences in JPEG quality.
Andrew Merrell of NowTV shared some of the particular image challenges when preparing their suite of apps, including the need to pre-prepare images for a variety of audiences, while also correctly attributing sources. Akamai's Image Converter was used to ensure that images could be prepared at the edge, without having to store thousands of varieties of images or force client-side rendering which severely hampers performance.
Tim Kadlec and Yoav Weiss provided greater detail on a couple of areas - with Tim breaking down mobile image processing, and how often the impact of factors other than pure download time can be forgotten. Although infrequently considered, the effects of images on device battery life, memory and CPU/GPU overhead can mean poor web experiences beyond the page load waterfall. For example image decode times on Tim's test page were far greater on an Android device, while the limited storage capacity on mobile devices can result in images being re-requested.
Yoav gave us context on the development of responsive image markup, as well as the challenges involved in meeting the wide variety of problems that delivering the right image to the right device brings. The use of the <picture> element gives the ability to use multiple sources for an image, while srcset and sizes can let the browser choose the best image source. A combination of these elements and attributes can be used to solve resolution, viewport, Device Pixel Ratio (DPR) and art direction problems.
If you are struggling with image workflow, optimisation or delivery then get in touch with me or your account team to see how Akamai can help. Otherwise, keep an eye out for the new "High Performance Images" book from Guy Podjarny, Tim Kadlec, Colin Bendell, Mike McCall, Yoav Weiss and Nick Doyle, which will be published by O'Reilly in the Autumn.
Michael Gooding: The Business of Images // Speaker Deck
Yoav Weiss: Yoav Weiss - Responsive images are here!