Images help bring your content to life, but large image files can significantly slow down your site's loading times. Optimizing images is always recommended.

A general rule for image optimization: try to get most images under 1 MB apiece, when you upload them to your site.

That may seem small, but it is doable. Here are a few helpful tips to keep your images lean and your site loading quickly.

Many images found online have massive dimensions. Using nice big images is a good thing - it ensures that images will look great on any device - but there comes a size when no one notices the extra detail.

So how big is big enough?

Shoot for no larger than 2560px wide, which is large enough for max resolution on larger monitors. Height can vary as needed.

While many images found around the web will fit within those restrictions, photos taken with digital cameras can be this large or larger.

Upload larger images into editing software, like Photoshop or Pixlr, change the dimensions, then save a new copy of the image. If an image is only going to be used as a thumbnail, make the copy's dimensions even smaller.

Image quality refers to the amount of detail in saved images. Like dimensions, image quality is important, but there comes a point where you won't notice the extra detail.
​
Image quality is often times ranked on a scale of 1 - 12, like this:
1 - very low
2 - very low
3 - low
4 - low
5 - medium
6 - medium
7 -  medium
8 - high
9 - high
10 -  maximum
11 -  maximum
12 - maximum

The higher the quality, the higher the image file size. The difference between 1 and 12 can be massive. Maximum quality can be 10-20x higher than very low quality.

DLSR cameras typically take photos with maximum quality. That's necessary for printing, but it's overkill for the web. You can probably save it at around 7-9 (medium-high quality) and notice little quality loss when viewed on the web.

Upload your ultra-high quality images into your image software and save a copy at lower quality, like 6 (medium quality) to 9 (high quality). Lower the quality even more for images that require less detail, like background images. You'll be asked to select image quality during the saving process.

Different file types come with different file sizes.

JPEG is the most popular file type, mostly because it's the highest quality file type for the web. It comes with slightly larger file size, but if the image dimensions and quality are set properly, it should be well within acceptable ranges.

PNG is the second most popular. These images often have transparent backgrounds and are slightly lower quality, making them ideal for anything that doesn't require high detail. 

GIF is less popular for image these days, but still popular for animations. They use a limited color palette, which makes for smaller file sizes.

SVG is ideal for graphics and logos, as they scale as large or small as needed with no loss in quality. If you're uploading a graphic, use SVG.

A few simple rules:

Now that your images are optimized for the web, you can upload the image to your site. Chances are they're a fraction of their original size.

But wait - we can do more!

Using an image compression plugin we can reduce file sizes even smaller. Popular plugins, like WP Smush, ShortPixel, and reSmush.it, all run the image through an algorithm that reduces the file size with little to no loss in quality. Like magic!

Set these plugins to compress new images as they're uploaded to your sit, compress images individually, or compress all of your images. Just be prepared - compressing an entire media library can take a long time!

I took this photo in Denver with my DSLR camera. It's saved as a RAW file, which is a mega-high quality file most DSLR cameras offer.

Original image
Dimensions: 4752px x 3168px
Quality: 12 - maximum
File type: RAW
File size: 23.4 MB (that's huge!)

After running through steps, here's the new data.

Optimized image
Dimensions: 2560px × 1707px
Quality: 8 - high
File type: JPEG
File size: 859.6 kb

That's 96% smaller than the original file! 

That's also under 1MB, which means the image will load blazing fast on your site.