Resampling for the Web

[Raucko]

I always knew trying to increase image resolution was a bad idea, but I didn't realize downsampling was a problem until recently. For those of you who display your photos online, how do you handle resolution?

Do you just leave the original resolution as-is, but change the dimensions? Or do you downsample to a web-friendly image?

And if you do downsample, what resolution do you make the photo? 72 dpi? Do you downsample incrementally or all at once? Do you sharpen as a final step, or between increments?

 

[sleze]

I always knew trying to increase image resolution was a bad idea,
but I didn't realize downsampling was a problem until recently.
For those of you who display your photos online, how do you handle
resolution?

Do you just leave the original resolution as-is, but change the
dimensions? Or do you downsample to a web-friendly image?

And if you do downsample, what resolution do you make the photo?
72 dpi? Do you downsample incrementally or all at once? Do you
sharpen as a final step, or between increments?

Look at pictures already on people's websites and galleries. Watch for ones that open relatively quickly but still possess very good quality. Save them to your computer and check out the dimensions and pixels.

I usually use 72 dpi for web myself but it everyone varies.

--
http://www.thereheis.com

 

[pbleic]

It is only meaningful when linked to a size in inches or cm. Ignore it.

You should resize to the pixel size you want - a medium picture is 600 pixels on the largest side, a grande picture is 900 -1000. Remember, many people still use monitors that are 800 X 600 pixels.

For more in depth info:
http://www.normankoren.com/pixels_images.html

I always knew trying to increase image resolution was a bad idea,
but I didn't realize downsampling was a problem until recently.
For those of you who display your photos online, how do you handle
resolution?

Do you just leave the original resolution as-is, but change the
dimensions? Or do you downsample to a web-friendly image?

And if you do downsample, what resolution do you make the photo?
72 dpi? Do you downsample incrementally or all at once? Do you
sharpen as a final step, or between increments?

Look at pictures already on people's websites and galleries. Watch
for ones that open relatively quickly but still possess very good
quality. Save them to your computer and check out the dimensions
and pixels.

I usually use 72 dpi for web myself but it everyone varies.

--
http://www.thereheis.com

--
Paul

------------------------------------------------
Pbase supporter
Photographs at: http://www.pbase.com/pbleic
--------------------------------------------------

Unless specified otherwise, all images are Copyright 2003, 2004 All rights reserved.

 

[Raucko]

Good tip. I'll try this out.

Look at pictures already on people's websites and galleries. Watch
for ones that open relatively quickly but still possess very good
quality. Save them to your computer and check out the dimensions
and pixels.

 

[dfazio]

The DPI value does not matter for viewing on screen, only printing. Here is a current thread from another forum:

http://forums.dpreview.com/forums/read.asp?forum=1014&message=8890948

I typically do all my editing first. Then I resize in increments of 10% until it is the size I want and then sharpen.

Darren
--
http://www.pbase.com/dfazio

 

[Raucko]

True, the image will look the same on-screen, but the file size is going to be different. Therefore, won't dpi affect how quickly an image is downloaded into someone's browser and affect just how much account space is taken up on a site such as pbase?

It is only meaningful when linked to a size in inches or cm.
Ignore it.

You should resize to the pixel size you want - a medium picture is
600 pixels on the largest side, a grande picture is 900 -1000.
Remember, many people still use monitors that are 800 X 600 pixels.

For more in depth info:
http://www.normankoren.com/pixels_images.html

 

[digitalmike]

I usually just do a save as a copy, and set the jpeg quality to 3. Is this wrong?
--
I'm out there......and I'm lovin every minute of it!
Kramer...
http://digitalmike.smugmug.com/

The DPI value does not matter for viewing on screen, only printing.
Here is a current thread from another forum:

http://forums.dpreview.com/forums/read.asp?forum=1014&message=8890948

I typically do all my editing first. Then I resize in increments
of 10% until it is the size I want and then sharpen.

Darren
--
http://www.pbase.com/dfazio

 

[Boardhead]

With high resolution monitors becoming common place, some web browsers will resize images to make them larger. In an ideal world, they would pay attention to the image DPI to get the size correct.

My current mail client displays images their true size (ie. rescaled based on the DPI and the monitor resolution), so it is annoying if someone sends me a web-sized image at 180 or 300 dpi because it looks like a thumbnail.

It is best to set 72 dpi for web images -- this way you won't have to worry if down the road web browsers start paying attention to this number.

 

[Raucko]

Thanks for pointing me in the direction of that thread. Some good info there.

The DPI value does not matter for viewing on screen, only printing.
Here is a current thread from another forum:

http://forums.dpreview.com/forums/read.asp?forum=1014&message=8890948

I typically do all my editing first. Then I resize in increments
of 10% until it is the size I want and then sharpen.

Darren
--
http://www.pbase.com/dfazio

 

[Boardhead]

The pixel dimensions of the image dicatate the file size. The DPI just specifies how large each pixel is in real life -- just a single number in the image to scale the size of all pixels. So changing the DPI doesn't change the file size unless you resample the image.

 

[pbleic]

I usually do this as well. But it is confusing to people unless they understand that the pixel count is generally what matters.

With high resolution monitors becoming common place, some web
browsers will resize images to make them larger. In an ideal
world, they would pay attention to the image DPI to get the size
correct.

My current mail client displays images their true size (ie.
rescaled based on the DPI and the monitor resolution), so it is
annoying if someone sends me a web-sized image at 180 or 300 dpi
because it looks like a thumbnail.

It is best to set 72 dpi for web images -- this way you won't have
to worry if down the road web browsers start paying attention to
this number.

--
Paul

------------------------------------------------
Pbase supporter
Photographs at: http://www.pbase.com/pbleic
--------------------------------------------------

Unless specified otherwise, all images are Copyright 2003, 2004 All rights reserved.

 

[pbleic]

at 72 dpi you theoretically have 1 pixel in your picture = 1 picture in the monitor. Except some monitors display up into the 90's.

The pixel dimensions of the image dicatate the file size. The DPI
just specifies how large each pixel is in real life -- just a
single number in the image to scale the size of all pixels. So
changing the DPI doesn't change the file size unless you resample
the image.

--
Paul

------------------------------------------------
Pbase supporter
Photographs at: http://www.pbase.com/pbleic
--------------------------------------------------

Unless specified otherwise, all images are Copyright 2003, 2004 All rights reserved.

 

[jpsilva]

dpi (dots per inch) are a measure of resolution on print. It does not affect image display on a screen. For screen display what counts is the image size in pixels.

For web display you should downsample the image to any size smaller than 1024x768 (which is the resolution most of the people use nowadays) or even 800x600. Choose the "bicubic" interpolation method. Keep your original image. Your final "web friendly" image will not be suitable for printing or further image processing.

Sharpening is a must and has to be done after downsampling (reducing the image size). To keep the final image as accurate as possible, change the image mode to Lab color and select only the Lightness channel. Then apply "unsharp mask", preferably with a radius not exceding 1.5 pixels. Change the image back to RGB and then save it as JPEG. This format is compressed so you'll have to find the smallest compression level ( = highest "quality" level) to achieve a reasonable file size (use 150kb per image as top file size).
Hope this helps.

Joao Pedro

I always knew trying to increase image resolution was a bad idea,
but I didn't realize downsampling was a problem until recently.
For those of you who display your photos online, how do you handle
resolution?

Do you just leave the original resolution as-is, but change the
dimensions? Or do you downsample to a web-friendly image?

And if you do downsample, what resolution do you make the photo?
72 dpi? Do you downsample incrementally or all at once? Do you
sharpen as a final step, or between increments?

Look at pictures already on people's websites and galleries. Watch
for ones that open relatively quickly but still possess very good
quality. Save them to your computer and check out the dimensions
and pixels.

I usually use 72 dpi for web myself but it everyone varies.

--
http://www.thereheis.com

--
João Pedro Silva
http://uwphoto.photoblink.com

 

[Boardhead]

To resize for the web, try this:

1) Resample image to 480-800 pixels wide and 72 DPI using bicubic interpolation or some other good resampling algorithm.

2) Apply a Unsharp mask in photoshop to recover the image sharpness (try radius 0.5, threshold 0, and 100% or so -- depends on your taste).

3) Save as JPEG at 70% quality (I find 70% a good compromise for web use -- small enough, but still not too many artifacts.)

The DPI value does not matter for viewing on screen, only printing.
Here is a current thread from another forum:

http://forums.dpreview.com/forums/read.asp?forum=1014&message=8890948

I typically do all my editing first. Then I resize in increments
of 10% until it is the size I want and then sharpen.

Darren
--
http://www.pbase.com/dfazio

 

[Scowler]

That way you dont ruin your photo and it does all the thinking for you 500 across works well

Siobhan

 

[Boardhead]

1) Resample image to 480-800 pixels wide and 72 DPI using bicubic
interpolation or some other good resampling algorithm.

2) Apply a Unsharp mask in photoshop to recover the image sharpness
(try radius 0.5, threshold 0, and 100% or so -- depends on your
taste).

3) Save as JPEG at 70% quality (I find 70% a good compromise for
web use -- small enough, but still not too many artifacts.)

The DPI value does not matter for viewing on screen, only printing.
Here is a current thread from another forum:

http://forums.dpreview.com/forums/read.asp?forum=1014&message=8890948

I typically do all my editing first. Then I resize in increments
of 10% until it is the size I want and then sharpen.

Darren
--
http://www.pbase.com/dfazio

 

[digitalmike]

I'll give that a try. Most of the softball pictures in my gallery are at 3, and I don't think they look that bad. Tell me what you think.
password is: ahs-sb-va

m~

1) Resample image to 480-800 pixels wide and 72 DPI using bicubic
interpolation or some other good resampling algorithm.

2) Apply a Unsharp mask in photoshop to recover the image sharpness
(try radius 0.5, threshold 0, and 100% or so -- depends on your
taste).

3) Save as JPEG at 70% quality (I find 70% a good compromise for
web use -- small enough, but still not too many artifacts.)

The DPI value does not matter for viewing on screen, only printing.
Here is a current thread from another forum:

http://forums.dpreview.com/forums/read.asp?forum=1014&message=8890948

I typically do all my editing first. Then I resize in increments
of 10% until it is the size I want and then sharpen.

Darren
--
http://www.pbase.com/dfazio

--
I'm out there......and I'm lovin every minute of it!
Kramer...
http://digitalmike.smugmug.com/

 

[Raucko]

I haven't heard about changing to LAB for sharpening before. What is the reason for doing this?

Sharpening is a must and has to be done after downsampling
(reducing the image size). To keep the final image as accurate as
possible, change the image mode to Lab color and select only the
Lightness channel. Then apply "unsharp mask", preferably with a
radius not exceding 1.5 pixels.
Joao Pedro

 

[dfazio]

I usually just do a save as a copy, and set the jpeg quality to 3.
Is this wrong?

I always save as a copy instead of overwriting the original. As for the rest, I wouldn't say there is a 'wrong' way. It is just a matter of personal choice.

If the original image is full size, I usually resize it down to 800x600 or less. This makes for a smaller file size as well as allowing others to see the whole image on their screen without having to scroll.

If you need to resize the image, you can preserve a little more detail by resizing in small increments as opposed to doing it in 1 step. However if you are using a quality setting of 3 then any differences in the 2 methods would probably be lost.

I typically use a setting of 8 or more, but that is for my own taste. If you are worried about someone stealing the photo then a lower quality setting (as well as smaller size) would be better.

Darren
--
http://www.pbase.com/dfazio

 

[Raucko]

I apologize. After reading replies here and in another thread, and paying more attention to the PS resize dialog, I see you're right about file size. So to make my images web-ready, all I need to do is plug in the appropriate numbers in the "Pixel Dimension" area and have the "Resample Image" box selected? Should I make the resolution change all at once, or do it incrementally?

You should resize to the pixel size you want - a medium picture is
600 pixels on the largest side, a grande picture is 900 -1000.
Remember, many people still use monitors that are 800 X 600 pixels.

For more in depth info:
http://www.normankoren.com/pixels_images.html

I always knew trying to increase image resolution was a bad idea,
but I didn't realize downsampling was a problem until recently.
For those of you who display your photos online, how do you handle
resolution?

Do you just leave the original resolution as-is, but change the
dimensions? Or do you downsample to a web-friendly image?

And if you do downsample, what resolution do you make the photo?
72 dpi? Do you downsample incrementally or all at once? Do you
sharpen as a final step, or between increments?

Look at pictures already on people's websites and galleries. Watch
for ones that open relatively quickly but still possess very good
quality. Save them to your computer and check out the dimensions
and pixels.

I usually use 72 dpi for web myself but it everyone varies.

--
http://www.thereheis.com

--
Paul

------------------------------------------------
Pbase supporter
Photographs at: http://www.pbase.com/pbleic
--------------------------------------------------
Unless specified otherwise, all images are Copyright 2003, 2004
All rights reserved.