homepage Welcome to WebmasterWorld Guest from 54.227.25.58
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
Forum Library, Charter, Moderator: open

Site Graphics and Multimedia Design Forum

    
Newbie trying to reduce digital photos
and keep the clarity
reddevil




msg:857043
 5:44 am on Apr 25, 2005 (gmt 0)

I am fairly new to photos and have learnt some basic tips from this forum, but still can't seem to get crystal clear photos (when compared to the original full size photo). A lot of them seem to have hazy shadows?

I am trying to reduce my digital photo from 1280x960px to 300x225px and add a drop shadow (I recently learnt how to do a batch process in Photoshop 7.0).

This is how I am doing things:-

1. Download my images onto my harddrive
2. Open one photo in Abode Photoshop 7
3. Use Image - Image Size to reduce from 1280x960 to 300x225
4. File - Save For Web. Settings are usually JPEG Medium or High and my file sizes range from 5kb to 10kb - is this too big for a jpeg? Should I be able to make it smaller but still look OK?
5. Add the Dropshadow (via my batch process - this is really cool and saves so much time)

Other issues which I might want to use, but have never tried yet are:-
a) I have read that it is best to set the dpi to 72 maximum - how do I do this?
b) Filter Unsharp
c) Deepen the colours
d) Brighten the image, as though it is a sunny day

Should all the above be done before or after resizing?

Any pointers would be appreciated.

 

Matt Probert




msg:857044
 6:04 am on Apr 25, 2005 (gmt 0)

Jpeg is a lossy, compressed, file format. There is a trade-off between file size (compression) and quality. You could try adjusting the level of compression applied when you save your images, this will have the greatest impact on their quality. You should be able to specify a numeric percentage, rather than abstract terms like "high" and "medium".

Matt

reddevil




msg:857045
 6:23 am on Apr 25, 2005 (gmt 0)

So, the more I reduce (or compress) the more likely there is to be loss of quality?

So would it be better if I set my digital camera to take photos that are smaller than the current 1280x960? Would this help me to get better smaller images on my site?

benihana




msg:857046
 9:14 am on Apr 25, 2005 (gmt 0)

4. File - Save For Web.

this should be the very last step you do, i.e. after adding the 5. dropsahdow

reddevil




msg:857047
 10:19 am on Apr 25, 2005 (gmt 0)

Thanks for the tips.

I added the drop shadows as an afterthought (well, I didn't know how to do them at the time). And in future I will Save For Web AFTER I have added the drop shadow.

But would the file size and quality be the same if:-

a) I included the drop shadow and then did Save For Web

or

b) Did Save For Web, then included the drop shadow, then did Save For Web again?

Goober




msg:857048
 10:20 am on Apr 25, 2005 (gmt 0)

Howdy,

Adding a drop shadow may play a part. I've noticed when I've added a shadow to a logo, the whole thing loses some sharpness.

Goober

limbo




msg:857049
 4:16 pm on Apr 25, 2005 (gmt 0)

But would the file size and quality be the same if...

Including the drop shadow and then Saving For Web will allow you more control of the final optimised graphic and smaller file size of the same or similar quality. Adding the drop shadow afterward is likely to add more weight to the graphic and you will lose quality on the image cos you will have to save for web again.

A good tip often mentioned here is to work big, then reduce your image at the final stages - keeping a copy of the large un-edited/un-optimised graphic in your archives.

reddevil




msg:857050
 5:29 pm on Apr 25, 2005 (gmt 0)

limbo,
So would it be best if I added the drop shadow to the full-size photo and then reduced to the smaller size? Then Save For Web? Or am I being too fussy here?

Matt Probert




msg:857051
 5:32 pm on Apr 25, 2005 (gmt 0)

The key point is the COMPRESSION. The MORE the image is compressed (smaller file size) the LOWER the image quality. The actual dimensions don't play much part, though if you are going to reduce the dimensions you may as well set your camera to take photos of smaller dimensions in the first place - processing can cause a loss of quality.

Matt

moltar




msg:857052
 6:37 pm on Apr 25, 2005 (gmt 0)

Here are a few tricks to get a web optmized, sized down and good quality image, given that you have a good quality original to start with.

First of all, I want to note that in most cases each photo has it's own properties and thus needs to be adjusted differently. Straight off-the-box batch processing optimization will never be able to achive the same quality as manual optimization using a human eye.

Color Correction

Play with Brightness and Contrast on the original image. (Image -> Adjustments -> Brightness/Contrast...) Make the photo look right. Add a little more brightness then you needed. Some of it gets lost during the resizing and compression. I find that increasing contrast a little bit more than the natural contrast of the photo looks good. Photos don't look as real, but look jucier on the screen. But it's a matter of taste.

Resizing

After you finished tweaking the original photo, it's time to resize. Don't just scale down the photo in one step. Resize the image in 50% increments. And make up for the compression blur with each step you take. So if you start with an image 1280x960px, resize it to 640x480px, then apply Unsharp Mask (Filter -> Sharpen -> Unsharp Mask) with a radius of 0.6 pixels at 100% and no threshold. Then resize it down to 320x240px and apply the Unsharp Mask again.

Saving

When you go to "Save for Web...", adjust the compression manually (don't use presets Low, Medium, High, etc...). Set the Blue ~ 0.2 pixels and there you are, a well optimized image.

P.S. Having contrasted borders around the image makes it look better and cleaner to the human eye.

krieves




msg:857053
 7:18 pm on Apr 25, 2005 (gmt 0)

I usually use ImageReady (that ships with Photoshop) to compress the images. You can set it up so that you can see the effects of the compression before you save the file. This allows you reach a compromise between file size and image quality.

reddevil




msg:857054
 4:00 am on Apr 26, 2005 (gmt 0)

moltar,
thanks for your detailed tips - this is exactly what myself (and other newbies) would be looking for.

It does seem as though I should set my camera to take smaller photos though, so this would reduce the amount of loss due when reducing the file size (kb) of the photo?

Your comment about contrasted borders.......do you mean, say, a black line around the edge of the photo? Would this still look OK even with a drop shadow?

Still one question unanswered - would it be best if I added the drop shadow to the full-size photo and then reduced to the smaller size?

I will experiment with this and hope to get good looking photos on my homepage soon.

moltar




msg:857055
 3:31 am on Apr 27, 2005 (gmt 0)

thanks for your detailed tips - this is exactly what myself (and other newbies) would be looking for.

My pleasure!

It does seem as though I should set my camera to take smaller photos though, so this would reduce the amount of loss due when reducing the file size (kb) of the photo?

Take pictures with the highest quality possible. Remember - you can reduce the quality, but you cannot increase it. Unless you do manual touch ups and retraces.

Your comment about contrasted borders.......do you mean, say, a black line around the edge of the photo?

Yes, black borders usually work very well. Borders that are contrasted to the background color are also ok. It all depends on the color scheme you want to use. Play around and see what works.

I usually add a thick border (5-7px). Since most of my websites have white background, I use black border, and it works very well.

Would this still look OK even with a drop shadow?

I doubt it will look good if you have a border and a drop shadow. You should pick one.

Still one question unanswered - would it be best if I added the drop shadow to the full-size photo and then reduced to the smaller size?

It's better to add the shadow after you reduced the photo.

___________________________________

Correction

In my previous post I wrote:

Set the Blue ~ 0.2 pixels and there you are, a well optimized image.

I meant to say Blur.

reddevil




msg:857056
 10:00 am on Apr 27, 2005 (gmt 0)

I have been trying my bestest to get a satisafctory image without shadows, and can do it BUT the file size seems too big (26k) for a 320x240 photo? Reducing the quality during Save For Web just puts "compression shadows" around the top of the parasols in my photo.

This is what I have been doing, step-by-step:-

Original Photo is 1280x960, 72dpi, 3.52MB
When I Save For Web (SFW)

HighMedLow
1280x960, 72dpi209kb88kb42kb

Increase bright
& colour by 102269460

Reduce to
640x480653019

Unsharp mask
0.6, 100%, 0803723

Reduce to
320x24020106

Unsharp mask
0.6, 100%, 026127

Save For Web with 0.2 blur

The final photo at 26kb looks OK, but is it still a massive file at 26kb, I thought it should be less than 10k, right or wrong?

The other two I am not happy about because I can see fuzzy shadows around the top of the parasols.

Is it me or is it really not possible to condense an image from 1280x960 to 320x240 unless I accept this poor quality?

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved