How to Paint Quick Realistic Fur Using Photoshop
Create a Photo-Realistic Realistic Hourglass
Quick Tip: Learn How To Create a Vintage Photo Effect in PhotoshopHave every post delivered to your inbox and get access to hundreds of useful design freebies.
PSDFan Extra
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!
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.
4 Comments:
Related Posts
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.
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….
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.
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
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.