Optimizing Your Images for WordPress

Last updated: November 4, 2020
You are here:
Estimated reading time: 5 min

This article describes how to optimize your images to use on your WordPress website.

When you test your site for performance/speed in sites like https://gtmetrix.com/ you will generally get results within many categories, one of the first ones is for images (Optimize Images). If your site images are not optimized properly your score will go down.

So what IS image optimization? Basically it means to modify your image file in size, resolution and compression. This will bring down your file’s size and make loading of your pages faster (even though WordPress has recently added lazy loading which means it only loads what is being seen not the entire page).

You can watch the video to see how the optimization goes or read on for the text version which has a few more details.
Optimize your images for WordPress walkthrough

What type of image file should I use for WordPress? A .jpg or a .png file?

The rule of thumb I used to follow was that if the image was a photograph you used a .jpg file and if it was some type of art or illustration you used a .png, but recently I heard that unless you need transparency for your image (png’s support transparency) you’re better off using a .jpg. One thing though, sometimes your image might be too blurry in .jpg format and you might want to use the png version (for backgrounds for example).

Resizing your image with WordPress

You might be wondering why not use WordPress itself to resize the images? You can definitely do that and I will show you how here. However, I prefer to have my images optimized before I upload them to WordPress. WordPress will generate several files (different sizes) of your image and if its not optimized it will make these files a larger size than what is optimal.

From the dashboard, go to Media -> Library.

In your dashboard click on Media > Library

Click directly on the image to open it up.

Click on the image to open the dialog

In this screen you can see the image and some of the details. The ones that interest us are the file size and the dimensions. This particular image is 1024 pixels by 637, so we could resize it to 800 pixels or 500. In order to do the edit click on the “Edit Image” button to go into the WordPress image editor.

Click Edit image to go to the editor

On the right sidebar you see the original dimensions and then a box to fill in the new dimensions you want for your image. Click on “Scale” for the changes to take effect. Now it will seem like nothing has happened until you check on “Original dimensions” and it will show your new size. In order to use your size you will have to insert your image in a WordPress post/page and when inserting the image you can choose the Image Size as “Full Size”.

Choose a size and click “Scale”

Insert your image through the image block of the editor.

Choose an image block

Choose the “Full Size” option on the dropdown list for Image Size.

Choose Full Size from the list

Now this is one reason I don’t like to use WordPress to resize my images, because you can only use this new “original file”. The other image files are kept in the wordpress “uploads” folder but from this list there is no way to choose which one of the files you want. You might be able to use a plugin to create a new image size for your posts but then when you regenerate the images all the images would generate this version of the size which is not ideal.

When in doubt, use other tools to resize your image files.

Resizing your image with Preview (Mac)

You know how when you are using a Mac you can click on an image or a PDF and have it open automagically? It’s a program called Preview. Preview comes with some other tools for image editing (nothing too fancy, just the basics) that will let you among other things resize your images.

Once you have your image open in Preview, choose “Tools -> Adjust Size…” from the top menu.

Click on Tools > Adjust Size

From the dialog box you can change either the width or the height of the image. The software will change the other measurement automatically (that’s why you see the little lock next to width and height it means maintain the image ratio). In addition to changing the size you should change the resolution to 72, this means 72 DPI (dots per inch). This changes the file size slightly but its worth it. Click “OK” to finish. Note that you still need to compress this file so you’re not done yet!

Change the values then click OK

Resizing your image with online tools

I did a search online and found a site that can help you resize your images. It’s https://ezgif.com/resize.

You start by choosing the file from your computer that you want to resize. After choosing the file click on the blue “Upload!” button to start the process. You will be shown the options in the next screen.

Choose a file to resize

On the next screen you will see the resize option already selected on top of the image. Underneath the image you will be able to see the original information of your file ( file size, width/height, type). Further down there are boxes to change the width or the height. Change one of them and leave the other one empty. This tells the application to keep the image size ratio when resizing the image.

To go ahead click on the blue button that says “Resize image!”

Change width or height and click “Resize image!”

Below that image will appear the new, resized image. Underneath the image you can see the new file information and how much (percentage) the file was reduced by (in this case -58.07%). In order to save your resized image click on the disk icon below the image at the bottom right. Remember you still need to compress this resulting image to optimize it fully.

Click on the disk icon to save the file

Another online option to resize images is the site https://resizeimage.net/

Converting your png file into jpg

If the file you need to optimize is a png file (png extension) and the image doesn’t need to be transparent you can go ahead and convert it to a jpg file which tend to be smaller and its the same quality.

I found two resources that worked well online: Png to jpg -> https://png2jpg.com/ and Online png to jpg conversion -> https://ezgif.com/png-to-jpg both free to use and relatively easy as well.

PNG to JPG

Online png to jpg conversion

Compressing your jpg files with online tools

I found two resources (amongst many) that you can use to compress your JPG files. Compress JPEG images -> https://compressjpeg.com/ and TinyJPG -> https://tinyjpg.com/. I really like the first one because it gives you an option to fine tune the quality of the compressed JPG and this helps a ton with image size!

Compressing JPG

TinyJPG has a really cool UI and I had fun compressing the files with it.

TinyJPG

How to tell if my file is a PNG?

Sometimes your computer might save the files without an extension and then you don’t know what type of file you have at all!

If you are on a Mac open your finder window, find the file and click once on it. In the description pane on the right it will tell you what type of file it is. If for some reason you can’t tell this way, right click on the file and choose “Get Info” from the menu, that will open up a small panel that will tell you what format the file is in.

For Windows users I’ll research it and post it later. Ideally you’d view the file on the Windows Explorer and click on it once, it should give you information on the file.

Resources

Resizing Images

Resize by ezgif.com -> https://ezgif.com/resize
Online Image Resizer – > https://resizeimage.net/

Png to jpg conversion

Png to jpg -> https://png2jpg.com/
Online png to jpg conversion -> https://ezgif.com/png-to-jpg

Png to jpg compression

Compress JPEG images -> https://compressjpeg.com/
TinyJPG -> https://tinyjpg.com/

Images downloaded from https://pixabay.com/

Thank you for reading.

Was this article helpful?
Dislike 0 0 of 0 found this article helpful.