The #1 Thing You Can Do to Improve Mobile UX: Image Optimization

Or: So You’ve Got Responsive Design, Now What?

Having a responsive design is the Google-recommended way to deliver content on mobile devices. While other mobile formats are acceptable to Google as well, Google prefers one over the others. The benefits of responsive design are clear, but what happens when responsive web design isn’t good enough? An issue complicating mobile UX for many responsive sites: load time and image heavy sites.

Load Time for Responsive Sites

Photo by (CC by 2.0).
Photo by The U.S. Army  (CC by 2.0).

Web developer Trilibis recently released a survey on the web performance of sites utilizing responsive web design and found that 69 percent of those sites did not have an acceptable load time.

Part of catering to a seamless mobile user experience means that site performance should be up to par; users aren’t very forgiving of sites that are slow to load. Users don’t like it, so they bounce. Google doesn’t like it, so you rank lower. Desktop sites are viewed in this way; why would the expectation not translate to mobile devices, especially considering the narrower bandwidth?

Perhaps we overlooked user experience and took for granted performance on mobile devices. We thought maybe the relatively fast load times on our desktop sites would translate to responsive design. Our site is content-rich and relevant to user queries. So, what gives?

The single-most contributing factor to slow load times on responsive design mobile sites is images, says the Trilibis survey. Big, fat images.

Senior VP of Sales at Trilibis, Ted Verani, asserted that the mobile web “is considerably slower than its wireline counterpart. By serving images and pages that are optimized for mobile devices, we see dramatic improvements in page-load time, which translates to a much better overall user experience.”

It’s easy to forget about images and the effect they have on load times, but if, we as an Internet marketing industry, have forgotten images, we have forgotten our mobile users. We must think of mobile as the lowest common denominator, as the key driver of traffic to our sites.

This isn’t news by any means, but clearly, image optimization is something that’s been overlooked considering 32 percent of the mobile sites surveyed loaded in an abysmal 8-48 seconds with page sizes in excess of 1.7MB. Want to know what the average page sizes were for the top-30 online retailers according to the Keynote Mobile Commerce Performance Index? 420KB, with an average load time of 3.7 seconds.

Optimizing images as a means of decreasing page weight and load times is probably the easiest way to improve site performance, thereby improving mobile user experience by catering to the user’s expectation of delivering here and now.

3-Step SEO Solution to Quick Loading Images

There are three ways to easily optimize images: compression and definition.

First, use a page speed to tool to identify which images are the culprits. I previously wrote about Mobile UX and using Google’s PageSpeed Insights Tool. Using this tool will point you in the direction of which images to optimize.

Next, compress your images. This can consist of anything from choosing a better, less space-intensive, image format, to determining how images are going to load on the page. Either way, chances are, the size of the images on your site need to come down, and there are many methods and tools that can be employed to accomplish such a goal. HTML5Rocks has an exhaustive article on a number of equally valid ideas on image compression. Check it out — your mobile UX depends on it.

Lastly, image dimensions. This is critically important for both desktop and mobile/responsive sites. Not defining your images means the browser must render the image as it loads the other elements of the page. When dimensions are defined, the browser will pre-render the space in accordance with the dimensions.

In other words, there are no hang ups on loading images. Plus, it can act as a poor man’s version of image compression. It is worth noting that images should be defined proportionate to their original dimensions, otherwise the images will be sized correctly, but the contents will look slightly humorous.

It’s clear employing responsive design isn’t enough. We can’t overlook the simplest elements, not even from a general optimization standpoint, image optimization included.

This may not fix all the ills on all responsive web design sites, but it can go a long way in getting you there. Put these simple tips together and you’ve already gone farther than most in addressing site performance issues, and more importantly, how users interact with your site.

I'm Matthew Young, senior SEO specialist at Adobe, which I joined in 2014 after working for Bruce Clay Inc. for three years as an SEO analyst. At Adobe, clients are my business. I work to ensure the highest levels of digital marketing success in all forms and maintain exceptional working relationships with them all. My opinions are my own and not those of Adobe Systems Inc.

See Matthew's author page for links to connect on social media.

Comments (6)
Filed under: SEO — Tags: , ,
Still on the hunt for actionable tips and insights? Each of these recent SEO posts is better than the last!

6 Replies to “The #1 Thing You Can Do to Improve Mobile UX: Image Optimization”

Matthew Young

miketat, I totally agree. It goes without saying that if you aren’t prepared, get prepared, and fast! Mobile search volumes are slated to overtake desktop in about a year (according to the figures I’ve seen) so it’s a mobile-first world now. Kind of strange to think about considering it was the opposite just a few short years ago. Anyway, in my opinion it’s best to hop on the good foot and do the mobile thing – the viability of our businesses depend on it.

Informative post Matt. Responsive sites are very necessary since most of the traffic for any business come from mobile devices. Since it is also saying that mobile searches going to increase more than desktop searches, so it is very important to design your site in this manner that it cover all aspects of SEO. Everyone should keep this thing in mind for growth of business.

Matthew Young

Thanks for the comment, Simon. I think you should compress as many images as possible. Given the number of images the total load time still may be long, but compression could be the difference between a site which loads in 6 seconds as opposed to 9. It’s not where you want to be, ideally, but it’s lot faster than before.

Would compressing all images still work if the number of images appearing on a page were many? Sometimes there are up to 40 images per page and some images take longer to load than others. All images have to be of a certain dimension so that’s not a factor, but I’m curious…

Matthew Young

Thanks for the comment, Ben. You’re absolutely right. What SEOs do is mostly common sense. Given the gravity of mobile and how easy it is to offer the kinds of experiences user expect, it’s surprising how often even the simplest things are overlooked, even when other SEO 101 items have been addressed. I agree. Not rocket science.

Great article Matt. Oddly enough image compression is not rocket science in comparison to other aspects SEOs work with, but for some reason often overlooked. Every single site I have audited in the past week has great title tags, textual content, etc… but no compressed images.

LEAVE A REPLY

Your email address will not be published. Required fields are marked *

Serving North America based in the Los Angeles Metropolitan Area
Bruce Clay, Inc. | PO Box 1338 | Moorpark CA, 93020
Voice: 1-805-517-1900 | Toll Free: 1-866-517-1900 | Fax: 1-805-517-1919