Re-sizing images for the web

[Jon_Are]

I thought I had this figured out, now I'm ultra-frustrated.

It is my understanding that web images should be around 500-800 pixels in width and have a resolution of 72 ppi.

Yes? No?

Here's my problem: I have images saved as JPEGs in Lightroom (which were processed from RAW images). If I open up an image to edit in CS4, here are the stats from the Image Size window:

Pixel Dimensions: 18.0M
Width: 2098 pixels
Height: 1499 pixels

Document Size:
Width: 8.742 inches
Height: 6.246 inches
Resolution: 240 pixels/inch

So, this is too large to post on the web and requires resizing.

When I change the resolution to 72 pixels/inch, this changes my width to 629 pixels and my height to 450 pixels.

So, I click OK and the image looks horribly jagged.

I'm at a loss as to why this is. Could it be that, as a JPEG, I've opened and re-opened it too many times (although I don't think this is the case)?

Does it have anything to do with 16 bit vs. 8 bit? I'm certain that I saved it as 8 bit, but now, when I re-open and click Image>Mode, 16 bit is checked.

Any thoughts?

Thanks!

Jon

 

[UUilliam]

no need to lower resolution
resolution is for printing, just change the Width and height...

 

[Josh66]

I just do mine 800 on the long side, with whatever resolution is the default in Lightroom.

 

[Andrew Sun]

no need to lower resolution
resolution is for printing, just change the Width and height...

Yeap this. If it's just for screen viewing, 300 or 72 dpi doesn't matter.

 

[Opher]

I just take my horribly large photos and resize them with the gimp.
GIMP - The GNU Image Manipulation Program

It is free; I mostly just use it to resize individual images for the web.

 

[Jon_Are]

Thanks, guys; that makes it easier.

Can you re-size in LR, or must I go into PS?

Jon

 

[Jon_Are]

Also, what about checking (or unchecking) the following:

Scale Styles?
Constrain Proportions?
Resample Image?

And leave it on Bicubic??

Jon

 

[musicaleCA]

Yes. It's part of the export dialogue.

Edit: Constrain proportions makes sure that whenever you change the height or width, the other is changed simultaneously to maintain the same aspect ratio. Let it resample the image using a bicubic algorithm; it'll do fine for downsizing.

Whatever people may think about resolution, for images that are going to be displayed on a screen, 72 PPI is standard.

 

[Josh66]

Very easy in Lightroom.

Go to the export menu, set it up how you want (tell it the dimensions, or just the dimesion of one side), then save that as a preset.

 

[Jon_Are]

Whatever people may think about resolution, for images that are going to be displayed on a screen, 72 PPI is standard.

This is what I thought. But why do my 72 ppi's look like crap - all jaggedy - but my 240 ppi's look OK?

Jon

 

[Jon_Are]

Alright, so I've done a bit more research...

THIS:

no need to lower resolution...resolution is for printing

...is incorrect.

AND THIS:

If it's just for screen viewing, 300 or 72 dpi doesn't matter.

...is correct, but is not what I was asking about.

Here is what I found:

PPI refers to the number of pixels viewable on a screen. There is no correlation between the resolution of digital data (ppi) and the resolution of a printed image (dpi). A dot is a droplet of ink on paper and a pixel is a ray of light on your monitor.

So, my question remains...if 72 ppi is plenty for screen viewing, why, when I change the ppi resolution of my images, do they look horrible?

Thanks,

Jon

 

[Perniciouspoof]

Alright, so I've done a bit more research...

THIS:

no need to lower resolution...resolution is for printing

...is incorrect.

AND THIS:

If it's just for screen viewing, 300 or 72 dpi doesn't matter.

...is correct, but is not what I was asking about.

Here is what I found:

PPI refers to the number of pixels viewable on a screen. There is no correlation between the resolution of digital data (ppi) and the resolution of a printed image (dpi). A dot is a droplet of ink on paper and a pixel is a ray of light on your monitor.

So, my question remains...if 72 ppi is plenty for screen viewing, why, when I change the ppi resolution of my images, do they look horrible?

Thanks,

Jon

People change the resolution of images for the web only because it makes it a smaller file that is faster to load, and because having larger images is unnecessary when web pages are going to be viewed primarily on computer moniters. The Quality aspect of ppi or dpi is shown primarily in printing.

as to the question of why your photos degrade in quality when you change resolution-

When you change a photograph from 300 to 72ppi photoshop is throwing away extra pixel information to match the smaller print resolution. Which explains the degredation of quality.

Instead of straight up converting from the actual file, try creating a new file that's set at 72 ppi and whatever measurements you want and place the photograph on that file. You should get better results.

 

[Jon_Are]

Instead of straight up converting from the actual file, try creating a new file that's set at 72 ppi and whatever measurements you want and place the photograph on that file. You should get better results.

Thanks, Perniciouis, but I really don't get what you mean (or how to accomplish it).

Do you mean to edit the RAW image, then, when I convert it to JPEG, select 72 ppi (rather than 240, then later converting to 72) ?

Now that I give that some thought, it makes some sense. I'll try it and see.

Jon

 

[Peano]

So, my question remains...if 72 ppi is plenty for screen viewing, why, when I change the ppi resolution of my images, do they look horrible?

You're probably resampling when you change the resolution. Resampling certainly can change image quality; but resolution (ppi) by itself has zero bearing on image quality or file size.

72 ppi, 149K:

300 ppi, 149K:

When you're sizing image for the web, these are the things that matter in the Image Size dialog box. Ignore the middle section.

 

[Jon_Are]

Thanks, Peano.

Your explanation makes sense, except for one thing:

If the middle, 'Document Size' box refers only to printing and not the screen image, why does it indicate 'Resolution: 72 pixels/inch (when pixels are relevant only to screen resolution)?

Is it just a poor choice of words from Adobe?

Thanks again for taking the time to answer with clear graphics as you did.

Jon