Preparing photos for website?

[D-50]

What is the best way to save a tiff for a website? I have found when I print my photos they look 100 times better than they do on a screen. I am about to post somephotos to my website and want to make sure they look as good as possible. Should I save them using "save for web" in photoshop or is there another way to make sure photos display correctly on the web?

 

[Big Mike]

Well, you certainly want to save them as JPEG images. You will also want to resize them to something that will fit onto a screen. I usually go with 800 pixels wide, or there abouts. I will often set a JPEG compression of about 7 to 10 (on a scale of 12)...just to get the file size down.

I believe that 'Save for Web' will pretty much do all of that for you.

Also, after resizing for web, I like to sharpen the image again (I usually sharpen during the normal editing process). I usually use Unsharp Mask and set an amount around 200, with a very small radius (0.2 to 0.4).

 

[Chris of Arabia]

What Mike said, but be aware that 'Save for Web' will strip our all of the EXIF data - that may or may not be important to you. Use 'Save As' if you need to keep it

 

[castrol]

Process them in sRBG when using for the web. If you are going to print them,
process them in AdobeRGB.

 

[harkain]

For images going to the web, process them using the sRGB color space, but you don't really need to include the color profile with the image.

Standard web resolution is 72 dots per inch for an image. As long as you set the width & height to what you want, the actual dots per inch isn't really important when viewed in a browser. But for printing the dots per inch is very important. If you have an 800x800 image that you want to print, dots per inch determines how many of the 800 pixels will put printed into a one inch of photo paper. At 300 dpi, the image will print 2.667 inches x 2.667 inches. At 72 dpi, that same image will print 11 x 11 inches, but will be much lower quality.

For the web, we want to maximize quality and minimize file size.

Whatever size you want the image to be displayed on the internet is the size you need to set in photoshop. If you upload a file and have the web page display it as a different size, you will see a dramatic quality loss as the browser does a hack job of resizing the image.

For the web do the following:

-save the file as an 8-bit jpg file
-use the sRGB color space
-resize the image to the proper dimensions using Bicubic Smoother (enlargement) or Bicubic Sharper (reduction)
-choose Save For Web & Devices and save the image as a jpg, reducing the quality to the minimum level that still looks good, tweak it a tad with the blur setting if it looks crunchy
- in the Save For Web tool, uncheck ICC Profile to reduce the file size
- you may also set the image size within the Save For Web tool, but it loads pictures slower if they are larger, so its faster usually to change the image size before loading it into Save For Web

I usually edit pictures differently for the web than for printing by adding more saturation and contrast.

 

[Jeff Colburn]

Take a look at my article "Slow Loading Pages" here http://www.creativecauldron.com/articlewebSlow.shtml

Have Fun,
Jeff

 

[EOS_JD]

Standard web resolution is 72 dots per inch for an image. As long as you set the width & height to what you want, the actual dots per inch isn't really important when viewed in a browser. But for printing the dots per inch is very important. If you have an 800x800 image that you want to print, dots per inch determines how many of the 800 pixels will put printed into a one inch of photo paper. At 300 dpi, the image will print 2.667 inches x 2.667 inches. At 72 dpi, that same image will print 11 x 11 inches, but will be much lower quality.

Don't get too worked up on ppi settings for web images. There is no "standard dpi" for a web image (correct term is pixels per inch). As you say it doesn't matter what you set the ppi setting at. So long as the image can be viewed on the screen without scrolling most users are happy. All that matters therefore is the number of pixels in the image.

The ppi only matters when you come to printing which obviously won't be the case if you are resizing for the web.

If you use a standard screen resolution of 1024 x 768 then you would be advised to have the maximum size of your image at around 600 pixels on the longest edge. That way a "portrait" orientated image will fit on your screen (without having to move the scroll bar). If you resize to 800 pixels you can see that the screen res of 1024x768 will not fit the tall image into it's 768 pixel high resolution. Using a 600 pixel maximum size will allow you to view the image on your screen without scrolling.

The info above is all pretty good.