What Is The Best Way To Optimize Images For WordPress Website Step by Step Guide

In this article I will go over the best ways to resize images for WordPress using Photoshop, PhotoimactX3, resizeimage.net, and tinyjpeg.com. Over the years I have found that this way works the best for image optimize. Step by Step in Photoshop. Go to photos on you PC, right click on the mouse then go to open with Adobe Photoshop/ Quality 68%/Width 768/Height 768 then /Export/Export as or Alt+Shift+Ctrl+W/Enter.

First you well need your own or stock images. You will need 5 sizes for each image 1024 X 500 for the large background image. 1024 X 1024 for large images, 768 X 768 for medium large images, 350 X 350 for medium images, 150 X 150 for thumbnail images and if you are use png images for icons they will be 40 X 40.

You may ask why so many sizes for each image? If you use the image in more than one place on your WordPress website, then you will need more then on size. By planning, you can save time by only using the image where it is need it. Let’s go over this in more detail.

Background image will be the larges image these images needs to be 1024 X 500 1KB.

Featured Image must be 350 X 350 1KB.

Blog post images no bigger then 768 X 768 1KB.

Thumbnail images 150 X 150 1KB

All other images on web pages will be 768 X 768, 350 X 350, 150 X 150, and 40 X 40.

You can use any size under 1024 X 1024 if you keep the file size under 1KB.

One of the reasons I used these sizes is these are the sizes Elementor has set in their image widget.

When the website is done search GTMetrix.com it will tell of any images that will need to be optimize.

Also remember that most themes for WordPress presets the Featured Image to also show as the main image on the page. This causes the image to be scaled to a larger image. This is not good for the page speed.

You can use this code to remove the Featured Image from the post page.

.single-post .wp-post-image {

display: none;

}

.post .wp-post-image {

display: none;

}

Resize In Photoshop.

Now let look at how to resize images in Photoshop. There are 2 ways to open images in Photoshop. 1. Go to photos on you PC, right click on the mouse then go to open with Adobe Photoshop. Now that your image is in Photoshop. Go to file, export, export as. All images that do not have a transparent background stays at a JPG. As you can see with this image of Dingo the file size is 340.9 KB on the top lift. On the top right you can sit the file format to JPG or PNG, Quality need to be sat to 68%, Width to 768, Height to 768. Now on the lift you can see the file size is down to 143.5 KB, this file is still too big, and it needs to be under 100 KB. We will go over how to get the file size down even more with tinyjpeg.com later on.

Now that you are ready to export the image. Go to File Export/Export As. A new window will open. Here is where you will mark sure to set the size. Then hit the export all button.

Make sure you know where you are downloading the image to. Now just repeat the steps above for each size you will need for that image. Make sure you name the image with one of the sizes this make it easy to find.

I like to have a document file folder for the website I am working. In that folder I like to have a folder for Photos for that website, this make so much easier to find the images for that website.

The next way you can resize the images in Photoshop is open Photoshop / Create New. A new window will open. On the right of this window you will see untitled this is where you will name the image. Set the width to 768 or the size you need from the sizes I mentioned before. Set Height to 768. Set Resolution to 50. Set the background Content to white or Transparent. Then hit the Create button. Go to File / Place Embedded / Choose the image then hit Enter / adjust image then hit Enter. Go to file /export / export as. Or you can hit Alt+Shift+Ctrl+W. All images that do not have a transparent background stays at a JPG.

As you can see with this image of Dingo the file size is bigger at 395.4 KB on the top lift then in the first way I showed you. On the top right you can sit the file format to JPG or PNG, Width to 768, Height to 768. Now on the lift you can see the file size is down to 143.5 KB, this file is still too big, and it needs to be under 100 KB. We will go over how to get the file size down even more with tinyjpeg.com later on.

Then hit the export all button. Make sure you know where you are downloading the image to. Now just repeat the steps above for each size you will need for that image. Make sure you name the image with one of the sizes this make it easy to find. You can rent Photoshop for $59.99 a month or $19.99 a month, it will depend on which plan you choose.

Example: Dingo 350 X 350

Resize In PhotoImpact X3.

Now let’s resize images in PhotoImpact X3. Unfortunately PhotoImpact sX3 you have to go to the start menu find PhotoImpact X3 open it. When opened Click on the full edit in the window that is open. Go too File click open find your image you want to resize. As you can see this image file size is 5312 X 2988. This image was taking with a cell phone. Go to Adjust/Resize. A window will popup set width to 1024 and Height to 500 for a large size. Make sure to uncheck the box by Keep aspect ratio. Set Resolution to 50 then hit Enter or click ok. Now go to File/Save As. In the new window under Save in: Choose the file you want to save the image in. Under file name: name the image. I going to name this image hot rod make sure save as type is set as a jpeg then click OK hit Enter and now your file was saved. Remember that when you resize images to the box size in PhotoImpact X3 it will compress the image oddly. Repeat these steps for each image size you will need for your website or web page. Now for some reason I can not do any screenshot of PhotoImpact X3. So I used my cell phone.

Resize With resizeimage.net.

Use you Search browser and search resizeimage.net. Upload your image using the Upload an image button. Crop the image by seting in step 2. Mark the Fixed Aspect Ratio then set the size width to 1024 X Height to 500 then click the Change button. Under 4. Resize your image 1024 X 500. At the bottom of page under 7. Mark the Normal compression. Set Image quality, set it to 68%. Then click the the Resize Image button. Now download Image.

Now you have resized all your images with one of the images editing softwares. Let go to tinyjpeg to optimize the image to get them as small as we can before we put them on the website.

Optimize With tinyjpeg.com.

Search for tinyjpeg.com after the page load just drop and drag your images in tinyjpeg. Now all you have to do is download each image from tinyjpeg

Now you can see the new file size of the images. You can only put in 20 images at a time with the free version of tinyjpeg.net

You can see with the file Webp.net-resizeimage (3).jpg the file size is still over 168.5 KB. This is what you get with free version. All website images need to be under 1KB for best optimize. But if you do not have Photoshop or PhotoImpact X3 then you do have a free version you can use. Now for you that many own PhotoImpact but not X3 is the same software. Oh, by the way most of the time you can buy PhotoImpact for under $69.99

Thanks for taking the time to read my article. If you know of a better way to optimize, please leave a Comment below.