Saving for the web

[Kimmy1210]

I'm doing photography on the side & I keep getting conflicting thoughts on saving these images for my webpage/fb. When I am done editing, I have crystal clear images & I save them using NO restriction @ 350 resolution--the quality isn't there when I upload to fb or to my page.

What's the best way to save images & keep quality?

 

[480sparky]

Are you selling the images, or are you just wanting to display them?

 

[MLeeK]

For best display on the web size them for the web and re-sharpen accordingly. 720px on the long side. Make sure they are in sRGB colorspace and then when you upload to facebook you have to choose the high quality image option.
Facebook automatically resizes your images and does not do such a great job of it. There is also some difference in flickr for the non-paid members images as it resizes also. For the paid members it saves the full sized image.

 

[Kimmy1210]

I just set up the option to purchase through me, but they also have the option for purchasing the CD as well. They look blurred & grainy (mostly fb) & I understand that FB takes quality, but I also see that others get them to be just fine.

What would be all the correct steps to doing this? For instance, once my picture is the way it is, I save that picture w/ no restriction at 350 resolution (some have said to leave it all blank... would that be right)? As a JPEG.

So.. w/ that same image being saved & still open, should I do another save for web as a smaller size (all using pse)... at what resolution? FB has given me tons of business already, but I want the best quality I can get both on my website & on fb.

 

[Big Mike]

A resolution of 350 PPI is really high. Most people only use 300 for printing.
For web viewing, most people are more likely to use something like 100 or 72.

Also, you should consider the size of the images. At 100 PPI, you only need 800-1000 pixels wide before it takes up most of the screen. For FB etc., you probably only need 500 pixels wide.

I think that the biggest reason why people find that FB or other sites tend to 'wreck' their images...is that they try to upload huge images and the sites automatically resize them for easy loading & viewing. That resizing may mess with your images. But if you resize and compress (jpeg quality level) your images yourself. It's less likely that the site will mess with your images.

Another issue may be the color space. Make sure your images are sRBG before you upload them.

 

[Kimmy1210]

Ok.. i know enough about my camera to understand taking good pictures.. however, everyone has different ways of explaining things.

When I save images, you have the option to save "no restriction, 4 x 6, and so forth or custom I think"... and if you hit 4 x 6, if fills in auto & then I put in the resolution..... which I do at 350. IS this a good number or not?

When you say 720px on the long side (where exactly do I put this information in)?? the resolution?

And sharpen would be the "unsharpen mask", correct?

Do I save my image the way I want it first & then do this other stuff to it for the web?!

 

[Kimmy1210]

It's crazy how you can get so many different views on what's the right/wrong way to do it. Another professional recommended using NO size & saving everything at 350 resolution. I guess I never pay attention the pixels... I'm just basing everythign off of what I've been told, so I don't mess w/ that---but isn't that an auto thing (the pixels) after I indicate size?

 

[Big Mike]

What software are you using?

 

[Kimmy1210]

PSE 9

 

[MTVision]

Ok.. i know enough about my camera to understand taking good pictures.. however, everyone has different ways of explaining things.

When I save images, you have the option to save "no restriction, 4 x 6, and so forth or custom I think"... and if you hit 4 x 6, if fills in auto & then I put in the resolution..... which I do at 350. IS this a good number or not?

When you say 720px on the long side (where exactly do I put this information in)?? the resolution?

And sharpen would be the "unsharpen mask", correct?

Do I save my image the way I want it first & then do this other stuff to it for the web?!

You can also sharpen using the high pass filter! Sharpening will definitely make images on the web look less blurry. Also I read recently that if your images has the slightest noise (even if you don't notice) Facebook will make it look really noisy (grainy).

Are you cropping the images? That's the only time I've ever notices the 4x6 and no restriction. You can go up to image and choose image resize - you can change your size and resolution.

What web browser are you using? I've noticed images can look different in IE vs Mozilla.

 

[Big Mike]

Realistically, the resolution (PPI) number isn't really all that important. It's just there to tell a computer how big to make it on a screen.

When uploading files, or giving/selling them to clients, it's the size that matters most. The larger the size (in pixels) that you give them, the larger the print they can make. So when you sell files, you probably want to give them files that they can make 8x10 prints from (if you are giving them permission to make their own prints). So at 300 PPI, that is 2400x3000.
But when you upload images for web viewing, you only need 500-700 pixels wide...so a much smaller file.

 

[Kimmy1210]

I think it finally hit me. Aawhwhw... So-- I don't need to put in the 24x00x3000, that's auto after entering in the resolution, correct? You call resolution (PPI)?! I feel like a brick hit my wall...

OK... but for files that will be on a cd, I save that first, correct? Do you flatten that image prior to saving for cd? I know when you flatten the image it makes it smaller, correct?

After my image is saved for cd, then do I make other changes for web?

 

[MTVision]

I think it finally hit me. Aawhwhw... So-- I don't need to put in the 24x00x3000, that's auto after entering in the resolution, correct? You call resolution (PPI)?! I feel like a brick hit my wall...

OK... but for files that will be on a cd, I save that first, correct? Do you flatten that image prior to saving for cd? I know when you flatten the image it makes it smaller, correct?

After my image is saved for cd, then do I make other changes for web?

Flattening makes the image smaller because it flattens the layers. What I personally do it - keep a copy of the original, an unflattened copy of my edited image, and a web copy. Sharpening an image for the web is different then sharpening an image for print. You can do it anyway you want but I would get some pictures printed to see how they look and how much sharpening they might need to look good in print. You can also duplicate the file in elements so that way you aren't saving the same JPEG over and over again. JPEGS degrade when you save them.

 

[MLeeK]

I just set up the option to purchase through me, but they also have the option for purchasing the CD as well. They look blurred & grainy (mostly fb) & I understand that FB takes quality, but I also see that others get them to be just fine.

What would be all the correct steps to doing this? For instance, once my picture is the way it is, I save that picture w/ no restriction at 350 resolution (some have said to leave it all blank... would that be right)? As a JPEG.

So.. w/ that same image being saved & still open, should I do another save for web as a smaller size (all using pse)... at what resolution? FB has given me tons of business already, but I want the best quality I can get both on my website & on fb.

Yes, you should be saving a second, web copy. Resolution won't matter how you set it. Resize to 720px on the long side. 720 pixels is 720 pixels. Resolution is how you concentrate them for some application. The internet sees pixels. when you print you're putting constraints on those pixels and saying you want to put the 720 pixels in a 2 inch space. YOu could say you want those same 720 pixels in a 1 inch space and then you'd be at 720 pixels per inch. It's the same number of pixles, you are just saying how big you want the pixels to print. I hope that makes sense? I know I could be stating it better.
Facebook strips out data and makes them that size. The method that facebook uses really tends to make everything look crappy. If you are doing it yourself you control how your image looks.

 

[KmH]

Actually, for online display, PPI IS MEANINGLESS.

Yes, I shouted that. PPI is only meaningful when a photo is printed. Print labs print machines have RIP software that will set the appropriate PPI to make a print, assuming the photo has sufficient resolution for the size print ordered.

The photo resolution is the pixel dimensions, not the PPI.

Pixel dimension divided by the PPI = the print size.

A 3000x2000 px photo assigned a PPI of 300 will be - 3000 pixels ÷ 300 Pixels-Per-Inch = 10 inches on the long side and 6.66 inches on the short side. (the pixels in the equation cancel, leaving only inches.)
The same 3000 x 2000 px photo assigned at 200 PPI will print as a15 inch by 10 inch photo.

A 3000x2000 pixel photo cannot be displayed at 100% on most computer displays, and web site software automatically resizes most photos that have not already had the pixel dimensions reduced for web display.