Website best practices for image optimization

There’s an easy way to make your site load faster and rank higher, and many people aren’t taking advantage of it: image optimization.

There’s already a lot of information on the web about image optimization, specifically for WordPress sites. There are a slew of plugins available designed to scan your site’s media library and optimize its contents. But today I want to cover the basics: two high-level steps you can take to keep your image file sizes small right from the get-go, whether you’re developing a theme or publishing new blog posts.

1. Resize your image to be only as large as it needs to be

It can be tempting to upload the biggest, highest resolution version of your photos. They look so crisp and shiny! And you can use HTML, CSS, or WordPress’s built-in image insertion tool to resize it anyway, right?

But that 3264 x 2448 pixel photo downloaded straight from the camera or Shutterstock has a huge file size and is going to slow your page load times considerably.

Your first step should be to decide exactly how large your image needs to be, and then to resize it accordingly. For example, if you’re uploading a logo to display in your site’s navigation, and that logo is only ever 250 pixels wide – resize your logo to 250 pixels first. Background images that stretch the full width of your site should never be larger than 1920 pixels wide.

(Note: as retina display becomes more prevalent, you may see advice to supply larger images for retina-supported devices. Some WordPress themes even offer the option to upload a retina-ready logo separately. However, the same rule applies. Retina generally calls for 2x the regular file size, so in the case of a 250 pixel logo, you would resize your logo to 500 pixels wide.)

2. Compress!

The second and most impactful step is to choose the appropriate compression level when saving your file. Usually you’re prompted to select compression settings when saving a new file. If you don’t see compression settings when saving, check your program’s Help files for more information. Photoshop offers compression settings when using the Save As function.

.JPG Compression

.JPG compression is about finding the sweet spot between file size and image quality loss. The more you compress a .JPG file, the blurrier it becomes. However, there is rarely a need for a .JPG on a website with 100% (or 12/12, whatever the scale may be) quality. When selecting compression options in Photoshop, both the potential file size and the image quality preview are displayed as you adjust. It’s suggested in WordPress’s own codex that “large high quality images should be kept between 100K and 60K. Smaller images should be closer to 30K and lower.” (source) So try to find lowest quality setting with the least amount of visual quality impact.

.PNG Compression

.PNG files are a “lossless” file type, meaning that when they’re compressed they don’t lose any visual quality. Compressed .PNG files just take longer to encode and decode, or rather save and open in your image editing program. Therefore when you’re saving .PNG files, you want to select to compress them. In Photoshop, that means selecting the “Smallest / Slow” option.

.JPG vs .PNG?

Wondering when to use .JPG and when to use .PNG? .PNGs are best suited for small, flat-color images like logos and icons that you want to remain crisp, or any graphic with transparency. .JPGs should be used for pretty much everything else, but especially photos.

So remember: resize and compress! These two practices alone will help immensely in keeping your site’s page load times snappy.