Cropping images for web design

What size is recommended? I have always used 32K, but I am wondering if I should be using a smaller size. Maybe 25K. I lose a little quality at that size, but it is almost not noticeable.

 

i just save all of my web site images to 75% compression jpgs

-Dan

 

but that would range so much with each image. If you had some huge image, say 2400 x 1900 then it would save to 75% of that and take forever to download. Wouldn't it?

 

Image size versus file size is more about relevance.
I use photoshop and save for the web at about "60"quality on a jpeg.
If I make a gif I toy with the colors to get what I want.

I read somewhere that about %50 of surfers are now on broadband.
So I try to make my site good for both surfers on a slow dialup, but I try not to pixelate my jpegs so that it distracts from the site itself.

I may be an ametuer, but I think the question has to be more specific for an accurate answer.

 

I never see an entire website made around one image.
Most people use several images pieced together using tables with a background color. Can you post an example of what you are trying to do?

 

what would be the purpose of having that large of an image in a web interface.

highly graphical one image sites usualy are the spawn of lack of experience. i have found that designers who design only the graphical parts of web sites need to be fairly knowledgeable in the cutting-up process of creating a website to minimize the site size. not having that "development" knowledge leads to problems with the layouts and commpression of images.

 

To give an example of what I may do:
Create a gif with a transparant background cropping it very close to the object in focus. It will look pretty natural. If you create a large single image as a website you will run into a few problems.
SE's read text, not rastarized images.
You lose flexability of the site itself and will look odd on different screen resolutions.
Some people like alll the content to be an image because it will look identical do to different font styles and sizes. But you should still merge real text, tables, and images.
Also If you must have a single image as a website try drawing slices and each slice can be saved at a different compression.

 

What also is terrible is that browsers now have the ability to compress graphics.
AOL is awful at it and it comes preset in their browser to ruin many graphics.
Internet Explorer does this too in a different way... It shrinks the picture smaller with the ability to click it to make it actual size.

 

For my application I am using a 200pix wide thumbnail linked to a 640pix wide image. Below the thumb is a link to a really big 2048pix image. When you are trying to explain how to dis-assemble the plumbing under someones sink I find they will wait for the large picture even with a dialup. It makes for lots of pictures, but then the visitor can decide how much detail they need to see.

 

A lot of good responses. My rule of thumb is to make an image appear as good as possible and download as fast as possible. If an image is going to be large, I split it up using image ready and then put it back together in a table. A web browser will open up to four channels at a time for data transfer. Therefore it much more efficient to download four images that are only 15k each simultaneously than it is to download one image that is 60k. There is no hard, fast rule about what compression to use or which file format is better. For photos, jpg is ususally the best. For buttons, images with text, icons, etc, gif is usually better. Then each one should be compressed or color managed based on it's own merits, not some general purpose method. That is if you want to achieve the best possible results.

 

jpeg is good for webuse.

 

Absolutely. How much compresison should you use? As much as possible, as long as you image still looks good.

 

Photoshop's "Save for Web" function is really useful to determine the right balance of download speed and image quality. I really wouldn't publish anything before I go through that process.

AOL ruins grapihcs for the sake of an illusion of speed. But in its browsers there are setting that allows you to increase the image quality to the max, though I find many people unaware of it. Chances are if people are smart enough to find that setting, they wouldn't be using AOL in the first place.

 

One thing nobody mentioned (I think) is using PNG images with a custom palette. For example, the DP logo saved with a 256-color palette is 6,346 bytes; 10%-compressed JPEG is 6,514 bytes and 25%-compressed JPEG is 4,518 bytes. Comparable in size with JPEG, PNG uses lossless compression and will always yield sharp images, even if you have things like red or yellow lines in there (they usually turn out fuzzy and kind of gray-ish in JPEG).

J.D.