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.
- Change the image’s pixels per inch to 72
- Resize the image so it’s the exact size you need
- 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.
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.
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.
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.
Now you’ve saved your images optimized for web using the three most common ways to adjust image quality and file size.