Sizing website images & why it matters

How fast your site loads is important. Visitors don’t like slow sites, and they often won’t wait for slow-loading pages to load before they move on. One of the things that slows down a website is using large images — and by “large” I mean file size. The file size of an image is the digital size of the image file, measured in kilobytes (KB) or megabytes (MB). Images can be identical in dimension (width and height, in pixels), but be vastly different file size depending on the image format, compression/quality, etc. Sizing website images correctly is an incredibly important part of maintaining your site. With that said, I wanted to take a minute to offer some basic guidance on sizing images for your website.

Understanding file format and how it affects File Size: JPEG vs PNG

JPEG: As a rule, I recommend using compressed JPEGs in your site. They are dramatically smaller than PNGs (which I’ll talk about in a bit).
When saving an image in JPEG format, users have the choice of compression vs quality. More compression equals a smaller file size, but you lose quality. Likewise, less compression equals a larger file size, but gives you higher quality. The key is finding a balance for the image you are saving so that it looks good and has a small file size. You’ll find that you can use quite a bit of compression for images that do not contain text. As soon as you are saving a graphic that includes text, you will begin seeing the quality difference dramatically as you increase compression. Another quick note about JPEG is that they are “lossy”, meaning if you resave the same image multiple times for some reason, the image quality will degrade with each additional save. PNG: PNGs are always significantly bigger than JPEGs, so why would anyone use them? The main reason is that they support transparency, whereas JPEGs do not. In this example below, the first image shows the logo and header color as PNGs. The logo displays without a background and you can see the background image through the transparent header color.

Let’s look at that same image done with JPEGs below. A JPEG does not support transparency, so you see the logo with a white box behind it. Likewise, the header color displays as solid rather than the soft, transparent way it displays above.

Another reason that you might use PNG is because that format supports lossless data compression so you can save the image over and over and over without losing any of the quality. But check out this example of file size and quality for a compressed JPEG vs PNG below. Can you see a difference in the two images? Is that difference worth the huge increase in file size?

TOP IMAGE = PNG = 426 kb
BOTTOM IMAGE = JPEG (compressed to low/medium) = 41 kb
(Difference = 385 kb!!!)

So, to sum that up, use JPEG unless there is a reason you need transparency in an image, in which case you would use PNG.

Understanding Image Dimensions

Images with larger pixel dimensions will equate to larger file sizes, so it’s really beneficial to size your images down before you upload them to your site. Pixels are a unit of measurement — like inches. There is no firm rule on how many pixels the height and width of an image should be, but in my experience, there is no reason for images that are going to be used on pages & posts to be uploaded at more than 1000px max dimension. In comparison, pictures right off your camera will likely be between 2500px and 4000px wide, so if you upload those without sizing and optimizing, they are enormous files.

You should try to size images down based on how they are going to be used within the site. In other words, you wouldn’t want to upload a 1000px wide photo to use on a page where it is only going to appear at 400px wide.

In this example below, the images look exactly the same, right? They aren’t. The top image file is 300px by 225px and is 16kb. The bottom image file is huge, but sized within the WordPress page editor to display at the same size as the top image. That file is actually 1500px by 1125px and 150kb. That’s a difference of 134kb for one image. You can see how that can add up and affect your page loading even though you don’t actually see the difference on the front end.

When you upload an image, WordPress does create additional (smaller) versions of that image for you to use on your pages, but WordPress does not compress images when it creates these. It’s important that you have uploaded a sized and optimized image so that the smaller images that WordPress creates are not larger files sizes than they need to be.

Also, often as you see in the example above, we place an image on a page or a post in full size and size it down manually in the page editor. Or in the case of image rotations/slideshows, those use the full size image that you’ve uploaded. Super important in those cases that you are not placing an enormous image on the page.

How Do I Size & Compress Images For My Website?

Photoshop Elements is a great, affordable program to use for sizing & compressing your images for your website. Their “Save For Web” feature allows you to size and compress in one place. Read their tutorial on Optimizing Images.

Update to this article: Please read my article about the Smush Image Optimization Plugin as it is a valuable tool for sizing and compressing images. 

Hopefully these tips help you understand a bit more about why sizing website images and optimizing them with the correct file format/compression is important.