Recommendations for graphics within a web site

Question

I have more graphics than StackOverflow, but less than CNN.
What should I know about the graphics files I am uploading?
Should I process my graphic with some utility before I add them to my web site?
What formats should I avoid?
I want the graphics to look great but load fast. Thanks.

Answer 1

This series of blog entries from the Yahoo User Interface Blog is an great source for dealing with images on a website:

Image Optimization Part 1: The Importance of Images

Image Optimization Part 2: Selecting the Right File Format

Image Optimization Part 3: Four Steps to File Size Reduction

Image Optimization Part 4: Progressive JPEG…Hot or Not?

Another nice one is

Image Usage for Developers

Answer 2

GIF works well for smaller images, and images that need to look the same, no matter what (ie, logos). GIF can generally be made to be an even smaller file if you play with the size of the colour pallete.

JPEG works well for larger files because it uses compression. Never use JPEG for logos! Artifacts are a common occurance on large fields of the same colour, it doesn't look nice.

As far as what you should do on the server, you should make sure your server makes the browser aware that it can cache your images. The easiest way most sites do this is by using a seperate subdomain for their images (and often other static content, like javascript) like http://static.*.

Answer 3

I would suggest PNG as your de facto standard. It seems to have many of the best traits of GIF and JPEG:

http://en.wikipedia.org/wiki/Portable%5FNetwork%5FGraphics

Be carefull to avoid many small images on one page. I say that because most browsers can only allow two concurrent requests at the same time and having a large amount of uncached images on one page can have a significant impact on your load time.

One way you can handle this is putting similar images into one file and then using offsets creatively in css to only show small sections at a time. To the user the process is completely transparent except for the faster loading time.

Answer 4

Generally your going to see GIF, JPEG and PNG.

• GIF - Supports transparency, but only @ 0% or 100%. So a curved surface will look ugly, as chunks of it is cut off.

• JPEG - Lossy, but you will probably have the smallest file sizes. Doesn't support transparency. Be extremely careful that you keep the masters when working with jpeg, as the quality will go down for each subsequent save.

• PNG - Doesn't loose image quality, which means it is great for logos, graphics with text, drawings, etc. The main downside is that some browsers don't support it as well (like IE 6/7), particularly if you try to use transparency. So long as you don't use the transparency PNG is an excellent hammer for most imaging tasks.