best settings for webpage graphics and photos

mista-two-k

Beginner

Posts: 57

3+ Months Ago

hello,

i am operating a site where i need to put a lot of photos on one site (not a gallery), just like a long text with many photos. now id like to know, which are the best settings for those photos to keep its quality more or less good but keep the size small, so that it loads quickly.

shud i choose between .gif or .jpg? if .jpg, how much should the quality be (in photoshop u can choose between 1-12)

thank u

righteous_trespasser

Scuffle

Posts: 6231

Loc: South-Africa

3+ Months Ago

I find that when creating thumbnail images photoshop's "Save for web" (as GIF) works without losing too much quality ... but people tend to differ about this one ...

graphixboy

Control + Z

Posts: 1827

Loc: In the Great White North

3+ Months Ago

my general rule of thumb is if the image isn't very complex or doesn't have a lot of colors (logo, icon, piece of text without a complex bg) then a gif is a better option because its size increases as the number of colors increase.

If the image doesn't fit those rules (photo, very complex image pattern, etc) I'll use a jpeg. I just photoshop's save for web option to preview the different jpeg quality settings and see whats an acceptable trade off between size and quality

ATNO/TW

Super Moderator

Posts: 23473

Loc: Woodbridge VA

3+ Months Ago

You really shouldn't ever use gif format for anything other than drawings you create, such as logo's, banners etc, for the simple reason that gif format ONLY supports 256 colors - you definitely NEVER want to use it for photos. Pictures will lose serious color quality if you save them as gif format. The preferred format for pictures currently is jpg which will retain all 16 million colors. The image should be saved at 72DPI RGB color. In PS you have options of quality optimization from 0-100% with 100% being the max. Typically something around medium roughly 60% will provide a small enough file size and maintain respectable quality. You'll have to experiment with that. You'll want to keep the file size as small as possible to promote faster page load, but high enough so the image still is worth looking at.

You can also choose png format for pictures, however, the file size will be larger than jpg but the picture quality will be higher. *note there are some issues with browser support. If using png images you should choose 24bit not 8 nit to avoid browser issues.