How to: Format & Compress Images

We talk a lot to clients about how to optimise a website and the importance it has on rankings. We have touched on compressing images and formatting before but get asked the same question so frequently, it deserves a deeper look.

“How do I format images for my website?”

One of the single most impactful ways to improve both load times and search engine optimisation (SEO) is by properly sizing, formatting and compressing images. Large, unoptimised images can slow down your site, leading to higher bounce rates and lower search engine rankings.

We’ll explore the best practices for formatting and compressing images to optimise your website’s performance and SEO.

Why Image Optimisation Matters

Before diving into the how-tos, it’s essential to understand why image optimisation is crucial:

• Improved Load Times: Faster-loading pages lead to better user experiences and can boost your search engine rankings.
• Reduced Bandwidth Usage: Optimised images use less bandwidth, which is beneficial for both you and your visitors. If you pay for your web hosting or CDN by the kb, it could literally be costing you each time someone lands on your site.
• Reduced Server Space: If you’re paying for disk space, again you could be spending unnecessary funds on filling up your quota.
• Enhanced Mobile Experience: Compressed images load more quickly on mobile devices, where data speeds and connection reliability can vary.
• Better SEO: Search engines like Google consider page speed as a ranking factor, so faster pages can lead to higher search engine rankings.

Choosing the Right Image Format

Selecting the appropriate image format is the first step in optimisation. Here are the most common formats and their best use cases:

• JPEG: Best for photographs and images with many colours. JPEGs can be compressed to reduce file size without significant loss of quality.
• PNG: Ideal for images that require transparency or have sharp edges, such as logos and icons. PNGs support lossless compression, preserving image quality.
• SVG: Stands for Scalable Vector Graphic. If you have a logo, icon or illustration in vector format, it it often much smaller yet higher quality than the same image in PNG format.
• GIF: Suitable for simple graphics and animations. GIFs use a limited colour palette and are generally smaller in size compared to video but we tend to avoid due to their larger file size.
• WebP: A modern format that provides superior compression while maintaining quality. WebP is supported by most modern browsers and is an excellent choice for both photos and graphics.

Correctly Sizing Images

It might seem like a no-brainer, but a regularly overlooked point is sizing images properly.

Does your small blog thumbnail need a billboard size, ultra high definition 20,000,000px wide image? Of course not. As a general rule of thumb, images shouldn’t ever need to be over 2000px wide. They should be sized correctly for use, just keep in mind retina screens require images to be double the standard width.

The inverse is also true – images can be scaled down on a responsive site, but scaling them up will result in blur. There’s nothing that screams “cheap” and “untrustworthy” more than a website with a fuzzy, low resolution logo.

Compressing Images for the Web

Once you’ve selected the right format, the next step is to compress your images to reduce their file size. There are several tools and techniques you can use:

Online Tools

• TinyPNG: Compresses PNG and JPEG images efficiently while maintaining quality.
• Bulk Resize: An online tool for bulk resizing lots of images at once.

Desktop Software

• Adobe Photoshop: Offers robust compression settings when saving images for the web. Use the “Save for Web” feature to adjust quality and file size. Even better, save out as WEBP – we recommend setting to 65% for best results and no further compression is needed.
• GIMP: A free, open-source alternative to Photoshop that provides similar compression capabilities.

WordPress Plugins

• Smush: Automatically* compresses and optimises images upon upload to your WordPress site.
• WP-Optimize: Compresses images in your media library and offers options for bulk optimisation.

*make sure to double check your settings if you’re automating the process – you don’t want to over-compress! We often refer to “flawlessly” compressing which means getting them as small as possible with no visible reduction in quality. You may need to tweak your size and compression to suit your needs.

Optimising Images for SEO

In addition to formatting and compressing, there are several SEO practices you should follow:

Use Descriptive File Names

Rename your images with descriptive, keyword-rich file names before uploading them to your website. For example, instead of “IMG_1234.jpg,” use “beach-sunset.jpg.”

Add Alt Text

Alt text describes the content of an image and is essential for accessibility and SEO. Use relevant keywords naturally within your alt text to improve your image search rankings.

Include Captions

Adding captions to your images can provide additional context for search engines and users, improving your SEO.

Use Lazy Loading

Lazy loading defers the loading of images until they are needed (i.e. are visible on screen) which can significantly improve page load times. Many modern web development frameworks and WordPress plugins support lazy loading and something we incorporate in all our projects as standard.

Image Checklist

• ✅ Size: never over 500kb
• ✅ Dimensions: 600-2000px wide
• ✅ Format: JPG (or PNG if it contains transparency) or WEBP format
• ✅ Meta: named correctly and has meta data added

Compressing Our Final Thoughts

Optimising images for your website involves selecting the right format, sizing and compressing them efficiently, and following SEO best practices. By taking these steps, you can enhance your website’s performance, provide a better user experience, and boost your search engine rankings. Whether you’re using online tools, desktop software, or WordPress plugins, there’s a solution to fit your workflow and help.

By incorporating these practices into your web development process, you’ll ensure that your site is not only visually appealing but also fast and search-engine friendly. You could even save money in the long run!

Happy optimising!