Optimize Images Correctly Using Photoshop

I have a confession to make… Whilst I have a long-standing history in Photoshop design and love creating great outcomes and tutorials, until recently I simply didn’t have that much knowledge about saving images for the web.
After learning to optimize images correctly using Photoshop the average size of my image files is less than 1/3 of what it was, with no noticeable loss of quality.
This is great news for you guys (as tutorials and pages on this blog should load considerably quicker) and it’s great for me as my bandwidth and hosting costs should plummet.
So… if this is something you haven’t paid due attention to in the past, follow this incredibly simple guide to optimize your images and not take up so much unnecessary disk space.
How to Optimize Your Images For the Web

First off, here is the image that we’ll be working with.
It’s an older image from a past tutorial of mine at PSDFAN:

Now, in the past I logically saved via file>save as:

After then choosing my file name and .jpg as the file type, I was asked to choose a ‘quality’ setting for the image. I know that many of our authors save in 12/12 quality, which is HUGE. However, even at 8, which is still ‘high quality’ (but the lowest you want before your image degrades too much) you’ll see there are file size problems:

You can see that the file size is still pretty huge, with this single image being over 200kb!

Optimize Images Using Photoshop’s ‘Save For Web’ Function

A better solution is to use Photoshop’s inbuilt ‘save for web’ option.
You can find this under file>save for web & devices.

A pop-up window will appear. Now don’t worry, there may seem like a lot of settings at first. However, you don’t need to worry about many of them:

All you really need to pay attention to is the upper-right options. Just check that your image is being saved as ‘.jpg’ and that the quality is ‘high’.
Under ‘quality’ you can also input a manual setting. The default is ’60′ which is what I used for my web-ready images. If you have an image that needs to look particularly sharp then of course you can go higher. This will still be a better option for the web than the regular method of saving images (which is meant more for print and offline uses).

As you can see, the new ‘saved for web’ outcome is just 64kb. That’s just 30% of the file size of the original ‘save as’ image!

Start Optimizing Your Images Today!

If you’re not already optimizing your images for the web then start today.
You’ll quickly get into the habit of it and your server, clients or blog readers will thank you!