Quality of JPEGs when using image for the web

[Jon_Are]

When I save an image to JPEG (in Photoshop Elements 7), a dialogue box opens that gives me choices for the quality, from zero to 12.

Previously, I would always save it to 12 with the notion that I may want to print it at some point.

I recently posted a photo here; I knew when I processed it that it would be for the internet, so I saved it at a low setting (1 or 2), thinking that the screen resolution is limited and the lower setting would make the file a manageable size without compromising quality.

As it turns out, I was wrong. The image had some jagged lines that were attributed to the low-quality JPEG setting.

Well, I'm going to crank out a website soon that will display photos. What is the ideal 0-12 setting to use for these images that I know will be for internet use only?

At what point does the improved quality not show up on the screen?

Thanks!

Jon

 

[SonnarSphere]

85% seems a common threshold. i find that too low. i use 90%
quality. above 90 i find the file size increases dramatically for little
apparent improvement in quality. the biggest visual size i export
for web is 999x666 (3:2). if the software uses a scale of 1-12,
i'd interpret that to equate to 1 'unit' = 8.5% quality. so try
between 10 and 11 quality...if visual quality is important.

 

[bigtwinky]

Reduce the image's size and keep the quality of the jpeg high. That will cut down on the kb/mb of the image, allow for a good web viewing quality, and not permit people to download it and do much with.

I typically resize to a 4x6 image and have the quality to 10-12, depending on which gets me around 400kb

 

[Big Mike]

When saving images for web viewing, I resize (to less than 800 pixels wide) and use a JPEG quality setting of 8 to 10, but you could probably use a lower setting and still be OK. I wouldn't use 1-4 for photos though.

 

[TamiyaGuy]

Personally, I use a setting of between 8 and 10, depending on the complexity of the photograph. Considering that I rarely publish photos larger than 800 pixels as the max resolution (small screen size ), this gives me a file of around 100-200kb.

 

[JerryPH]

When resizing for the web, our main goal is to make sure it looks good on screen... and looks BAD in print.

My first goal is to make sure that the photo is no larger than 500 pixels wide. My next is to use a setting of around 5-6.

To get a good 4X6 print you need something around 640 pixels wide, anything less and it starts to become obvious, hence why I go 500 or less.

 

[Jon_Are]

Of all the things I've learned related to photography, this has been one of the hardest for me to grasp. So please bear with me.

Does the JPEG quality setting (the 0-12) have anything at all to do with PPI?

When you talk of image size, does this mean, literally, the size the image will appear on my screen?

Jon

 

[Jon_Are]

Alright, so I messed around a bit more, and I'm more confused.

When I open the dialogue box to re-size image, I see no way to change the height or the width in pixels. In the example I opened, it says the width is 3321 pixels and the height is 2372 pixels; there is no way to change these numbers.

Below that, within the same box, there are 'Document Size' settings. These I can change, but not of them are in pixels. There is Width, Height, and Resolution. The scale choices are Inches, per cent, cm, mm, points, picas, and columns.

I can change any of these numbers: Width, Height, or Resolution - and my change affects the other two. However, the settings I WANT to change (Width and Height in pixels) stays the same.

Big Mike suggests making my image 800 pixels wide. How do I do this, given what I've just explained?

Thanks,

Jon

 

[SonnarSphere]

ignore document parameters. find image parameters. i dont use photoshop anylonger. i use gimp. it is similar. you need to find something like 'scale image' or transform>scale. but not document size and not canvas size. image size. sorry i dont know the exact menu option. but someone here can easily explain.

 

[SonnarSphere]

here


http://www.photoshopessentials.com/essentials/image-resizing.php

 

[Jon_Are]

I appreciate your help, SonnarSphere, but it didn't help. I have been working with image size.

In my dialog box, on any image I open, the top part of the box (the part I need) is not adjustable.

I'm referring to the portion that says "Pixel Dimensions", "Width" & "Height".

In the link you provided, it says you simply adjust these numbers.

Anyone know why mine are not adjustable?

Thanks,

Jon

 

[Jon_Are]

OK, now I see that when I click on "Resample Image", these options become available to me.

But why must it resample if I am going smaller?

Jon

 

[tsaraleksi]

It just does. It resamples to figure out what information to throw out when resizing down.

 

[SonnarSphere]

you're welcome Jon.

 

[Garbz]

Resampling is a fancy term for applying some kind of digital filter to establish what to do with the image considering you want the sizes changed. This gives you the choice of a variety of filters such as Nearest Neighbour (ignore every x pixel), or a Bicubic sharper, which weights pixels and selects the final based on the surrounding weights.

Here's a few things to note before I go for a final solution:

1. A Q7 JPEG is for the most part not discernable from a Q12, within restrictions. Dark areas, and the blue channel are the most heavily compressed as the eyes are least sensitive to them, so if you have a blue or dark image a higher quality may be needed, but often Q7 is about the limit between small file size and starting to see a quality drop.

2. Consider piggybacking off flickr or photobucket. If you put your gallery photos there and link them to your website then it's their bandwidth. (though you may want to check their terms of service first). The interesting thing here is that it doesn't matter what resolution of quality you give it. These online storage sites resize, and recompress your photos to suit them, so upload Q12, the file will be a much smaller size anyway.

Ok finally the solution to all your problems... drumroll... "Save for Web and Devices"
This dialogue box gives you all your resampling options, compression options, even a check box to "convert to sRGB" which should always be ticked, and on top of everything, a preview. From there you can tell exactly how each image will look after you saved it, and best of all none of this affects your original image. After saving a 1024x640 image your original will still be it's full size.