fbpx

What’s The Best Way To Optimize Images For Websites Step by Step

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.

Hot Rod
  • 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.

.post .wp-post-image {
display: none;
}

.single-post .wp-post-image {
display: none;
}

Resize In Photoshop.

Now let look at how to resize images in Photoshop. There are three ways to open images in Photoshop

1. Go to photos on you PC, right click on the image on your mouse then go to open with Adobe Photoshop. Now that your image is in Photoshop.

Now that you are ready to export the image. Go to File Export/Export As. 

Export As Phoyoshop 762 X583 Dingo

A new window will open. Here is where you will mark sure to set the size.

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.

Export 762X583

In the image above, 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.

Then hit the export all button. you can see this in the image below

We will go over how to get the file size down even more with tinyjpeg.com later on.

Make sure you know where you are downloading the image to.

Save As 762X583

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.

2. The next way you can resize the images in Photoshop is open Photoshop / Create New.

A new window will open. You can see it in the image below.

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.

Place Embedded Photoshop 752 X575

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.

Export As Phoyoshop 762 X583 Dingo

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.

Now that you are ready to export the image. Go to File Export/Export As. A new window will open.

Export 762X583

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.

Here is where you will mark sure to set the size. Then hit the export all button.

3. Same as step 1. Go to photos on you PC, right click on the image on your mouse then go to open with Adobe Photoshop. Now that your image is in Photoshop.

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.

We will go over how to get the file size down even more with tinyjpeg.com later on.

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.

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.

PhotoImpact X3 Resize

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.

PhotoImpact X3 Resize Window

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.

Resizeimage 1 762 X 596

Under 4. Resize your image 1024 X 1024. At the bottom of page.

7. Mark the Normal compression. Set Image quality, set it to 68%. Then click the the Resize Image button. Now download Image.

Resizeimage 2 762 X 566.jpg

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

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. You can also search for tinypng.com for your png image files.

Now you can see the new file size of the images below. Not bad all but one is under 100KB. You can only put in 20 images at a time with the free version of tinyjpeg.net. Now all you have to do is download each image from tinyjpeg. Just click the download beside the file.

Tinyjpeg download 762 X 566

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 for life.

You can rent Photoshop for $59.99 a month or $19.99 a month, it will depend on which plan you choose.

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

CloverSCListing

CloverSCListing

Leave a Replay

About Me

Stanley is the owner of Clover, SC Listing. He is the designer, content writer, backend editer ets. We have high moral values of integrity, honesty, compassion, fairness, generosity, respect and virtues! Advertise with us and you will not be let down.

Recent Posts

Weekly Tutorial

Sign up for our Newsletter

Close Menu