How to Optimize Images for Web & Better Page Speed

A picture may be worth a thousand words, but in an SEO-conscious world, pictures can weigh you down in your rankings. Follow these steps to optimize your images, keeping your image file size small and your page speed score big:

1. Use the right file format.

Using the right image format can save you BIG on file size! The two most common formats for images are .JPG (or .JPEG) and .PNG.

  • .JPG files are great for photographs, images with color gradients or images with a lot of different colors.
  • .PNG format is used for flat-color files like logos and images with transparent backgrounds.

Check out the dog picture below. This image saved as a .JPG is only 243k. If it is saved as a .PNG it is over 3MB.

dog sitting on beach

2. Resize your images.

The dimensions needed for your image can vary depending on the layout of your page. If the image is going to be used as a header which will go all the way across the screen, it needs to be around 1800 pixels wide. If it is going to be a small image in the body of the page, it can be much smaller. Use an image-editing program like PhotoShop if you have it, or you can use an online site like pixlr.com to resize your images.

You can also resize your image in WordPress from the Media Library. This method works great if you have already uploaded non-optimized images. Just keep in mind if you use the image in more than one place on your site, the new size will be shown for all of the instances the image is used. *If you are going to use this method, make sure to optimize your image first (Step 3).

To resize an image, go to your Media Library and click on the image you want to use.

Edit Image screen in WordPress

You can see in this window the file size is 243 KB and the dimensions of the photo are 1800 × 1736. Under the image, there is a button that says Edit Image.

Image Size screen in WordPress

Here you can enter the correct dimensions for the image. Since this is going to be a small image on the page you can size it down from 1800 x 1736 px to 400 x 386 px.  Enter 400 in the box where it says 1800 and WordPress will automatically calculate the width so the picture stays in proportion. Now click the Scale button.

The image has gone from 243k to 157k.

3. Optimize!

We have already brought the size of this file down quite a bit by using the proper file format and correct dimensions. The last step is to take your image and optimize it for the web. There are a few options on how to do this, but for this example, I will use a FREE online tool called Kracken.io. Open Kracken in a new window and click on the button that says Try Free Web Interface.

Below is a quick video of how to use Kraken.io to optimize an images step by step:

The original photo size was 668.44 kb, but this simple step reduced the size to 384.09 kb. That is a 57.46% savings, which can equate to faster speed and better rankings!

Now upload your perfectly optimized image to WordPress and watch you page speed numbers soar!

But I’ve already uploaded images without optimizing. What do I do now?

Not to fear, you can fix images already in WordPress. It will take a bit of time, but if the images are really dragging down your site you should seriously consider it.

In Google’s Page Speed Insights, you can run a report on a page and it will list the images needing optimized. Scroll down to the bottom of the page, there you can have Page Speed Insights optimize the images for you and download a ZIP file with the optimized images. From here you will have to go in to your WordPress Image Library and replace your images with the optimized versions.Download optimized images from Google Page Speed Insights

Ensuring you upload images in the proper file size and compressed to their lowest form can be time-consuming especially if you have an archive of images already uploaded to your website. However, if you start implementing these best practices with all new images you will surely see a difference in performance. Not enough hours in the day? Let Blizzard help with your websites page speed and image optimization contact us for expert help!