A picture is said to be worth a thousand words. In the highly visual digital space, imagery abounds. Your website is likely full of imagery on every page – photos, graphs, iconography and more. But while this can make for a beautiful site, adding imagery can also compromise the load time of your site, and ultimately negatively impact the user experience, organic search ranking and Google Page Speed score.
Image compression speeds site access
Slow-loading web pages – longer than two seconds for most sites – are a turnoff to visitors to your site. There are many reasons a site may be slow loading – including the hosting environment, code issues, poor caching and more.
But one very important and easy-to-manage cause is unoptimized image content. Compressing an image take it from higher-quality image formats and sizes (e.g., PNG and GIFs), to more load-friendly file types and sizes.
Like squeezing a sponge
File compression, in simple terms, works by applying algorithms to remove and replace repetitive bits of data to shrink the original file size so it takes up less server space. It’s like squeezing a sponge to fit into a box. Compressed data must be decoded to be useable.
The goal: ensuring that your images render well on the website without compromising the load time and user experience. A positive user experience also translates to more site traffic, page views, and, ultimately more conversions or sales.
Image compression and SEO
Search Engine Optimization (SEO) aims to attract visitors to your website through organic rankings on search engines like Google and Bing. Load time is one of many factors that impact how a site ranks because it impacts usability which is a key priority for Google. With businesses and organizations increasingly focused on improving their PageSpeed score, making image compression part of your regular routine is essential.
Recognizing compressed image files
Compressed image files are easy to identify by their three most common compression formats:
JPEG – Joint Photographic Experts Group (named after the group who created it) is perhaps the most recognizable for its frequent application for posting photographs and images of text to web pages. Its high number of pixels allows it to display, with depth and detail, more than 16 million colors.
GIF – the Graphics Interchange Format, with only a 256-color palette, allows for fewer color choices than a JPEG image. However, GIFs are ideally suited for animating images frame by frame, to create the look of motion.
PNG – the Portable Network Graphics filetype was designed to replace the GIF. But the PNG now has more information than its predecessor: it can contain either 24 or 32 bits per pixel.
How to optimize images for your website
When optimizing images for the web, there are several steps:
Start with the proper file type: Most web images on are either a PNG, JPEG, or GIF. There are also other file types like SVG (scalable vector graphic file), and WebP image format, but they may not be supported in all content management systems and browsers. At ZAG Interactive, we generally recommend that header and promotional images be JPEGs. Likewise, if an image has a transparent background, it should be a PNG.
Compress your image: Use a design program like Photoshop to compress the image. Be sure to keep smaller site images under 70 kb, while home page and header images should be no more than 100 to 150 kb. For best results, explore various quality settings for your images, don't be afraid to sacrifice quality. The visual results are often more than sufficient, and the file size savings can be quite large.
Confirm image against image optimizer tool: It is also smart to run images through an image optimizer tool before uploading them.
Image compression is part of content management
Many businesses and organizations have multiple resources managing their site, so it’s important that anyone providing site imagery follow the same steps. An optimized site can become a problem very quickly if resources are uploading unoptimized banners and imagery.
It’s smart to periodically scan your site for problems just in case this wasn’t done intentionally. Your SEO team will thank you and your users will have a more positive experience with your site.
To learn more about image compression best practices and discuss your web design needs, talk with a ZAG Interactive expert.