Effective Use of Images

* Most designers think that a page with a total file size of 35k is pushing the limit. That 35k includes everything from images, HTML, Scripts and content.

There are three viable graphic file formats for the web -gif, jpeg, and png.

Characteristics of each graphic file format

gif (Graphic Interchange Format)

• most commonly used for creating text effects and logos that don't contain photographic elements.
• 8-bit color with maximum of 256 colors.
• Suitable for images with relatively few colors.
• Variations include interlaced, non-interlaced, transparent and animated.
• Best for logos, line art, screen captures, image text, transparency.
• Determined by bit depth and dithering (size)
• The lower the bit depth (the fewer the colors) the smaller the file size.
• Interlaced (Loads the image quickly and then builds it to improve in quality as other content loads. So you see the image but it improves as it loads.
• Non Interlaced whole image loads.

jpg (Graphic Interchange Format)

• most commonly used for photographs that contain many colors.
• 24 bit color with a maximum of over 16 million colors.
• Variations include regular and progressive.
• Best format for photographic quality images and detailed illustrations.
• Progressive JPEG Similar to interlaced gifs. A lower version of the graphic loads quickly and the full image gradually comes into focus.

png (Graphic Interchange Format)

• Can consist of 8, 24, or 32 bit color.
• Good for high and low resolution graphics.
• Variations include interlaced, non-interlaced and transparent.
• File format is better than gif or jpg in its display of color, although usually at the expense of file size.
• Has superior compression and imaging capabilities.

Animated Gifs

• Too many animations on a page can be distracting. A well, thought-out animation however can draw the users eye to the important content.

What is an advantage and disadvantage of an Animated gif?

• Can draw attention to a topic.

Can draw attention to a topic.
Can be annoying if over-used.
What is a transparent gif and what makes them useful?

Shows just the shape of the graphic and not the rectangular background of the image.
What graphic file type would best suit the following images?

banner + text = gif
photograph of person = jpg

Why would you want to use and interlaced gif or progressive jpg?

When you need to use a large image that would take a long time to load.

What is the most common image format and why?

Gifs, because most sites use flat color images to create menus, logos, and text.

What are several general guidelines for web graphics?

Keep images small. Keep them under 40k.
Consider interlaced or progressive formats.
Images are not just eye candy. Some of the best stories are told with images.
Why is it important to use the right images?

Knowing will help you make your images smaller, and it has a direct impact on image quality.

How can you optimize a graphic?

Reduce the number of colors as much as you can.
Crop your images as much as possible.
Use the right file type for the image.
Use <img> tag and scale the graphics by width and height. (This embeds the image so the browser doesn't have to determine its size and create a placeholder. <img src="image.gif" height="200" width="250" alt="text message">
slice large images and load each piece into a table to help speed-up load time.
Be aware that browsers cache images.
What are two advantages of slicing up larger images into sections?

You can rely on the browsers cache to reduce page load time, and you can swap sections of the image for "rollover" effects without having to load the entire graphic for each event.