PSDFan Extra

Optimize Images Correctly Using Photoshop

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:

Optimize Images

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

Optimize Images

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:

Optimize Images

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

Optimize Images


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.

Optimize Images

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:

Optimize Images

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).

Optimize Images

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!

Optimize Images

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!

Thanks to Our October Sponsor

Thanks to our October sponsor Print Runner who enable us to keep providing great design content every day. Check them out for all your printing needs.


About the Author:

Tom is the founder of PSDFAN. He loves writing tutorials, learning more about design and interacting with the community. On a more interesting note he can also play guitar hero drunk with his teeth.

Leave a comment

4 Comments:

  1. Simple says:

    You mean that most of the designers use the Save as… dialog? I’ve used Save for web… from the first time and I thought that this is something that everybody does….

    • Tom says:

      Hi Simple. I totally agree that many designers do use the ‘save for web’ function, but I also know plenty who are so focused on producing beautiful works they ignore the right image optimization. This is particularly true of bloggers who aren’t as design savvy. I know this post may not help everyone, but a lot of people have already contacted me to say thanks for pointing them in the right direction.

  2. Su Hall says:

    What a difference this makes! Most of the time I have to use the ‘Save As’ feature, though, as scrapping goodies are made to be printed. Some of my files are HUGE! I can cut down a little on the quality, but, it doesn’t seem as good to me.
    What about .PNG files? What is the best way to save them? LOL

    Thank you for a good read!

    Su

    • Tom says:

      I’m glad it helped you Su :) . You can also save .PNG files using this method. It will honestly make a huge difference on your blog post load times.

Leave a Comment:

Related Posts

Subscribe to PSDFAN and Get Your Free Designer Toolkit

Have every post delivered to your inbox and get access to hundreds of useful design freebies.

Your Design Work, But More Awesome:

Do you know the basic tools in Photoshop but feel that your work is still looking average? Join our creative community at FanExtra and get the direction you need to take your work to the next level.

JOIN OUR FANEXTRA COMMUNITY TODAY