If you’re looking for mobile page speed wins, start by re-evaluating the images on your site. Here are some more technically-minded tips to work through with your developer — including illustrative examples from within Google and Alphabet. These tips will help your company reap the benefits of image optimization while ultimately creating a faster mobile experience for your users.
- Prioritize your brand site’s images in order of importance
- Choose an efficient image format
- Compress and resize imagery
- Use loading techniques
Prioritize your brand site’s images in order of importance
Before optimizing the images on your site, consider whether they’re all necessary. Sure, that high-res photo looks great, but does it actually help to convey the message you are trying to get across? Can that animated GIF be simplified into a more efficient animation purely in code? Or better yet, can it be removed completely?
Removing unnecessary assets reduces maintenance and complexity. And if an image can be substituted with text or CSS, then your developers will enjoy the creative challenge and your users will save on download size.
Choose an efficient image format
With so many formats available, it can be difficult to know which one is the most efficient. It all depends on the use case, but choosing the correct format can already save some bytes from your page size.
Compress and resize imagery
Optimizing images can help you achieve the largest byte savings and mobile site performance improvements. Even the most basic optimizations — like compressing images, removing metadata (such as the date and time), and experimenting with quality settings — can help. And now, it’s easier than ever to serve responsive images as developers define multiple sizes of an image and the browser chooses the best fit for the user’s screen size.
Use loading techniques
Compressing and resizing images is the basic approach that every designer and developer should enforce. To go one step further, developers can conditionally serve different versions of the image based on the user’s device, screen size, or even the quality of their network conditions. This enables developers to build a fast-loading site for everyone, regardless of their unique browsing conditions.
Once your images are effectively optimized, make sure they’re delivered at the right moment. When users first land on your page, they want to instantly see all the content within their viewport, often referred to as “above-the-fold” content. With a technique called lazy loading, you can enable your webpage to prioritize loading the first available images in this limited view, while off-screen images are loaded at the moment of need.
For more information on optimizing images for mobile speed, read Think with Google’s full post, 4 mobile page speed wins to discuss with your developer, starting with images.
