What Is Image Optimization and Why Is It Important?
As the web becomes more visual, images and other rich media have become a major factor in page load time. According to HTTPArchive, in 2020 images made up as much as 50% of average bytes downloaded by web visitors.
Therefore, optimizing images to reduce their file size is a key strategy in reducing page load times and improving the user experience. Simple optimizations, such as resizing images to the actual size they are displayed on the page, or converting to a more efficient image format, can result in dramatic improvement in page load.
The benefits of image optimization include:
Reduced bounce rates – users are more likely to stay on the page if it loads quickly
Improved customer engagement – images are a central part of the user experience in a modern website. If images load slowly (even if the rest of the content is visible), web visitors are less likely to engage with the website and eventually convert.
Cost savings – bandwidth costs money, and by optimizing images, websites use less of it and save on hosting and content delivery costs.
Improved search rankings – because page load time and performance is a ranking factor on Google and other search engines. Optimizing images can directly lead to higher rankings and more traffic.
Image Optimization Strategies
Here are six key strategies you can use to optimize image files, reduce page load time and improve the user experience.
Choose the Right File Format
Make sure you select the best file type before starting to modify your image. The most common file types are:
PNG, which produces high-quality images, but also increases file size. PNG is lossless, but you can also configure it to enable lossy compression.
JPEG – you can balance the quality and file size by adjusting the JPEG quality level, between 1-100%.
GIF – only supports 256 colors, and provides lossless compression. Rarely used for static images, but increasingly popular for animations.
Use Progressive JPEG and Next-Gen File Formats
JPEG images have two rendering modes:
Baseline loading – displaying the image with full quality, from top to bottom. This can be problematic for users with slow connections.
Progressive loading – initially showing a low quality image, and then increasing quality gradually as more of the image is loaded.
Using progressive JPEG in your website or app can greatly improve the user experience for users with slow Internet connections.
Another option for improving load times is next-generation image formats, such as WebP and JPEG-XR. These image formats can create large savings in file size with advanced compression, without hurting image quality. They are recommended for use by Google’s website optimization guidelines, and are therefore also important for search engine optimization (SEO).
The issue with next-gen formats is that they are not supported by all browsers, and so it is necessary to prepare a fallback image (such as PNG), and display it instead if the user’s browser does not support the new format.
Caching
Caching is a technique employed for the purpose of serving content quickly, by storing the image files in a proxy server or a browser cache. Browser-side caching can help reduce application requests and the download side of each cached page.
Caching image files in a proxy server requires setting up storage for images on several point of presence (PoP) servers, which are distributed throughout the world. Images are then served from the closest server, which significantly speeds up page loading times
You can also reduce page load times by using an image caching service, which creates cached tiles for images. To improve performance and loading speed, an image caching service preprocesses an image before it is cached. You can do this for static images like backgrounds and low-performance formats.
Compression
Compression techniques are employed for the purpose of reducing the size of an image. There are two common compression types:
Lossy compression—reduces file size by removing data redundancies. This type of compression can cut down image file size, but also degrades quality. Once a file is compressed, you cannot recover the eliminated data. To prevent loss of data, you should always keep a master copy with the highest possible quality.
Lossless compression—prioritizes quality over file size. This technique maintains a high quality, which enables you to later restore the file as needed. However, you cannot use this technique to significantly reduce file size.
Resizing
Even if the image cannot be fully compressed, you still need to balance size and resolution. The higher the resolution, the larger the file size. On the web, using high-resolution images slows down page load. Similarly, if a visitor accesses your website through a mobile phone, bandwidth is likely to be more limited, and large images will take longer to load.
The best practice is to find a balance between quality and file size. Resize the image to the smallest size that will still provide the required visual effect. Also, if you must display large high resolution images, show a thumbnail and only load the full image when a user requests it.
Optimize Image Delivery
Even if your image is optimized by following the steps above, there is more you can do to improve performance. Server speed and network performance are also important factors affecting how fast images load for your users.
Plan for traffic spikes, and make sure your image server can handle three to four times normal traffic load. Always provide images with an appropriate cache header so local devices can use a cached version of the image.
Another option is to use a Content Delivery Network (CDN). A CDN can deliver your images to users from close proximity to their physical location. The closer the server is, the faster the response time. CDNs are now widely available and easy to implement, and are a great solution for improving image performance.
Conclusion
In this article I covered six key strategies for optimizing images, with the goal of improving page load time and user experience:
Choose the file format most appropriate for the desired visual impact
Use progressive JPEGs and next gen file formats to ensure images load faster
Utilize caching both on the client and server side to eliminate wasteful image re-loading
Use compression to reduce file size without noticeably affecting quality
Resize images to the appropriate size before displaying them to users
Optimize image delivery using content delivery networks (CDN)
I hope these tips will help you shave seconds off page load time, make users happier, and improve conversions and revenues on your websites and web applications.
About the Autor
Gilad David Maayan is a technology writer who has worked with over 150 technology companies including SAP, Imperva, Samsung NEXT, NetApp and Ixia, producing technical and thought leadership content that elucidates technical solutions for developers and IT leadership. Today he heads Agile SEO, the leading marketing agency in the technology industry.
