Oct 31

Optimize Images Correctly Using Photoshop

Wed, 10/31/2012 - 19:51 — julie

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.

Copyright 2009. E-mail Me
Auto Spare Parts