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.
When I saw this year’s line-up for An Event Apart in Washington DC, I did a little dance when I realized there’d be a whole talk on ways to better optimize images on the web. Because let’s be honest: it’s not one of the sexier parts of user experience design. It’s not a practice awash with buzzwords. No one’s making t-shirts about it (that I know of).
And before I move on with this quick editorial spiel of mine, we have a free ticket to give away to An Event Apart in Washington DC, coming up on July 10th-12th! Check out details on how to enter to win it, so that you can check out this talk on image optimization. Because you’re totally going to want to now.
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”