How To Optimize Images For Best Quality and Web Performance

Images on a blog are like a double-edged sword. On one hand, they provide immense benefits to your blog such as increased user experience, makes content visually appealing, further explains your content in a way that text simply can’t, and improves SEO performance

However, these benefits come at a major cost if you fail to optimize your images properly. If an image isn’t optimized you can experience negative effects such as slower site speed, increased page loading time, and poor SEO performance.

But don’t you worry, since you’re here your blog won’t have to suffer from the negative effect of using images. That’s because I’ll be teaching you how to properly optimize images for the web. The steps that I’m about to outline can be applied to images that you’re about to upload as well as existing images that are currently affecting your blog in a negative way.

How To Optimize Image Size For Web

Table of Contents

Determine The Ideal File Size For The Image

  • For Regular images that would be placed within your content, you should aim for an overall file size that is below 100kb.
  • For banners and hero images that need to be very detailed, the goal will be 250kb – 300kb.

Determine The Ideal Image Dimensions For In-Content Images

One method of optimizing an image for your blog is to reduce its size by adjusting its dimensions (width and height). Stock and other high-quality images have very large dimensions like 4919 (width) x 3280 (height).

To properly optimize these images you will need to know the ideal width and height values to reduces them to. A good rule of thumb is to use the width of your content.

To determine the width of your content you can use a ruler extension on chrome or the developer tools of your browser. 

Using The Page Ruler Redux Extension on Google Chrome

Step 1: Install page ruler redux

Using The Page Ruler Redux Extension on Google Chrome Step 1

Step 2: Navigate to a page on your blog that you would like to add an image to and find a full-length paragraph. 

Using The Page Ruler Redux Extension on Google Chrome Step 2

Step 3: Click on the ruler icon in the extensions menu. 

Using The Page Ruler Redux Extension on Google Chrome Step 3

Step 4: Click and drag your mouse pointer from the first letter in the paragraph to the last letter.

Using The Page Ruler Redux Extension on Google Chrome Step 4

Step 5: Record the width of your paragraph which is located in the ruler redux top bar.

Using The Page Ruler Redux Extension on Google Chrome Step 5

Using Browser Developer Tools To Determine Image Dimensions

Step 1: Open an already published page on your blog.

Using Browser Developer Tools To Determine Image Dimensions Step 1

Step 2: Right-click anywhere on the page and select inspect. You can also use the keyboard shortcut CTRL + SHIFT+ I.

Using Browser Developer Tools To Determine Image Dimensions Step 2

Step 3: Click on the “select an element icon” which is located at the top left of the inspect window.

Using Browser Developer Tools To Determine Image Dimensions Step 3

Step 4: Hover your pointer over a paragraph element. You will know that it is a paragraph when you see the letter “P” and in the box.

Using Browser Developer Tools To Determine Image Dimensions Step 4

Step 5: Record the width of the element which is the first number that appears above the color hex code.

Using Browser Developer Tools To Determine Image Dimensions Step 5

Now that we know the overall image size that we are aiming for and the maximum width that our in-content images should be, it’s time to optimize them. 

Optimize The Image With Photoshop 

Step 1: Start by locating your image then right-click on it and click on “open with photoshop”.

How To Optimize An Image With Photoshop Step 1

Step 2: In photoshop click on “file” then hover over export then in the slide-out menu select “save for web”. Alternatively, you can use the keyboard shortcut ALT + SHIFT + CTRL + S on Windows.

How To Optimize An Image With Photoshop Step 2

A new “save for web” window will appear in photoshop. Within this new window, there are a few options that you need to pay attention to. 

How To Optimize An Image With Photoshop Step 3

They are the following: 

  • Optimized file format
  • Compression quality (JPEG only)
  • Image dimensions
  • Overall image size

When it comes to optimizing images for your blog these are the file formats that you should consider: 

  • JPG or JPEG for normal images with a lot of detail
  • PNG-24 for transparent images
  • GIF for animated images

Here we will divide the following steps based on the file format because each optimized file format will give you different optimization options.

Optimizing a JPG/JPEG Image With Photoshop

Step 1: Let’s start with JPEG images. From the save for web window select JPEG from the optimized file format dropdown menu. 

Optimizing a JPG/JPEG Image in Photoshop Step-1

Step 2: Next set the compression quality to high and pay attention to the overall image size. 

Optimizing a JPG/JPEG Image in Photoshop Step-2

You’ll notice that this simple change has greatly reduced the size of the image.

Step 3: Make sure the optimized box is checked and progressive and embed color profile are unchecked.

Optimizing a JPG/JPEG Image in Photoshop Step-3

Step 4: Make sure that the “retain original image proportions” option is enabled 

Optimizing a JPG/JPEG Image in Photoshop Step-4

Step 5: Change the dimensions of the image to a width and height that is appropriate for the purpose of the image.

Optimizing a JPG/JPEG Image in Photoshop Step-5

Let’s say you’re optimizing a hero image then an image width of 1,200px is perfect.

For images that are embedded within your text, the width should be set to the width of your content. 

When optimizing JPG/JPEG images if you are able to achieve a smaller than usual image size after changing the image dimensions, you can return to the optimization quality and increase it to achieve better image quality. 

Step 6: Click on the “save now” button to finish optimizing your image.

Optimizing a JPG/JPEG Image in Photoshop Step-6

Optimizing a PNG Image With Photoshop

Step 1: Select PNG-24 from the drop-down menu.

Optimizing a PNG Image Step-1

Step 2: Make sure transparency is selected.

Optimizing a PNG Image Step-2

Step 3: Change the image dimension until an adequate image size is achieved. When you’re done click on save now.

Optimizing a PNG Image Step-3

Optimizing a GIF Image With Photoshop

Step 1:  Select GIF from the drop-down menu. 

Optimizing a GIF image Step-1

Step 2: Set the color reduction algorithm to selective.

Optimizing a GIF image Step-2

Step 3: Set the dither algorithm to diffusion.

Optimizing a GIF image Step-3

Step 4: Colors range from 2 to 256 the lower the color value the smaller the image size. Set the color value based on how colorful the gif you are working with is. 

Optimizing a GIF image Step-4

Step 5: Set the image dimensions based on where you are displaying it.

Optimizing a GIF image Step-5

Step 6: Adjust the color range and image dimension until you are satisfied with both the image quality and size.

Optimizing a GIF Image Step-6

Optimize The Image With Gimp 

Step 1: Locate the image that you would like to optimize, right-click on it and select open with GIMP

How to optimize an image with Gimp Step-1

Step 2: In the top menu click on the “image” option and then select scale image.  

How to optimize an image with Gimp Step-2

Step 3: Ensure that the image proportions are linked (Put side by side images)

How to optimize an image with Gimp Step-3
Linked
How-To-Optimize-An-Image-With-Gimp-Step-3a
Unlinked

Step 4: Change the width of the image to suit the purpose of the image.

How to optimize an image with Gimp Step-4

Step 5: Click on scale to confirm changes 

How to optimize an image with Gimp Step-5

Step 6: Zoom In to the image after scaling is complete.

Step 7: In the menu above click on file and then export as. 

How to optimize an image with Gimp Step-7

Step 8: Within the new window select an export destination and click export.

How to optimize an image with Gimp Step-8

Step 9: A smaller export image window will open. Within this window select show preview in the image window.

How to optimize an image with Gimp Step-9

Step 10: Move both windows from in front of the image window to view the preview.

How to optimize an image with Gimp Step-10

Step 11: Adjust the quality slider until you have achieved an image size and quality that you are satisfied with and click export to finish optimizing your image.

How to optimize an image with Gimp Step-11

Optimize The Image With ShortPixel

Step 1: Download the ShortPixel plugin and activate it. 

How to optimize an image with ShortPixel Step-1

Step 2: Enter your email address and request a key

How To Optimize An Image With ShortPixel Step-2

Step 3: Navigate to the API key tab or check your email to get your API key.

How to optimize an image with ShortPixel Step-3

Step 4: Head back to your WordPress dashboard hover your mouse pointer over settings and click on ShortPixel.

How to optimize an image with ShortPixel Step-4

Step 5: Enter your API key in the space provided and click on validate 

How to optimize an image with ShortPixel Step-5

Step 6: For and express install leave the default settings as is and click on save and go to the bulk optimizer. If you would like an in-depth guild on setting up that plugin watch the video below. 

How to optimize an image with ShortPixel Step-6

How To Configure The ShortPixel Plugin

Step 7: Click on start bulk optimizing to optimize your current media library.

How to optimize an image with ShortPixel Step-7

Step 8: To optimize new images just upload them to your site and ShortPixel will automatically optimize them when after upload.

If you’re on the free plan and have a ton of images to optimize immediately, that is more than 100 images. I recommend that you upgrade to the short plan which starts at $4.99per month and offers 5000 images per month. Alternatively, you can a one-time credit bundle which starts at $9.99 with 10,000 images.

Optimize The Image With ShortPixel Web App

Step 1: Head on over to the ShortPixed Image Optimization web app.

How To Optimize An Image With ShortPixel Web App Step-1

Step 2: Choose one of the following compression levels (Lossy, Glossy or Lossless)

How To Optimize An Image With ShortPixel Web App Step-2
  • Lossy optimization is the most aggressive one of the three. Lossy optimization provides the smallest image size while maintaining the best balance between optimization and picture quality. 
  • Glossy is a midground between Lossy and Lossless. Images optimized using Glossy will result in both a better quality image and a larger image size than when using lossy.
  • Lossless Provides the best image quality with indistinguishable differences to the original file. However, the image size is barely reduced.

Step 3: Click on the upload box to open the file explorer.

How To Optimize An Image With ShortPixel Web App Step-3

Step 4: Select the images that you would like to optimize and click on open. 

How To Optimize An Image With ShortPixel Web App Step-4

Step 5: When they have finished optimizing click on “download file”.

How To Optimize An Image With ShortPixel Web App Step-5

Final Thoughts on Optimizing Images

The best way to optimize your images if to first use software like photoshop to resize and reduce the quality and save it for the web. Then to upload it to your WordPress website and let a plugin like ShortPixel further optimize it using lossless compression.

If your blog is hosted with Siteground’s Managed WordPress hosting there is no need to use a plugin like ShortPixel since Siteground provides a builtin optimizer that automatically optimizes your images upon upload. 

Other Interesting Articles