When Size Actually Matters - Optimizing Images for Web and Performance
What's the BIG Deal?
It's no secret that Google is a total size queen when it comes to images on your website; however, bigger is far from better. And let's face it - the LAST thing you want is for Google to hate your website because of a few large files.
Optimizing Images for Web and Performance is super-duper important when maintaining/updating your website. If left un-optimized, you can hurt your chances of getting your photos to rank on Google and other image search engines. Not to mention, large image files will also slow down your website, which will result in a less than awesome user experience. So before uploading fancy new product photos, gallery highlights or your latest headshots to your website - stop, drop, and optimize your images FIRST. Image compression/optimization is one of the simplest website maintenance tasks that can significantly improve user experience, SEO, and your overall web performance.
Not-So-Fun-Fact
75% of your website visitors will use the "back" button before a slow page finishes loading. #ungood
What Does It Mean to Optimize Images for the Web?
Image optimization is when you decrease the file size of your images as much as possible so that your page load times remain low. There's a slight catch, though. Decreasing file size can reduce the quality of your images, leaving you with an 8-bit aesthetic that doesn't look so hot in 2021. Luckily, there are several ways to reduce an image size that will improve your website performance without compromising the quality of your visuals. Let's look at how you can format your images (without making them ugly) and reap all the fringe benefits of image optimization, including:
· Improved page load speeds.
· Improved SEO ranking.
· Faster backups of your site content.
· Lower bandwidth use.
How To Optimize Your Images for Web and Performance
Your mission (if you chose to accept it) is to format your images, so they are the smallest file size possible with the best possible quality. So how do you accomplish this? There are a few ways to perform almost all of these optimizations in just a few steps.
The two primary things to consider are the file format and the compression type/method
By choosing the right combination of file formatting and compression type, you can quickly reduce your image size by as much as five times. Typically formatting and compression type is done in a tool like Adobe Photoshop or Affinity Photo; however, if you don't have access to these programs - don't sweat it. We'll share some alternatives you can try!
1) Choosing the Right File Format
File formats can make a difference, so before modifying your images, make sure you've selected the best file type. The file type variations you can use are:
· PNG (Portable Graphics Format) – this file type produces higher quality images and results in larger file sizes.
· JPEG (Joint Photographic Experts Group) – with this file type, you can manually adjust the quality level to find a good balance of quality and file size.
· GIF (Graphics Interchange Format) – this particular file type only uses 256 colours; however, it's the best choice for animated images.
· SVG (Scalable Vector Graphics) - a graphic designer's dream file type! An SVG file is a scalable vector format that Google indexes seamlessly - so you don't need to worry about SEO! They are also traditionally (but not always) smaller in file size than JPGs and PNGs, which means faster load times.
There are other formats; however, PNG, JPEG, GIF, and SVG are universally supported by all browsers. For images with lots of colours, ideally, you should use JPEG or JPG. For simpler pictures that aren't colour sensitive, stick to PNG.
2) Compression Types/Methods - Lossy VS Lossless
It is also essential to understand that you can use two types of Compression: Lossy Compression and Lossless Compression.
Lossy Compression will eliminate some of the data within your image, meaning you might see a reduction in image quality (or what some would refer to as pixelated). Proceed with caution when using Lossy Compression because you cannot reverse this process. The most significant benefit of this method is that you can significantly reduce your file size. Both JPEGs and GIFs are considered Lossy image formats. Want to appease Google? Stick with this compression method.
Lossless Compression won't reduce the quality of your image, unlike its Lossy counterpart. This method strips away unnecessary metadata from a photo, reducing file size, but not by much. RAW, GIF, PNG, and BMP are considered Lossless image formats. This method is best for those who can't afford any quality loss - like photographers, food bloggers, and models who rely on their pixel-perfect images to make a living.ds and strategically placed hyperlinks to service pages in your website to be considered a source of consistent, credible content in the eyes of search engines. Don't have time to blog? Consider hiring a copywriter to tackle the job for you!
Which Compression Type Should I Use?
It's good to experiment with compression techniques to see what works best for each image/format. With that said, we typically recommend using Lossy Compression to appease the Googs, and because you can easily compress an image between 70-90% without much loss in quality. If your image editing tools have the option, make sure to save/export your images for the web. This export option will result in decent quality adjustments with optimal Compression.
Tools and Programs for Image Optimization
There are many tools and programs to help with your image optimization - both premium and free! Some offer the means to perform your own optimizations, and others do the work for you with the click of a button (or two). Here is a list of tools and programs to check out:
Image Size Matters - Always
Always take the time to format your images for better performance. By doing so, your website will be better liked by search engines, browsers and will load faster for all your visitors. If you're still having issues with a slow website after image optimization, get in touch. We'll help you get back on Google's good side!
