Have every post delivered to your inbox and get access to hundreds of useful design freebies.
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.
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!
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!
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!
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.
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.