Honestly, image compression is something that should be completed out of the box and is best automated. However, if you’ve got some large images on your website that are slowing down page speed, this simple guide will help you optimise them for SEO and Core Web Vitals.
The Best Settings For Image Compression
This is your overall aim for a compressed image. There is a bit of give and take, but as long as your images are not excessively large, you should be fine.
- Most images should be compressed to between 80 KB and 250 KB depending on purpose
- WebP is the recommended format for most modern websites
- Hero landscape images should be no more than 1920px wide
- Portrait images typically look best around 1200px height
- Standard content images are ideally 1024px wide for landscape, or 1024px in height for portrait
Recommended Tools
For quick and reliable compression, these tools work well for most users:
- squoosh.app for single image compression
- bulkimagecompressor.com for compressing multiple images at once
- reSmush.it plugin for WordPress websites needing built in optimisation
Step By Step Guide To Compressing Images
This guide is for single image compression using Squoosh, but the process is similar for other tools such as Bulk Image Compressor.
Step One: Choose An Image
Select an image and determine whether it is landscape or portrait. This matters because setting a fixed width or height incorrectly can result in unnecessarily large files due to aspect ratio scaling. Once selected, drag and drop your image into Squoosh.
Step Two: Set Your Dimensions
In the panel on the right, click the resize option. Set either width (for landscape images) or height (for portrait images). This ensures the aspect ratio is preserved automatically.
Step Three: Change Your Format
Most images will be PNG or JPEG by default. Under compression settings in Squoosh, select WebP as the output format for improved performance and smaller file sizes.
Step Four: Download & Edit Your Image
Squoosh will compress and resize your image automatically. Download it using the button in the bottom right corner and rename it to something relevant. This is especially important for SEO and file organisation.
Step Five: Upload Your Image
Upload your optimised image to your platform, whether that is WordPress, Shopify or another CMS. Always add descriptive alt text for accessibility and SEO purposes.
Understanding Image Compression
Image compression reduces file size while maintaining as much visual quality as possible. There are two main types: lossy compression, which removes some data to reduce size significantly, and lossless compression, which preserves quality but results in larger files. For most websites, lossy compression offers the best balance.
Search engines reward fast loading websites. Compressed images improve Core Web Vitals such as Largest Contentful Paint. Faster pages improve user experience, reduce bounce rates and increase ranking potential, especially on mobile devices.
Choosing The Right Format
JPEG is ideal for photographs due to efficient compression. PNG works best for graphics, text or images requiring transparency, although file sizes can be larger. WebP is now the preferred format because it provides superior compression while maintaining quality and is widely supported across modern browsers.
Recommended Dimensions For Website Images
Hero banners typically work best between 1600px and 2000px in width. Blog feature images usually sit around 1200px width. Thumbnails and smaller graphics can range between 300px and 600px depending on layout. Product images should generally be between 1200px and 1600px on the longest side to retain detail.
Landscape images are best for banners and wide sections, while portrait images work well for blog content and product displays. Choosing the correct dimensions helps prevent unnecessary file weight and improves load times.
Alt Text & File Naming
Alt text helps search engines understand image content, improves accessibility and supports image search rankings. It should be descriptive, accurate and natural. File names also contribute to SEO, so avoid generic names like IMG1234.jpg and instead use descriptive naming such as cardiff-cafe-interior.jpg.
Local SEO can benefit significantly from properly named images. If your image includes a location or landmark, naming it appropriately helps reinforce geographic relevance for search engines.
Contact Our Professional Team Today
Image compression is a quick win for SEO and user experience. By using the right formats, appropriate dimensions and a consistent optimisation process, you can significantly improve site performance without sacrificing visual quality.
If you need help optimising your website or improving your SEO performance, Formwork Digital is here to support you.