Optimizing Your Images for WordPress

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/ or https://tools.pingdom.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).

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.

Click directly on the image to open it up.

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.

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”.

Insert your image through the image block of the editor.

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

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.

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!

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.

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!”

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.

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.

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!

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

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.

Mac Users use Squash for Image Compression

For Mac users I have found a nifty tool to help me compress image files and also convert them from PNG to JPG its called Squash. You just specify where you want your output files located and then drag the files into the black box and voila your files will be compressed!

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/
Squash -> https://www.realmacsoftware.com/squash/

Images downloaded from https://pixabay.com/

Thank you for reading.