JPG Photo quality for the web

PH01

Does anyone know what is the recommended DPI and compression levels for JPG photos for the web?

I want 600x450 jpg pictures to download as fast as possible, so the size needs to be small, but I want good resolution. I'm using Paint Shop Pro 4 (got it free years ago), and I'm currently saving JPG files with 300 DPI with compression level '15'.
How far can I go before lose photo quality for the web?

PPC

I use 65 and there doesnt seem to be much difference, i'm using PSP7 aswell.
There is a little bit of colour change but not much.

FinoBlad

72dpi is the usual recomended minimum

PH01

Originally posted by PPC
I use 65 and there doesnt seem to be much difference, i'm using PSP7 aswell.
There is a little bit of colour change but not much.

Wow, 65 compression level! I'll give that a go - thanks.

Also, should I stick with 300 DPI? Would going to 600 or 900 make a difference?

havok*

Originally posted by FinoBlad
72dpi is the usual recomended minimum

72 is the industry standard for web. Tbh, theres no point in going any higher you wont see any differance, most screens can only display 72dpi regardless of how high the dpi image actully is.

PH01

Originally posted by havok*
72 is the industry standard for web. Tbh, theres no point in going any higher you wont see any differance, most screens can only display 72dpi regardless of how high the dpi image actully is.

But DPI doesn't effect the size of the file, does it?

FinoBlad

it does, do a search on d'web for a tutorial on "optimizing web graphics" etc

havok*

Yeah, the higher the dpi the bigger the file. If your using photoshop take advantge of the "Save for web" feature, its the dogs danglys.

p

If you have an image that's 100dpi or 2dpi it'll display exactly the same on the web.

Computers display one pixel for one pixel, and the DPI(or PPI, pixel per inch) varies slightly depending on what resolution and monitor size you have.

if you look at an image at 100% in an image editing program that's how it'll look onscreen.

DPI for web images only relates to what happens when you print the document.
If you set it to 72 then it'll print out roughly the same size as on your website.

Regarding compression, just use your eye to tell. Photoshop & fireworks save as web feature is quite good for doing visual comparisons.


- Kevin

DadaKopf

You really should get yourself a copy of Photoshop or Fireworks. Both preview the image quality before you save it and tell you how long it'll take you to download.

Often times, when optimsing for web, you should consider what you're using the graphic for. If it's a photograph, generally 72 is just fine and that will download pretty quickly, especially if it's big. For text, JPGs tend to get a bit 'blocky' in places that count so you might want to raise the quality a bit but the trick here is to keep those images really small.

In my experience, the times you want to use much higher quality (less compression) is when you have images with slight variations in colour (eg. a clear blue sky). Higher compression will notice slight variations in colour less and they'll appear ugly and blocky.

As for DPI: unless you're printing it out, scanning default resolution is around about 150, 300 is professional printing standard. For web, yeah, it's whatever the monitor is able to display.

For the web, you're really talking about balancing quality and speed - one for look, the other for usability. Work off 72 as you're standard compression level and tailor it to what you need. And get Photoshop!