Speed Up WordPress – How to Save Images Optimized for Web

Updated November 15th, 2017
Updated November 15th, 2017
Share this post:
Share on facebook
Share on twitter
Share on reddit
Share on linkedin
Share on pinterest
Share on digg
Share on stumbleupon
Share on pocket
Share on email
Share on print

One of the best ways to increase page load speed is to reduce file size of everything on your website. Saving images optimized for web is the lowest hanging fruit. Many websites have images that are far too large. The goal here is to reduce the file size of your images without losing too much image quality. Follow this tutorial to make sure your images are web-optimized. This tutorial uses Photoshop, but if you don’t have Photoshop, other image editors have very similar functionality although it may be named slightly differently.

If you already have images on your website that you want to compress without remaking them all check out this tutorial on WP Smush.

I’ve created a video tutorial of how to optimize images in Photoshop below. Further below you can read through the tutorial if you prefer.

3 Ways To Web Optimized Images In Photoshop

There are three ways you can optimize any image you’re saving for the web.

  1. Change the image’s pixels per inch to 72
  2. Resize the image so it’s the exact size you need
  3. Save the image using the “Save for Web” option and choose ‘medium’ or ‘low’ quality

Adjusting Pixels Per Inch

With the image you want to edit open in Photoshop open the “Image” menu and choose “Image Size…”. In the Resolution field you will see how many pixels per inch your image contains. 72 is the default for the internet, so set the resolution to that number.

Images Optimized For Web - Change Image Size
Change the image size and resolution to reduce the file size of the image.
Images Optimized For Web - 72 PPI
For the web an image just needs to be 72 PPI.

With the “Image Size…” dialog box still open you can adjust the width.

Adjusting The Width Of An Image

Make sure the “Constrain Proportions” option is checked near the bottom of the dialog box. Then change the width of the image to the width you need on the website and the height will automatically change as well. If you prefer you can change the height instead.

Images Optimized For Web - Change Image Width
Make the image only as wide as you need on the website.

Most of the images I save for the web are 450 pixels wide.

Once you have those settings as you need them click on OK. If you click OK and you don’t like the change you can easily undo it by going to Edit > Undo. In Photoshop, you can only undo the last action via the edit menu. If you need to undo more actions you’ll have to go to the Window menu and open the History panel. You can undo many more recent actions in the History panel.

Save Images Optimized For Web

Next, click on File and click on Save For Web. That will open the Save for Web dialog box where you can adjust the image quality further.

Images Optimized For Web - Save For Web Option
Saving images for web makes the file size smaller and leads to faster page speeds

PNG images are the highest quality web images that allow transparency. If you don’t need transparency in your image choose JPEG as the image type.

Under the JPEG image type you can adjust the quality using a simple drop down menu. For the web choosing Medium or Low is the best and often the drop in quality is not noticeable.

Images Optimized For Web - Choose Image Type
Choose the right image for the application. I stick to JPG and PNG. I use PNG when I need transparency. If there’s no transparency JPG usually leads to smaller file sizes

Now you’ve saved your images optimized for web using the three most common ways to adjust image quality and file size.

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email

Leave a Reply

Your email address will not be published. Required fields are marked *

Do NOT follow this link or you will be banned from the site!