notch-blue

Are Images Undermining Your UX?

By:
July 14, 2015

You’ve put in the time and budget to develop a strategy. You’ve found the sweet spot that balances user needs with business objectives. You’ve conducted user research to ensure your user experience design is rock solid. You’ve added responsive design and retina support. Yet, users are abandoning your site at record numbers. How is this possible?

Page Speed Trumps All

It makes no difference if you’ve launched the Taj Mahal of websites if it doesn’t load quickly. Nobody will stick around to view it. Indeed, the stakes are that high when it comes to your site’s performance. If users cannot interact with it within 3 seconds, you have lost them.

 

57% abandon a page that takes 3 seconds or more to load

 

Poor performance can be caused by many factors. In this article, we will take a look at what is often the #1 speed-sapping culprit – poorly executed images. We’ll tell you about easy ways you can speed things up and get your users interacting as quickly as possible.

Basics Not Understood

A mind-boggling number of websites continue to use images that load so slowly, they unwittingly undermine the success of the entire site. Incorrectly formatted images and non-optimized images are generally to blame.

Incorrectly formatted images are those that use the wrong file type for that kind of image. For example, a photograph should usually be a JPEG while a logo should almost never be a JPEG.

Non-optimized images are those that have not been “shrunk” or compressed to be web-friendly.

If done incorrectly, either of these blunders could cause your site to load as much as 5-10 times slower.

Image Optimization

For readers unfamiliar with image optimization, it might sound more complicated than it is. The idea is to compress the file size as much as possible, while maintaining a level of image quality acceptable to site visitors.

If compressed too much, images become fuzzy or distorted. If not compressed enough (or at all), images look terrific – but take a long time to load, delaying users from interacting with your site. Compressing a file can be done using Adobe Photoshop, other image editing software, or even through free online services.

In research recently conducted by Radware, a whopping 43% of the top 100 retail sites failed to take the most fundamental step to compress image sizes.   Only 10% receive an “A” grade for image optimization.

What Are Organizations Doing Wrong?

Compressing and reformatting images is the lowest of the proverbial “low hanging fruit” of web performance. It is easy to do and essentially free – so, why are so many organizations skipping this step?

The most logical conclusion is that content creators and developers are unaware of image optimization – or misunderstand it. Site developers and content creators enjoy modern, powerful computers and broadband network speeds, giving them the false impression that bloated image sizes do not impact page speeds.

In reality, of course, users experience your site on countless devices of varying size and speed — and routinely endure slow, congested networks.

Improve Your Process

Organizations that currently overlook image optimization have an opportunity to make radical improvements immediately by making it a part of their everyday web publishing process.

Here are a few steps to improve your web publishing process to avoid bloated images:

  • Educate site owners and content creators on which image formats to use
  • Provide software to encourage image optimization
  • Add page speed tests like webpagetest.org to your quality assurance process
  • Conduct quarterly site audits to identify and correct issues

At Crux Collaborative, image optimization is a fundamental part of our development process – one that includes much more complex steps to support the performance challenges of today’s retina-hungry, mobile users.

In addition, we often work with clients to help them foster a culture that promotes ongoing web publishing success. If you would like to talk about your user experience and web publishing process, get in touch. We’d love to discuss how we could collaborate with you.

By Tony Johnson
Senior Front-end Developer

Tony has spent well over a decade building interactive applications. He collaborates in the full life cycle of projects – bringing a unique blend of technical savvy, creativity and strategic thinking to our user experience consulting services.

View Tony's Bio

notch-white

Let us know your name and email address and we’ll send you our newsletter.


First Name

Last Name

Email Address

 

 

Thank you!