How to optimize images for website speed

Your website needs to look professional if you want clients to sign up to work with you through it. You’re expected to have big, beautiful photos for your blog posts. High-quality photos can be huuuuge in file size, making your site load slow. And a slow site means visitors never come back.

In fact, a slow website can cause lower profits. 40% of people abandon a website that takes more than 3 seconds to load, and a 1-second delay in page response can result in 7% less conversions. And your site’s loading time also affects your ranking in Google, making it harder for people to find you.

So, let’s optimize images to speed up your website!

Resize your images

If you’re uploading photos in their original size, they can easily be 6000×4000 pixels. That’s much larger than it’ll ever be shown on your website, so the first step is to resize them. To find out exactly how many pixels wide your images need to be, right-click your image in Chrome and hit Inspect Element. Mouse-over the <img> element in the code box that pops up, it’ll show the image size in a tooltip above the image. This works for blog post images, but also images in your sidebar or anywhere else.

You can set up WordPress to automatically resize your images to the size you need them for your posts. Using the Simple Image Sizes plugin, you can see the sizes your theme & plugins create and change them to the size(s) they need to be.

In most cases, your theme automatically uses one of these sizes for your images. If it doesn’t, you’ll have to resize your blog post images. For images outside of your blog posts, like in your sidebar, you’ll have to resize them as well.

You can resize your images in WordPress by going to the image in your Media Library, clicking Edit then hitting the Edit Image button. Enter the size you want to scale the image to, click the Scale button and then Save.

Of course you can also resize images before uploading them to your site.

Responsive images

Obviously your phone shows the images in a different size than your computer. You can tell the browser to load smaller images on smaller devices. In fact, you probably don’t even have to do anything, as it’s now coded into WordPress core and in most themes it’s already done. You can check (with Inspect Element, again) if your theme has a srcset attribute for your images. Usually it has many more sizes in the srcset, but it’ll look something like this:

<img src="original.jpg" srcset="original-800x600.jpg 800w, original-200x300.jpg 200w">

If your theme is actually not at all making your images responsive and you have to scroll from side to side to see the whole image on a phone, add this bit of CSS:

img {
max-width: 100%;
height: auto;
}

Compress your images

Images will over time take up the largest part of your website size. Image compression can reduce the size of your files, without losing quality. The Smush plugin strips hidden, unneccessary information from your images – making the file size of your images smaller and speeding up your website.

Setting this all up may take a few extra minutes, but WordPress and the plugins will optimize your images automatically for you after the initial set-up, and it’ll help a lot in speeding up your site and keep it running smoothly!