How to reduce image file size by up to 70%

Share on twitter
Share on facebook
Share on linkedin
Share on reddit
Share on pinterest
Share on twitter
Share on facebook
Share on linkedin
Share on reddit
Share on pinterest


This tutorial will teach you how to increase site speed by reducing image file size by up to 70% in three easy steps using Photoshop and lossless image compression.

# Full Post

As I said in my previous post, site speed is typically one of the largest, if not the largest, SEO opportunity I usually uncover with sites that I work with.

Image optimization is typically a big reason why sites run slowly, and individual images are often needlessly large.

This tutorial will show you how to significantly reduce image file size, and thus increase speed across your site. In case you need to keep a database in your computer and want to reduce the space it is using, check this 7zip guides.

Required tools

Step #1: Save the initial image to your local computer

For this tutorial, I’ve downloaded a large example image from an e-commerce site and saved to my local computer.

Beginning example image for reducing file size tutorial
Save the image to your local computer.

The image file size was reported by Screaming Frog as being ~757 Kilobytes in size (anything over 100 kilobytes is considered fairly large).

An initial save down to the local computer (at maximum resolution/quality) showed the image file as being ~739 Kilobytes, which we’ll use as our baseline.

Beginning example image file size is 739 kilobytes
Notice the file size.

Step #2: Use “Save for Web” for all web images (jpg, gif, png, ico, etc.)

Rather than simply using the traditional “Save As” feature, I recommend using “Save for Web.”

Additionally, I recommend selecting the “High” quality setting as well as selecting ”Progressive”” setting for all JPG file saves.

PhotoShop Save for Web functionality
Make sure to select the Progressive option using Save for Web.

This will significantly reduce file size as the focus is less on ensuring print-friendly imagery, and more on producing web-friendly images.

As you can see below, even at a “High” quality threshold, this method reduces the size of our original 737 Kilobytes image to 319 Kilobytes (57% reduction in file size).

Depending on the necessary detail for the image, using “Medium” quality can further reduce the size to 184 Kilobytes without too drastically impact image quality (75% reduction in file size).

Additional tip: Reducing image dimensions such as height and width can also have a dramatic impact on file size. As a rule, the wider and taller an image is, the larger the size.

If an image doesn’t need to be very large, ensure that the height and width of the image file is aligned well to the actual display resolution on the web (ex: don’t size an image as 1200 pixels wide if the largest web display is only 500 pixels wide).

Step #3: Use a lossless image compression tool

After saving image for web, the final step in the process before uploading imagery to Websphere Commerce will be to utilize a lossless image compression service such as to reduce the file size further by stripping out any unnecessary image meta-data that Photoshop keeps around.

The image will lose no quality in this step and only the file-size should be reduced.

From the previous step, the image compression tool further reduced the file size of our image:

  • Image saved for web at “High”” resolution (additional 33% reduction in file size):
      • New size =

    214 kilobytes

  • Image saved for web at “Medium” resolution (additional 4% reduction in file size):
      • New size =

    176 kilobytes

Final results of image file-size reduction after lossless compression
See the additional file-size savings.

Final results = 71 to 76% reduction in image file size

After going through to process of appropriately saving the image file and running through an image compression tool, I was able to reduce image file size by over 70%!!!

Image file size after step #1:

  • Original image file size: 739 Kilobytes

Image file size after step #2:

  • Image file size after “Save for Web (High-Quality resolution):” 319 Kilobytes
  • Image file size after “Save for Web (Medium-Quality resolution):” 184 Kilobytes

Image file size after step #3:

  • Image file size after compression (High-Quality resolution): 214 Kilobytes
  • Image file size after compression (Medium-Quality resolution): 176 Kilobytes

Net results:

  • Net file size changed (High-Quality resolution): 71% reduction
  • Net file size change (Medium-Quality resolution): 76% reduction

Now time to try it for yourself!

Jacob Stoops

Jacob Stoops

Long-time SEO and podcast host. Senior Manager at Search Discovery. Husband. Dad. Mob movie aficionado. @jacobstoops