Hi, I want to put some still photos on my site. What is the recommended resolution?

i guess it will depend on your default picture resolution... In that way you can make your photos look nicer... can you post some example?

How about 450x600? with 300 pixels per inch.

OH. maybe this will work...

Some time, photo can promote the beaty of your site.
Many context is hard to see. Like my sites.

the resolution doesn't matter for web photos: 1pixel is one pixel

You can put a 300dpi photo on a web page, but it's going to be HUGE file and your pages will take forever to load if you have many photos to display.

Originally Posted by LadynRed

You can put a 300dpi photo on a web page, but it's going to be HUGE file and your pages will take forever to load if you have many photos to display.

it's the same file size for the web whether it's 300 dpi or 72dpi or whatever (actually we're talking ppi - pixels per inch, not dpi - dots per inch which is printed resolution)

see
http://pp.kpnet.fi/prescott/stuff/leaves72.jpg (72ppi in photoshop)
and
http://pp.kpnet.fi/prescott/stuff/leaves300.jpg (300 ppi in photoshop)'

BOTH are 73k when exported

If I save a JPG at 300ppi in photoshop I end up with a much bigger file than I do if I save it out at 72ppi. I do digital scrapbooking, I need 300ppi photos for print resolution, so I KNOW the JPG files are bigger.

For example, a 300dpi photo, 2500x2156px 300ppi saved as a JPG (NOT save for web !), has a file size on my drive of 2.9MB. The same photo, saved at 72ppi (using save for web which reduces the file to 72ppi) gives me a file size of 1.2MB. Putting either on a web page would be ridiculous.

download and view those jpegs in my example and check the file sizes: you'll find they're both 73k

then open them both in photoshop and check the ppi: one is 72ppi, the other is 300ppi

both those were saved as jpg (not saved for web).

Originally Posted by davemies

download and view those jpegs in my example and check the file sizes: you'll find they're both 73k

then open them both in photoshop and check the ppi: one is 72ppi, the other is 300ppi

both those were saved as jpg (not saved for web).

So is the lesson here that dpi doesn't matter? Okay, what DOES matter then in regards to the technical specs on a photos for websites?

Dots or pixels per inch doesn't mean a thing in a context that doesn't have inches. You can take a single pixel image - like a spacer gif - and print it at 72 or 300 ppi; either way it's the same image but printed so small you can barely see it. When we talk about prints, we generally mean an 8x10 or a 4x6, which is the number of inches on each side. I'm using a 22 inch screen; a friend of mine has a laptop with a 13" display. The same image will need a different number of inches to show on different sized monitors ... that's outside your control as a web designer.

What does matter is the overall size or dimensions. If you make your image 640x480 pixels, even the most ancient computer will be able to display it without scrolling. I use 800x533 on my main site, and 560x373 on my blog. The smaller images are because the post column is too small.

brian - what matters is getting the compromise between image quality (i.e. the amount of compression) and filesize.

ideally you should aim for around 50k total page weight (total of all images, html, css, javascript, etc), though with the increase in broadband that figure could realistically bedoubled or trebled - as long as you don't leave those on dial-up too far behind.

it also depends on what your site is as to how long - even dial-up users - will wait. for something like a photography site or an artist's site users could reasonably expect to wait longer for all the images to load.

remember as well that headers and logos that appear on every page are saved in your browser cache so only have to be downloaded once.

the amount of compression you use for photos depends on how important the image is and how many you have. for a decorative type of image that isn't a prime image you could use a little more compression than normal.

for a site with important photographs you need to try different settings - gradually increasing the compression (i.e. lowering the quality) say in steps of 5% until the picture shows more signs of compression/quality loss than you wuold like, then back up a bit.

a rough guide would be somewhere between 70-85% compression though it varies according to the individual image and the graphics programme you use. using a *small* amount of blur to soften the image will allow further compression than normal too.

do you use photoshop, fireworks, psp, the gimp... ??

if you have lots of photos and you're concerned about the load time then consider using thumbnails (linked to bigger images) or simply making the images smaller by say 50px. thoughtful cropping can make images smaller whilst still retaining - and usually improving - the impact of the image.

hope that helps!

I use photoshop and choose the option save for web. Nothing to do something else..

Sure there is -- you use SAVE AS, then choose JPG as the file type -- it will NOT do the compression for web as the Save For Web option will.

"it will NOT do the compression for web as the Save For Web option will." i'm not sure what you mean by this - do you mean that it doesn't change the ppi by using the SAVE AS (rather than save for web) or do you mean the amount of compression??

Both use compression, but it looks like different algorithms. I use Save As when I need to produce a jpeg for a printer, at quality 12, but Save For Web produces smaller but almost identical files when the pixel area is smaller. Probably throws away more subtle detail that isn't there in the first place...

Save For Web will flatten all your layers, but it won't change ppi/dpi. There's really no such thing as pixels per inch on the web.

"There's really no such thing as pixels per inch on the web." which was my point in the first place

it depends on where you want to paste it .. for example .. top .. 900*150 pix
left .. 150*600 middle .. 400*300 ... use Jpeg or PNG ..

Originally Posted by pavel88

it depends on where you want to paste it .. for example .. top .. 900*150 pix
left .. 150*600 middle .. 400*300 ... use Jpeg or PNG ..

huh, that's got nothing to do with resolution. and you wouldn't want to use a png for a photo