A mobile website can be a powerful tool to help your brand engage customers and generate conversions. However, just because you build a beautiful mobile website doesn’t necessarily mean customers will come. Even worse, customers might actually come—and then leave immediately. It happens everyday: Users abandon half of all mobile website visits if they take longer than three seconds to load, but the average mobile website takes 15.3 seconds. That means your website needs to be not just well-designed and engaging, but fast, too.
One of the primary features that can slow a website are images. Of course, users won’t be particularly drawn to a blank page or wall of text, either, so it’s critical for brands to balance images and speed on their mobile websites. Here are four tips to help you get started:
Do all of the images on your website serve a purpose? Is each one imperative for customers to understand the value you can provide for them? If the answer is no, then you can remove these unnecessary images from your website. Having fewer images will reduce download speeds and thus improve your load times, leading to a faster, more positive user experience. You can also work with your team of developers to find images that you can replace with faster alternatives like text or CSS.
Select an Image Format
Make sure your images use the best format! Of course, the “best” format will vary according to several factors. Generally speaking, however, you can use WebP for photographic and translucent images at 30% more compression than JPEG without loss of image quality; JPEG for photos with no transparency; PNG for transparent backgrounds; and SVG for scalable icons and shapes.
Optimize and Improve
You can realize incredible gains in page speed by optimizing the images that do make it onto your website. Start by compressing images to reduce their size and stripping out nonessential elements like metadata that will create drag on your website and make it slower, and play with different quality settings until you find one that improves load times while delivering gorgeous images for users.
Try Different Loading Methods
Personalize your users’ image experience by serving different versions based on their devices or even network connections. You can also employ a process known as “lazy loading” that will load images “above the fold”—in other words, in the area that users can see as soon as they visit the page—while saving off-screen images for later as users scroll past them; this can make your website much faster.