When it Comes to Website Images, Size Matters

How do I increase my page speed? This is a question that comes up a lot during the monthly Las Vegas WordPress meetups I host. Whether you’re building on WordPress or not, one of the factors that is often overlooked is proper image sizing.

When we talk about optimizing our website for speed, many of the elements are “set it and forget it”. That’s just not the case with images. Optimizing images is a multi-faceted process.

In this post, I’ll break down image resizing into a few key pieces:

  • why web page speed is important and how it affects the success of your website
  • image compression techniques using applications and WordPress plugins
  • when and why image display size matters

Let’s get to it.

Why Does Web Page Speed Matter?

In a word: Google. Google has placed huge importance on the speed in which pages are served up to visitors. The thing is, they aren’t wrong. Over a decade ago, Amazon found that for every 100ms of latency, they lost 1% in sales. While you may not have Amazon levels of traffic or sales, focusing some effort to avoid losing sales and traffic just makes sense.

That being said, slow web page speed can negatively affect user traffic, retention, and search engine optimization, all of which could heavily impact the success of your website, and your business.

There are many factors that go into your overall page speed. Tracking down and fixing All The Things can be time-consuming. Given that we all have limited time, it’s best to move the biggest rocks first. For nearly every site I’ve worked on, the biggest rock is image size.

Image Compression Techniques

First, start with image compression. Once you’ve figured out the proper format for the image you’re creating (such as a .png or .jpg), you’ll want to compress that image before you upload it to your site. But if you think all compression is created equally, you’re wrong.

When you edit an image using a tool like Photoshop, how you save or export the photo can make a huge difference in the size of the image. The goal with every image you add to your website should be to have the smallest image size possible while still maintaining the quality needed for the image.

Using Pixelmator to Resize an Image

Here is an example of a photo downloaded from pixabay.com. I used Pixelmator, a Mac application similar to Photoshop, to edit the image in preparation for uploading it to WordPress.

image size compression
Base image:
1920×1280 px
300×300 res
514 kb

Then, I used Pixelmator to crop the image to 500×500 px.

v1-square
500×500 px
300×300 res
227 kb

Then I tried changing the resolution from 300×300 to 72×72 (screen resolution).

image compression technique
v2-square
500×500 px
72×72 res
100% export
241 kb

Next, I did the export at 80% quality.

image compression tips
v3-square
500 px
72×72 res
80% export
62 kb

I had multiple takeaways from this test path.

  • I was surprised that changing the screen resolution caused the file size to go up.
  • Even at 80% quality and 72×72 dpi, the image looks damn near identical to the original.

Using ImageOptim to Resize an Image

For this test, I used the Mac app ImageOptim to resize the image for web. I started with a copy of the 500×500 px image from earlier.

image optimization compression
Original
v1-square

500×500 px
300×300 res
227 kb

I then used ImageOptim’s default settings to compress the image.

image size compression
Default compression
500×500 px
202 kb

Then, I activated the “enable lossy minification” settings:

image compression techniques

Which resulted in:

image compression lossy
Lossy compression
500×500 px
28 kb

The final result is an 87% savings in file size with virtually no loss in image quality.

Unfortunately, this isn’t an exact recipe that you can apply to every image on your site. Each image is going to behave differently. Especially as you work with different image types. You will need to experiment with your images to get the magic combo of height/width, resolution, file type, and export settings to get the best possible outcome.

Compressing Images Using WordPress Plugins

Aside from compressing images prior to uploading them, there are a number of services that can be used for image compression as you upload them to WordPress. Ewww and Imagify are both good examples. While these services don’t serve as a replacement for compressing your images before you upload them, they act as a safety net in situations where you may have multiple authors who aren’t as diligent about optimizing images prior to publishing.

Optimizing Image Display Size

OK, so now that we’ve looked at image compression, we’re going to talk about how to squeeze the last drop out of our image optimization process with properly determining the image display size.

When you’re building your website, you will eventually have to decide how big the images are going to display on your site. You may have a block of images for team members or companies you work with. You will probably also have a blog archive showing the featured image for each post. Again, you’re going to have to decide how big those images are going to display. One of the most common mistakes I see people make is uploading a larger image and then squishing it down to fit in the available display area.

Let’s start by looking at an example layout for a blog archive where the featured image is displayed on the left, with the title and excerpt on the right.

image display size example

The original featured image was created at 1200×630 px in order to match Facebook’s suggested shared image requirements. And that size may be perfectly fine to display on the individual blog post template. But, for the blog archive, the image display size is only 350×184 px.

Even if you’ve used the image optimization steps we walked through above, your 1200×630 px image is going to be around 90-100kb, while a 350×184 px image will weigh closer to 5kb.

Use Photoshop or another editor application to resize the image, keeping the proportions the same. Then, upload the resized image to your site.

Creating multiple sized images for each blog post or for each location where you may use the same image may sound tedious and feel like a lot of extra work, but when it comes to speeding up your website, it’s hard to argue with a 95% savings in file size.

In Closing

So there you have it. Spending time cleaning up your images will go a long way to speed up your website, and make Google happy at the same time. It’s a win no matter what angle you’re coming from, so get to work giving your images a little extra attention.

Have anything to add? What are your tips for increasing page speed? We’d love to know. Tell us on Twitter!

And if this post was helpful for you, we’d love for you to share it with your colleagues!

Want more insightful articles like this delivered straight to your inbox? Type your email below! (We hate spam, too, so we’ll never send you any.)

Receive Our Monthly Newsletter

More Posts by John Hawkins:

Kubernetes, Delivered

Deploy your first app within 24 hours. Book a demo to get started.