January 23, 2020
This is the second article in Performance for Designers series. If you’re interested in the first part, read the guide to performant typography.
Images are crucial to establishing a brand, portraying ideas, people and products. It’s hard to imagine the web without them. The importance of visuals cannot be understated, especially in industries such as news reporting, travel or e-commerce. Yet, images continue to be one of the most significant contributors to bad performance and user experience, accounting for 75% page weight. The average page weight is 7MB, 5.2MB of which is images.
Studies reveal that the number of images on a page was the second-highest predictor of conversions:
Converted user sessions had 38% fewer images than the ones that didn’t.
Unoptimised images will have a massive impact on user experience and conversions. In a performance context, images contribute to downloaded page weight and render times, resulting in increased time people will spend waiting to see your, often critical, content.
New metrics are even being introduced to measure when the largest piece of content has loaded (which in many cases will be an image). With the rising importance of user-centric performance measurements, it impossible to ignore the biggest bottlenecks to optimal user experience.
What format we save images in will have a significant impact on their size, quality, scalability and compression options. One of the best image-related performance strategies is selecting the right format.
There are a lot of technical intricacies in image compression and quality control, but we can effectively navigate the selection process without diving in too deep. Here are the most popular formats with their use cases:
|JPEG||Photos and screenshots||No||No|
|PNG||Images with fewer colours (256 colors for PNG-8) or partial transparency(PNG-24)||Yes||No|
|WebM or MPEG-4||Animation and motion||Yes||Yes|
|SVG||Simple geometric shapes or vector illustration||Yes||Yes|
While GIFs are have been popularised for animation purposes, a much more performant way to explore motion is to either animate SVGs or record a video in WebM or MPEG-4. GIFs are incredibly heavyweight (latest example in the wild; 30MB for a single image!), while a video can be hardware accelerated, resulting in smoother playback, better colours and compression.
There are also two new image formats, WebP and JPEG XR that can introduce significant bandwidth savings (25-34% in the case of WEBP) but aren’t supported in all browsers yet, so are best to use with caution and fallbacks (or with the help of image CDNs).
If you’re exporting images yourself, you can experiment with tweaking quality options and stripping unnecessary image metadata to observe the difference in quality and size. Ideally, no matter which image type you use, it will be later on further optimised by an automated process or a drag-and-drop application.
In the age of responsive web design—catering to a wide variety of combinations of devices and screen sizes, another critical performance strategy is serving appropriately-sized images for users’ context.
Shipping images that are too big is widespread (mainly when primarily catering to Apple’s Retina displays versus lower resolution devices), leading to more downloaded megabytes, increased browser parse time, and often, scaled graphics that look blurry.
As designers, there are several decisions we can make in addressing this problem. The first one is determining how imagery is going to behave when the viewport changes:
Another consideration is the pixel density of the device screens. With density varying from 100% to 300%, it’s relatively easy to mishandle. The same imagery might end up looking vastly smaller on high-density screens and larger on low-density screens. To control media and ensure their highest quality, we need to ensure not only appropriate dimensions but also pixel density.
A common solution to the complex issue of handling responsive images that you might explore with your team is image CDNs. Image CDNs can make creative direction in the world of responsiveness and breeze, additionally introducing significant performance gains.
When 53% of mobile users abandon pages that load in over 3 seconds and each second of delay can cost up to 20% in lost revenue, the importance of perceived performance is paramount. A hint that content is indeed loading and will do so without a layout shift becomes invaluable.
One of the ways of improving the perception of speed, specifically in the context of image-heavy sites and applications is to leverage skeleton screens. Coined by Luke Wroblewski, skeleton screens are a visual indicator that content is loading and will eventually appear. They’re implemented through presenting rough wireframe of layout and elements on a page, often with a subtle, relatively fast animation.
Work with your development team to identify which parts of the application are unusually slow, whether because of being image-heavy or data-rich. Design appropriate simplifications of the interface to be used as loading states—choose to hide, delay or partially render interfaces to create an impression of speed. This strategy spans further than imagery and can be leveraged for entire screens that are especially prone to slow loading.
Icons are widely used, even more so in product design. There are numerous Open Source icon frameworks and libraries available free of charge, which popularises icon usage even further.
There are multiple ways to implement icons—two most popularised are icon fonts (where we use a font file, just like we would when setting text, that contains icons as glyphs) and SVGs (scalable vector graphics). Icon fonts are widespread, mostly due to ease of implementation and use, however often they cause both performance and accessibility issues.
Icon fonts are considered as text; therefore, they will be anti-aliased, sometimes leading to losing sharpness. When the icon font fails to load, users are presented with nothing or a cryptic missing character glyph. Lastly, they might cause significant issues for assistive technologies (imagine screen readers pronouncing complete nonsense to try to portray the icon without appropriate descriptors and HTML tags).
The difference between both implementation approaches from a performance standpoint often can be minor and hugely depending on context (number of icons and how they’re implemented in code). However, weighing up accessibility, scalability and being prone to failure, vector icons have a significant advantage.
When creating iconography, consider your context—how many icons will there be and whether their styling and size be adaptable. If implemented correctly, vector iconography is fast, reliable and even more importantly, semantic and accessible.
There are multitudes of ways to handle image optimisation depending on context and level of familiarity with developer tools. Even if coding isn’t your cup of tea, you can still ensure your images are compressed.
If you’re working on smaller projects (for example, a personal site or a simple landing page) it might be sufficient to use drag-and-drop optimisation tools such as ImageOptim (Mac OS), Trimage (Linux) or FileOptimizer (Windows). Since the process of optimisation is manual, this works better for projects that aren’t updated frequently or aren’t large.
If you’re a GitHub user, we’ve built an image action that will automatically compress images on all of your Pull Requests. It’s straightforward to enable, and will take care of a lot of headaches connected to building an automated system.
When thinking about optimisation at scale, at either larger organisations with multiple projects or in applications heavily relying on imagery (for example, Airbnb, Unsplash or any news sites), it’s necessary to implement potentially complex automation scripts or consider image CDNs. These solutions have implications in development scope and often a hefty price tag, but are worth discussing with your team if images are significantly contributing to low performance scores.
While there are numerous strategies to reduce the perceived lag of loading visual assets, at the end of the day, not having as many of them will always be faster.
Even when implementing multiple mitigation approaches, the performance footprint is always there in the form of additional requests, download and render time. The last two will be especially pronounced on slower or unreliable networks.
Unless you’re confident in your performance system and where your performance scores are at, no image is better than another image.
Images are a core part of the experience of the web—an essential part of brand creation and creative expression. It’s entirely possible to work with visuals and maintain speed, but it requires a thoughtful approach and planning. Regular audits, establishing and enforcing guidelines on handling media will be pivotal to both performance metrics and user experience.
In the last article of the series, we’ll cover animation and motion.
Be notified about new product features, releases and performance research.