Optimizing images on your website is important, not only because it reduces the site footprint or file size, but doing this one step will net you the greatest gains in pagespeed. Even creating backups of a website with web-optimized images is much faster and takes up less storage space. Let's dive into how to optimize images on your website for performance by sharing with you a basic understanding of a few concepts:
- The differences between JPG vs. PNG image file formats
- Why it's important to resize images before using them (pixels)
- Why it's important to take notice of image file sizes (kilobytes)
How to Choose the Right File Formats When Optimizing Images
Both .jpg and .png file formats have their strong and weak points and its important to know when it's appropriate to use each. Using the correct file type in the right scenario will ensure your website performs the best throughout its lifespan. Here is a breakdown of each common file type:
- JPG/JPEG file extensions are effective for real photos of people, places, or objects. They are, however, prone to corruption or "noise" after too many edits or too much compression. Also, JPGs do not support transparency.
- PNG file extensions are best used to store artificial graphic designs, like logos, icons, info-graphic charts, and so on. These are not prone to the same corruption as JPG images, but they are way less efficient (read: unnecessarily huge file-size) than JPGs when you use them for organic photos. PNGs allow transparency.
How to Optimize Images for Backgrounds: Resizing Image Dimensions
- We recommend minimum dimensions of 1280x853 or 1280x720 depending on the aspect ratio. These numbers do not have to be exact, but are guidelines based on the experience of developing hundreds of business websites.
- Background images do not need to be larger than 1920x1280 unless a significant portion of your customer base uses 4K displays (and if the rest of your website is built specifically to accommodate users of 4K screens).
- Images that take up less than 50% screen width (i.e. a product photo sitting in a half column) do not need to be wider than 640px.
How to Optimize Image File Sizes: Tips for Compressing Images:
- Avoid using huge, raw/DSLR quality images to your website. Even if your website uses CSS to shrink them down and make them fit, visitors are still downloading the huge full-size images. Not only does your pagespeed suffer, but your visitors' devices go through more data and have to work more to size down the images on their end.
- Automated image compression tools like TinyPNG, EWWW Image Optimizer, and WP Smush do wonders to reduce file sizes while preserving image quality.
- You still need to resize image dimensions before running images through a compression tool to get the best possible result.
- The ideal file size for a 1920x1280 background image should be <500KB*
- The ideal file size for a 1280x853 background image should be 80-250KB*
- For the sake of pagespeed, you should never use an image >1MB on a web page. Otherwise, you are unnecessarily adding to the page's load time.
*These are ballpark estimates and require common sense. If you have a small product photo that takes up 800KB of space for example, you need to go back and look at things.
Dangers of Over-Optimizing Images on Your Website:
- Over-optimization (too much compression) is a potential problem and must be avoided. Over-optimizing your images will make them look grainy, low-res, or even unrecognizable in extreme cases.
- EWWW and TinyPNG offer "lossless" optimization in their default modes, preventing this from happening. This will provide a positive difference in file size and pagespeed 99.9% of the time, without the human eye being able to tell any difference.
- Avoid tweaking image compression settings unless you know what they do.
- Some tools like Google Pagespeed Insights offer "optimized resources" at the bottom of their test pages that can be unusable due to over-optimizing. Take Google's (or any other pagespeed tester's) recommendations with plenty of salt.