When it comes to displaying images on the web, there’s a tight line to walk. Make them too large or too high-resolution, and your website will slow to a crawl. Make them too small or too low-resolution, and you may make your users squint. It’s not the sexiest thing in the world, but a good user experience means a quickly loading website with images that make sense and are clearly discernible.
Why optimize images?
Some images are huge. Huge images take up lots and lots of space on a web page (both byte-wise and space-wise). By ensuring all images are the smallest possible size, web designers ensure that load times are as fast as they can be. Faster load times mean a better user experience. After all, “a snappy user experience beats a glamorous one,” in the words of Jakob Nielsen. And size is only the beginning of the problem.
There may not be a one-size-fits-all approach to what “optimize” truly means, there are a few questions to ask when auditing the use of images on your website:
- Is this image even necessary? Don’t include images if they’re not bolstering the communication or interaction goals of the website.
- Am I using the right format for my images? Sometimes, a well-placed typographical element or CSS effect may get the job done in place of a heftier image.
- Will my images still display properly on various screen resolutions? It’s not always as simple as just saving a smaller file. Be sure to consider all screens, from a pixelly older monitor to a newer 4K display.
There are so many other considerations that come into play when optimizing images—I’ll provide some excellent resources below—but I cannot stress enough the first point: do not include images for the sake of including images. Images, just like words, should be intentional and should play a part in the overall experience and messaging of any website or digital product.
Resources for image optimization
Here are a few excellent resources for user experience designers when considering the optimization of images.
- Google has a fantastic, concise guide in their web fundamentals guide
- “Big Pictures on Small Screens: Remove, Resize or Reorganize,” by Amy Schade on NNGroup.com
- A Better Lemonade Stand has a nice little guide as well, though it may be targeted more at marketers than designers (still relevant!)
- Shopify has a listicle about image optimization, which includes accessibility tips
- “Photos as Web Content,” by Jakob Nielsen (tangentially related and a bit older, but still relevant)
- One of our own authors, Nick Babich, also recently discussed image optimization in his article, “Accessibility for Visual Design”