| 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".
| 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?
| 9:14 am on Apr 25, 2005 (gmt 0)|
this should be the very last step you do, i.e. after adding the 5. dropsahdow
| 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
b) Did Save For Web, then included the drop shadow, then did Save For Web again?
| 10:20 am on Apr 25, 2005 (gmt 0)|
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.
| 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.
| 5:29 pm on Apr 25, 2005 (gmt 0)|
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?
| 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.
| 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.
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.
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.
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.
| 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.
| 4:00 am on Apr 26, 2005 (gmt 0)|
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.
| 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. |
|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.
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.
| 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)
& colour by 102269460
0.6, 100%, 0803723
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?