Pages: [1]   Go Down

Author Topic: proper settings for web images  (Read 4087 times)

bellimages

  • Sr. Member
  • ****
  • Offline Offline
  • Posts: 381
    • http://www.bellimages.com
proper settings for web images
« on: February 23, 2009, 04:54:28 pm »

Naturally, I want the best quality that's possible on the web. The images on my site represent my art, and quality is important. On many occassions, gallery owners, national show juries, and potential clients see my work for the first time there. I am saving out my art for my web person. She suggests either JPG or GIF format. It was my understand that gif files are for graphics, not photos. That may, or may not be true. I see that I can choose PNG as a format in Photoshop. I'm at a loss. Can anyone help?
Logged
Jan Bell, Owner/Photographer, Bell Image

frugal

  • Jr. Member
  • **
  • Offline Offline
  • Posts: 73
    • http://www.andrewdaceyphotography.com/
proper settings for web images
« Reply #1 on: February 23, 2009, 05:07:46 pm »

GIF only supports 8-bit colour (256 colours) so is not appropriate for photos.

JPG is pretty much the standard for photos on the web, save at a high quality setting and you shouldn't notice much/any loss in quality. PNG is another viable choice if you save in 24-bit, but older browsers don't support it so you could be cutting off some potential audience, and others are simply less familiar with the format and may not understand that it is a photo-quality image so I'd say JPG is probably your best bet.
Logged

DesW

  • Full Member
  • ***
  • Offline Offline
  • Posts: 180
proper settings for web images
« Reply #2 on: February 23, 2009, 06:45:09 pm »

Quote from: bellimages
Naturally, I want the best quality that's possible on the web. The images on my site represent my art, and quality is important. On many occassions, gallery owners, national show juries, and potential clients see my work for the first time there. I am saving out my art for my web person. She suggests either JPG or GIF format. It was my understand that gif files are for graphics, not photos. That may, or may not be true. I see that I can choose PNG as a format in Photoshop. I'm at a loss. Can anyone help?

Hello,

I do  Fine Art books for Press/Web /etc this may help

Yes the limited Colour depth of the GIF format is NOT recommended for Full tone Photo output--  Jpeg for your application.

Couple of possibly useful tips.

Convert to sRGB for the Web.

To make sure your clients are to view your work the size you deem, you may like to follow this simple method.

Firstly you do NOT have to resize to 72DPI for web viewing although it is the  formulae setting most preferred.

OK  say you are leaving your file in 300 DPI( this works in ANY DPI setting)

A: Open Pic

B: Open NAVIGATOR Palette .

C: Zoom or reduce your file to the SIZE you see on your Monitor-- when you see  the  version you are happy with--THAT is the EXACT size your Client will view when they open it at their end whether they have a 50" monster or a Palm P-!

Glance over to the NAVIGATOR Palette and make a note of the percent in the bottom left corner--then-

D:Go to Image> Image size> Document Size  in the dropdown and fill in that EXACT percent in the Width box-- the Height will change also--

Save as Jpg /etc.

Good Luck

DesW

Des
Logged

frugal

  • Jr. Member
  • **
  • Offline Offline
  • Posts: 73
    • http://www.andrewdaceyphotography.com/
proper settings for web images
« Reply #3 on: February 23, 2009, 08:08:10 pm »

Pixel's per inch (ppi) is the correct term for resolution for an image, not dots per inch (which refers to ink dots on a paper), and is totally meaningless for screen display.

I'm not sure what you're referring to about adjusting the size so that it will match no matter what the viewer is viewing it on, the resolution of their display will completely change the size. There's still plenty of people out there running pretty low resolutions on their displays be it due to having an old computer and monitor or because they find higher resolutions too hard to read.

If I adjust my image to be 800 pixels on the long side that's going to fill the width of an old 800x600 display (which means you'll probably need to scroll horizontally due to the browser taking up some of the space) and will be too big for an iPod Touch's 480x320 screen (which means it will have to scale down the image to show the entire thing). That same image will look tiny on a 50" HD display using 1920x1080 (1080p resolution) because it will only occupy 41% of the width of the screen, blowing it up to fill the screen will make it look pixelated.
Logged

DesW

  • Full Member
  • ***
  • Offline Offline
  • Posts: 180
proper settings for web images
« Reply #4 on: February 23, 2009, 09:34:59 pm »

Quote from: frugal
Pixel's per inch (ppi) is the correct term for resolution for an image, not dots per inch (which refers to ink dots on a paper), and is totally meaningless for screen display.

I'm not sure what you're referring to about adjusting the size so that it will match no matter what the viewer is viewing it on, the resolution of their display will completely change the size. There's still plenty of people out there running pretty low resolutions on their displays be it due to having an old computer and monitor or because they find higher resolutions too hard to read.

If I adjust my image to be 800 pixels on the long side that's going to fill the width of an old 800x600 display (which means you'll probably need to scroll horizontally due to the browser taking up some of the space) and will be too big for an iPod Touch's 480x320 screen (which means it will have to scale down the image to show the entire thing). That same image will look tiny on a 50" HD display using 1920x1080 (1080p resolution) because it will only occupy 41% of the width of the screen, blowing it up to fill the screen will make it look pixelated.

Hello Again,

Ah yes post in Haste-regret at leisure-- I hope the original poster picks up your corrections.

I should have pointed out PPI on that score

My mistake in the sizing explanation--yes what I should have pointed out is that using the scaling method I outlined will give you the SIZE YOU WISH TO OUTPUT TO THE CLIENT'S SCREEN.

You are correct whilst it will appear at 100% on HIS screen it will not be on say a smaller nor larger one.

I stand humbly corrected.

The technique though remains a quick way to visually see the size you wish your benefactor to view the File.

Thank you again,

Des W Photoshop Beginner




Logged

bellimages

  • Sr. Member
  • ****
  • Offline Offline
  • Posts: 381
    • http://www.bellimages.com
proper settings for web images
« Reply #5 on: February 24, 2009, 10:05:05 am »

Well, I should start by saying that I'm an advanced Photoshop user. So I know how to size the images that I'm going to be using .... and how they will appear on various screens.

My images will display in a space that is 432x432 (ppi) -- some are square, some are vertical, and some are panoramas. I don't need any help with sizing them; What I asked for was help in saving them out.

I've spent the past 10 years working to achieve quality work; and I've spent a fortune on gear. So I want my web images to be their absolute best to represent my art. That's why I asked what format is best. I had always heard that GIFs were for graphics only (not photos). And PNG is a newer format (that I didn't understand). So thanks for educating me on PNG.

Do you all feel that jpgs are still the best choice?
Logged
Jan Bell, Owner/Photographer, Bell Image

PeterAit

  • Sr. Member
  • ****
  • Offline Offline
  • Posts: 4559
    • Peter Aitken Photographs
proper settings for web images
« Reply #6 on: February 24, 2009, 05:51:15 pm »

Quote from: bellimages
Well, I should start by saying that I'm an advanced Photoshop user. So I know how to size the images that I'm going to be using .... and how they will appear on various screens.

My images will display in a space that is 432x432 (ppi) -- some are square, some are vertical, and some are panoramas. I don't need any help with sizing them; What I asked for was help in saving them out.

I've spent the past 10 years working to achieve quality work; and I've spent a fortune on gear. So I want my web images to be their absolute best to represent my art. That's why I asked what format is best. I had always heard that GIFs were for graphics only (not photos). And PNG is a newer format (that I didn't understand). So thanks for educating me on PNG.

Do you all feel that jpgs are still the best choice?

Save as highest quality JPEG or PNG. There may be a few people with browsers that don't support PNG, but this group will not include anyone who is serious about photography or who is a potential customer.

You need to understand how browsers display images. If the HTML does not specify an image size, the image will be displayed at 1:1, meaning 1 screen pixel per image pixel. If the HTML specifies a size (a width and a height, in pixels) the image will be either enlarged or shrunk to fit. If it is enlarged by the browser (upsampled) it is going to lose quality. If it is shrunk by the browser, it may lose quality but for sure the downloads will be longer than needed (because you could have published a smaller image). So, given your 432x432 pixel display area, resample your images to be 432 pixels on the long side, save as JPEG or PNG, and you should be golden (and use sRGB as someone else mentioned).

You will post your URL, I hope!

Peter

Logged

Andrew Fee

  • Jr. Member
  • **
  • Offline Offline
  • Posts: 87
    • http://
proper settings for web images
« Reply #7 on: February 25, 2009, 11:20:09 am »

When saving for the web, you have to make sure that the image is in the sRGB colour space. If you are using Photoshop CS2 or earlier, you will have to do this manually and it's done by going to Edit → Convert to Profile before saving. In CS3/4 I believe the "save for web" option does this automatically. (note: you may see colours change when you use the "save for web" feature, but that's because it's not colour managed like the rest of Photoshop—don't worry about it)

It's probably beneficial to embed the sRGB ICC profile in the image when saving as well if filesize isn't a concern (it's an option in the save dialogue box) as some browsers (Safari and Firefox in particular) are able to see this and apply colour management to the image.

PNGs are higher quality files as they use lossless compression, but JPEG at the higher quality settings should be fine for the web.
Logged

frugal

  • Jr. Member
  • **
  • Offline Offline
  • Posts: 73
    • http://www.andrewdaceyphotography.com/
proper settings for web images
« Reply #8 on: February 25, 2009, 06:37:35 pm »

Quote from: DesW
My mistake in the sizing explanation--yes what I should have pointed out is that using the scaling method I outlined will give you the SIZE YOU WISH TO OUTPUT TO THE CLIENT'S SCREEN.

You are correct whilst it will appear at 100% on HIS screen it will not be on say a smaller nor larger one.

Okay, correct me if I'm wrong, but it sounds like you're intending this sizing method for use when the viewer's screen is a known quantity?

I may just be misunderstanding your method and its intent, but I'm still not clear on what you're trying to achieve with this method. I have a very large monitor at home, but I know that most web users don't have as large a screen so I size by pixel dimensions to something that is more appropriate for their screens. This will make the image look very small on my screen but I know from experience what typical resolutions are and try to come up with something appropriate. It does make gauging detail on my screen tough though since at 100% on my screen it's very small and that makes it difficult to gauge things like output sharpening (which I mostly just have to know what's appropriate based on the other sharpening I do for an image).

Again, it may just be that I'm misunderstanding your method or what the intent is.

As for the other comments, I'd agree that either JPG or PNG is great, I'd still be inclined to lean toward JPG at high quality for the broadest support and the familiarity people have with the format. I could be wrong, but I thought that PNG used lossless compression but at the sizes the poster is talking about for the web I wouldn't worry about the quality loss from JPG at maximum quality. I definitely agree that converting to sRGB and embedding that profile in the image will be the best you can do in terms of screen display. That should give you an image that will look good on the majority of non-colour managed displays and embedding the profile will improve the quality for those people that do have a browser that supports colour management.

One last comment I'd make would be to make sure your monitor gamma is set to 2.2. Macs used to use 1.8 but 2.2 has become the standard and it will help make sure your images look their best.
Logged

DesW

  • Full Member
  • ***
  • Offline Offline
  • Posts: 180
proper settings for web images
« Reply #9 on: February 25, 2009, 09:46:03 pm »

Quote from: frugal
Okay, correct me if I'm wrong, but it sounds like you're intending this sizing method for use when the viewer's screen is a known quantity?
One last comment I'd make would be to make sure your monitor gamma is set to 2.2. Macs used to use 1.8 but 2.2 has become the standard and it will help make sure your images look their best.


Good Day Frug,

Ample words of wisdom there--

Yes that is basically it-- I understand you do not know the exact size of the monitors it is to be viewed ,but it is a quick way for the sender to visualise the output size before sending.

Possibly saving time rather than going to Fit Image /etc and trying and closing/etc--No?

Or if sized to 1060 Px width most files will open at full screen on most monitors out there.

I gather we still only have Safari and Firefox as Colour rated browsers on the WWW--c'mon Windoze!

Best again,

Des
Logged
Pages: [1]   Go Up