Updated: February 2019
There are no affiliate links on PagePipe.
Image credit: Pixabay
Your Guide to Image Speed Optimization On Mobile
Have you been told you need to optimize your images for mobile? Worried that slow load times, or a bad mobile UX are hindering your sales and conversions? Here are some truths about optimizing your images for mobile — as well as some actionable tips and advice on how to make your mobile site perform better.
Compression & re-sizing is key
One of the most important thing you need to do to your images? Compress and resize them. This will not ruin the picture, as long as you strike a balance between file size and visual quality.
Compression helps improve website performance and speed because it essentially makes image file sizes smaller. Using a plugin like ShortPixel means you can retrofit your image library, even if you didn’t do anything to them when you first uploaded them.
Resizing is just as, if not more, essential than compression. Digital cameras often, very unhelpfully, create images that are very large. Take the pixels down and resize images down to a more reasonable size using a plug in like Imsanity (featured in our review here). Imsanity is actually also a viable (free) alternative to ShortPixel that is limited in its free version.
Image resizing is especially key on mobile — even though modern smartphones are powerful computers in their own right, large images that fill the screen will slow the mobile experience down. You may want to include less images across the board so as to not unnecessarily slow the user down.
Use (trusted) image optimizers
You can optimize pictures for web use by compressing them using Photoshop (not that tricky to do yourself), or you can use some trusted image optimizers that will help you scale the process.
The problem with image optimizers? A lot of them don’t work, and it can be hard to find the best in a bad bunch.
Luckily for you, we’ve gone ahead and tested them against some pretty tough (but fair) criteria. Here are some trusted ones that made the grade.
Ditch the extra plugin bloat
Got an image speed problem? There’s a plugin for that… Or is there?
Don’t jump off the cliff with other lemmings and immediately download fifteen ‘image optimization’ plugins — you will only end up bloating your site’s backend with unnecessary plugins. Third-party plugins are notorious for slowing sites down, and can be a security risk for cyber attacks like SQL injections.
You will also find that one bad-quality plugin can do the damage of a dozen. Bad plugins can actually load down every page on your site (site drag). Slightly counterintuitively, the more popular a plugin, the worse it may actually be for your site! It’s not about quantity — but about quality.
Not sure if a plugin is worth it? Always read plugin reviews, and check how the number of downloads compares with the number of active installs. You want plugins that have good retention rates — it shows they have longevity. Don’t be afraid to install older plugins — they can be pretty reliable, even if they’re not updated as frequently. (Though updates are a good sign — it shows a developer who cares about their product).
Choose the core plugins that you need, always keep them updated, and disable any old ones.
Don’t blindly trust tools
Automated speed tests are notoriously unreliable, and have been exploited by SEOs and digital agencies wanting to sell their digital services off the back of a ‘bad result’. This is often an elaborate hoax to get people to worry about their rankings and invest in SEO.
Everyone’s experience of the internet is vastly different, and few speed tests are able to accurately reflect device experience. So take their findings with a pinch of salt, and focus on the basics:
- Good hosting
- Compressed images
- Well pruned code and CSS files
- Essential plugins and features only.
Random spot-checks and usability testing are great ways of finding out more about your mobile experience.
Too often we forget that websites are the products of layered illusions — and it’s the user’s perception of what’s going on that really matters. This quote from Lora says it all:
“The perception of how fast your website loads is more important than how long it actually takes to load. User perception of speed will be based on how quickly they start to see content render on the page, how quickly it becomes interactive, and how smoothly the site scrolls.” – Designing with Performance by Lora Hogan, p19
Don’t just focus on speed insights that come from tools and backend code — focus on speed in-action. What the user sees is what matters, so focus any speed testing around their experience of the site.
Consider image UX
Come at your ‘image speed problem’ from a different angle, and ditch the images all together! Consider whether they were really needed in the first place.
Take the following three questions into account:
- Is the image interrupting, rather than contributing to, the user journey?
- Are images really adding value here?
- Are the images making the site less, or more, accessible?
Modern designs often push big featured images and hero size images on us; but if they don’t actually achieve a tangible aim: what is the point? Many information blogs that focus purely on copy may not need them at all!
Try to avoid using huge ‘filler’ images on your mobile site — being concise with your imagery is far more important.
Ecommerce product images
When it comes to the sales funnel, product photography is key. So how can you ensure that product images are doing a good job of selling your products, without slowing your site down? A customer doing product research on their mobile isn’t going to thank you (or make a purchase) if the site won’t load.
- Create product images in-house so that you can control the process, and don’t overdo photography for the sake of photography
- Images don’t need to have loads of details and props — they can be simple and beautiful
- The infinite scroll is often favored by users when they’re looking through a product catalogue fast — stick to small image thumbnails to enable this
- Carousels are bad for conversions, not favored by users, and they look terrible on mobile. Try to avoid pointlessly rotating image carousels (but if you have to — go with these ones). And avoid them on the home page if you can…
Don’t lose sight of the bigger picture!
Yes, speed 100% matters, but don’t just focus on speed and forget about all the other crucial elements that go into a good website, like:
Speed is often a by-product of good web development and a good content management system that’s been properly managed and maintained. Don’t neglect ANY areas of your website if you want to make the most of it.
You need to be looking at the user journey, sales funnel, and the experience of using your pages — not just what the speed test tells you. Your users are the best judges of your website — so listen to them.
Victoria Greene is a content strategist and freelance writer, blogging at Victoriaecommerce. She’s proud to say that she’s built a few websites in her time, picking up a thing or two on good and bad web design on the way.
Mobile WordPress Speed – without coding!
Other Related Resources
Build with Empathy