Image Optimization for Websites

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 CCS 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.

Image optimization at An Event Apart, Washington DC

Speaker and UI engineer Una Kravets will be giving her talk “The Joy of Optimizing Images” at An Event Apart ,and I’m really bummed I will be missing it. So is the rest of the team. Which is what brings us to the free ticket.

As mentioned above, we here at UX Booth have a free ticket to give away for An Event Apart’s Washington DC conference, coming up very soon from July 10 – July 12. We know it’s super short notice, but if you’d like a chance to win this free ticket, send us an email at editors@uxbooth.com and tell us why you’d be the best free-ticket holder ever.

If free tickets aren’t your thing, An Event Apart is also still offering UX Booth readers a $100 discount upon signup. Enter the promo code AEAUXBOOTH while checking out; it’ll chop off $100 off that registration price tag. Visit their registration page to see more details.

And finally, if you’ve got any tips, tricks, or resources that are relevant to image optimization, please do share them!

Tags: