file size of images

[frankv72]

Hello Everyone,
What size image file is standard for a web site? I have a gallery page as part of my site created with NVU with about 10 to 12 photos of my woodworking and the page takes forever to load up even though I have DSL. They are JPEG images approx 650k each. Is this too large and if so, how do I reduce them so that the page loads up fast?
Thanks.
Frank

[Snarpy]

Do you have any image processing software? I personally use Fireworks and others use Photoshop, but both cost quite a bit.

Something like the freeware Irfanview (http://www.irfanview.com/)might suit you. Other people might recommend other software.

With the right software you can resize the images andr set a lower DPI.

[Jeff]

My advice - think in pixels for the web (and ignore dpi) - reduce your images to say 740 pixels wide and adjust the jpeg compression level to compress as much as possible without losing visual quality / introducing too many visual artifacts. You should be able to get the image sizes to under 200 Kb even for large images - in the 100's I would say is reasonable for the large image. For the main non-gallery pages try to keep images under 20-40 Kb in size each.

[frankv72]

Thanks for the advice.
I will try out Irfan. I also have paint.net. Probably would work also?
I did see some some programs out there designed specifically for creating thumbnails. Do these programs just make it easier to shrink down photos instead of manually shrinking them via programs such as Irfan or Paint.net?
I will only be posting around 15 or so photos on my gallery page so I suppose I could just do them individually.
Thanks again!
FrankV

[Mandi]

Back when we all had CRT monitors exclusively, I learned the 72 dpi rule - no monitor resolved higher than that, so saving a meant-for-web image with a higher resolution was just a waste of bandwidth and download time. I've lost touch with this - is it still true for LCD screens, or do they resolve higher? I can't be hugely higher, I would think.

Anyway, digital cameras, and even scanners if you're scanning real photos, digitize the images at much higher resolutions which is probably where your enormous file size is coming from. The higher resolutions look better in print - our eyes (obviously!) can resolve much higher than 72dpi. Even the inkjet printer I bought in 1992 printed at 300 dpi!

I don't like my images to stretch across the whole page, but 740 is probably a good maximum as a rule of thumb; people usually don't browse less than 800 wide these days . . . and the Luddites with 640x monitors can just grit their teeth and sideways scroll, LOL! I generally aim for something around 500 wide, with the aforementioned 72 dpi resolution. That should give you images WELL under 100K apiece, and probably half that.

For image processing, I like Paint Shop Pro. I've used it since 1997 and never felt it lacked for capability. I also am still running version 7, LOL! I bet you can pick that up on Ebay for cheap, if you cared to.

Look at the open source program GIMP (http://www.gimp.org/), for zero cost. I know it's well thought of, I've just never played around with it.

[kitchin]

Normal screens these days seem to be 72, 90 or 96dpi. High density seems to be 200dpi, and smart software is supposed to zoom 2x automatically. Small devices like cell phones can be in the 200dpi range.
I think the Nokia 770/n800 run at around 225 dpi, and the iPhone will be 160dpi... The IBM T220/T221 (http://en.wikipedia.org/wiki/T221) LCD monitor is 204dpi. This is all info from a Mozilla bug discussion (https://bugzilla.mozilla.org/show_bug.cgi?id=177805). I think they decided to use a reasonable integer zoom. So displays below 144dpi with have no zoom, and displays from 144dpi to 240dpi zoom at 2x, etc. In other words, on a 200dpi display, 1px in CSS means a 2x2 block of screen pixels. If I read that thing right... See also this document about the Safari web browser: http://webkit.org/blog/?p=55
The amazing w3c document proposing that CSS 1px not equal one device pixel is here: http://www.w3.org/TR/CSS21/syndata.html#length-units
It has something to do with how close you hold the display device to your eyes when you read it!

[kitchin]

Here was some grumbling about using integer zoom instead of an exact decimal value.

Nicolas Mailhot, Comment #65 (https://bugzilla.mozilla.org/show_bug.cgi?id=177805#c65)
Whatever unit you choose, please make it based on em not millimeters, inches or some hardwired "96dpi" rule... I happen to use true 100dpi displays. Native apps know it and act accordingly. I can assure you wherever a browser (or another app) decides I shall use a 96dpi display I see it at once. So don't give me crap about 96=100 (or even 144=96). A user can feel it. I don't want to scale things in my mind or with my eyes just to save some CPU time. I *paid* (or my employer did) for a powerfull system to do things for me.

I didn't understand it and the other commenters seemed to ignore him. Does an "em" look smaller on a 100dpi screen than a 90dpi screen? Should it? I think the integer zoom (1x) would be the "native" look, not the decimal zoom (1.1x) ????