The Best Way to Optimize Images for Your Website. With No Tools. In No Time.

In a hurry? Download this post as PDF (no email address required)

Quick question: Are you sure the images you use don’t actually harm your website?

Do you know how to find out if they do?

Because if the images are too big in size your website will load slower.

This is not only frustrating for your visitors, but also hurts your visibility in search.

I know, I know.

As if it wasn’t enough to come up with great content and find those images! Now you need to also make sure they are optimized.

Dang.

Of course you drag it! Every post you read on this topic tells you to resize your images in a photo editor. And that:

  • takes time (open the editor, open an image, resize, save, repeat)
  • leaves you uncertain whether what you did was enough.

Well, I have good news for you.

With this simple trick you can optimize all the images for your web page or post at once. Without any tools. Within just a couple of minutes.

Shall we kill two birds with one stone?

Open one of your posts or a page where you use a lot of images and follow my lead to give it some serious speed boost.

In a hurry? Download this tutorial as PDF for later.

The best way to optimize images for your website

In short, it goes like this:

  1. Finalize your blog post or web page adding the images without optimizing their size and publish it.
  2. Test your newly published post with Google PagesSpeed Insights.
  3. Download the folder with optimized images.
  4. Exchange the images without even touching your blog post (I have a trick for this, too).

Step 1: Analyze your page with Google PageSpeed Insights

  • Go to Google PageSpeed Insights, enter a url to the page you’d like to optimize images from and press “Analyze”.
  • You’ll see the results in a couple of seconts. Look at the sections “Should fix” (red) or “Consider fixing” (yellow) and see whether “Optimize images” is one of the suggestions.
  • If it is, click “Show how to fix” right underneath.

I’ve analyzed one of my posts, and it scored 63 on mobile and 69 on desktop out of 100. Not great. Two of the images need some optimization.

Step 1: Analyze your page and check if your images need to be optimized
Step 1: Analyze your page and check if your images need to be optimized

Step 2: Download optimized images

  • In the “Mobile” tab, scroll to the bottom of the page to the point where it says “Download image, JavaScript, and CSS resources for this page”. This is the folder that has the optimized images.
Download the folder with images already optimized for you.
Step 2: Download the folder with images already optimized for you
  • Click on the link and save the zip folder (it will be called “optimized_contents.zip”) to your hard drive.

Note: There is an identical link in the “Desktop” tab. Yet, I’ve discovered that if you download the images there they will be … smaller. Actually, too small, as if they were optimized for mobile. So make sure you download the images from the “Mobile” tab.

  • Unzip it and open the folder “image”.

Tada! Here are your images optimized by the master Google himself, so you can be sure it doesn’t get better than that.

***

How long did it take you? One minute, two minutes? Certainly faster than resizing every single image separately in a photo editor.

Now let’s exchange these images real fast without changing anything in the post itself.

How to update the images without changing the post itself

The idea behind it is to use the same file names for the new (optimized) images and simply overwrite the original images. This way the original references to the images will still work and you won’t have to change anything on the page.

How would you usually exchange an image?

You’ll probably scroll to the place in your post where the image needs to be inserted, delete the old image and insert the new one, right?

Well, that’s the usual but quite cumbersome way to do it. Especially if you have to exchange multiple images scattered all over your post.

There is another, much faster way to do it.

Look at this:

<img src="https://mywebsite.com/my-pretty-pic.jpg" />

Every time you insert an image, this line gets pasted in the code of your post. In human language it means “Load the image from the source so and so”.

This is how images get inserted in your post: There is a reference pointing to a place and a file that needs to be loaded.

So if you replace the current my-pretty-pic.jpg file with the new (optimized) my-pretty-pic.jpg file you don’t need to change this reference, but new (optimized) image will be used in your post.

Now, how could you do this real fast?

The ultrafast way to do it which will literally take a second would be to connect to your server using FTTP access, find the folder where the images of this particular post are stored and copy over the new (optimized) images overwriting the original ones.

So if you have FTP access to your web site and are not afraid to use it, do that, and you can jump strait to the step where you need to clean the browser cash.

Otherwise, this is how you can bulk-update the images for example through a WordPress interface.

Bulk-update images on your website in a jiffy

In short, it goes like this:

  1. Delete old images from your media library.
  2. Upload new images to the post but don’t insert them in the post.
  3. Detach featured image from the post.
  4. Delete featured image from your media library.
  5. Set new (optimized) image as featured image.

Note how featured image gets a special treatment. More on this later.

This is how it’s done in WordPress, but you can do it equally faster in any other system.

Step 1: Remove original images from your media library

Note: It’s a good idea to have a backup of the original images in case something goes wrong. If you are optimizing images for an old post and don’t know whether you have the original images on your hard drive, save them from the post to your pc before you exchange them.

  • Open your Media Library.

Do not upload the new image straight away but first do this:

  • In the Media Library, identify the images you will be replacing. For this, check the folder optimized_content/image you’ve downloaded.
  • Except of the featured image, delete those images from your Media Library permanently.
    • To delete multiple images at once, click “Bulk Select”, select the images and click “Delete Seleected”.
06-delete-all-images
Step 1: Delete original images from the Media Library

Step 2: Upload new (optimized) images all at once, except of the featured image

  • Open your post in editor and press “Add Media”. It is important to upload new (optimized) images not through Media Library but through this dialog. This way they get saved in the same folder as the original images and the links to the images will still work.
  • Do not press “Insert into post” but simply close the dialog.

The references to the images and all the image attributes (alt and title tags) are already in your post. They were created the first time you added the images. So you don’t have to insert anything again.

Upload all the images in bulk and close the dialog (do not press "insert into post").
Step 2: Upload all the images in bulk and close the dialog (do not press “insert into post”)

That’s done.

Now, let’s replace the featured image.

You can’t simply delete the featured image and upload the new version like with the other images, because there is a an extra dependency between the featured image and the post. So you’ll have to resolve this dependency before replacing the featured image.

This is how it goes.

Step 3: Remove old featured image

  • Click “Remove featured image”.
Step 1: Click "Remove featured image" in the post editor.
Step 3: Click “Remove featured image” in the post editor
  • Click “Set featured image”.
  • Find the original featured image in your Media Library and do this:
    • Copy the title of the image (Ctrl+C) so that you don’t have to type it again.
    • Delete featured image permanently.
Step 2: Copy title and remove.
Step 2: Copy title of featured image and remove it

Step 4: Upload new (optimized) featured image

  • Click “Upload files” and upload the optimized featured image from optimized_content/image folder. Paste the title you just copied and click “Set featured image”.
Step 3: Upload optimized image, paste title and click "Set featured image".
Step 4: Upload optimized image, paste title and click “Set featured image”

Step 5: Clear cashed images and files from your browser cash

Because the old and new (optimized) images have identical file names, your browser is still displaying the old version of the images. You need to clear the cash so that the browser reloads the images and you can verify the changes.

This is how it’s done in Chrome:

  • Press Ctrl+Shift+Del.
  • Alternatively, click the “⋮” icon in the top right corner and select Setting -> More tools -> Clear browsing data.
  • Make sure the only checkbox checked is “Cashed images and files”
  • Click “Clear browsing data”.
Step 4: Clear cashed images and files.
Step 5: Clear images and files from browser cash

If you don’t use Chrome, this article will show you how it’s done in any other browser.

Step 6: Save the changes

Preview your changes to doublecheck whether all the images are in place and save the changes.

Step 7: Test your pages with Google PageSpeed Insights again to see the speed improvement

For my post, the speed on mobile improved from 63 to 74, and on desktop from 69 to 80. Not bad for a couple of minutes of effort.

Step 7: Test your updated page to see the improvement.
Step 7: Test your updated page to see the improvement

Original images vs optimized images: Visual difference

Can you spot the difference between original image and an optimized one? I honestly can’t. But your visitors will notice the difference. And so will search engines.

original-vs-optimized-featured
Original image (left) vs optimized image (right)

Here’s once again a summary of all steps.

Summary

  1. Let Google optimize your images for you.
    • Publish your post/page as usual.
    • Test it in Google PageSpeed Insights
    • Download the folder with optimized images Google will create for you.
  1. Exchange all images (except the featured image) at once:
    • Delete old images from your media library.
    • Upload new images to the post but don’t insert them and close the dialog.
  1. Exchange featured image:
    • Remove featured image in the post editor.
    • Delete featured image from your media library.
    • Set new (optimized) image as featured image.
  1. Clear images and files from your browser cash.
  2. Preview and save the changes.
  3. Test your post/page with Google PageSpeed Insights again.
  4. See an astonishing improvement in speed of your web page.

Want to use this method in the future? Download this tutorial as PDF.

P.S. I just optimized this very post using this trick. It took me 4 minutes to optimize and exchange 10 images. Speed boost: 30%!

Leave a Reply

Your email address will not be published. Required fields are marked *