Download Working with Images for the Web Overview Using GIFs and JPEGs

Working with Images for the Web
Using GIFs and JPEGs
Overview
The two most popular formats for pictures on the internet are GIF
and JPEG. Both will work on your web page, but each has pros
and cons. This guide will show you when to use each format and
how to create professional-looking images for the web, employing
transparency and avoiding common mistakes.
In This Guide
Overview ..............................................Page 1
The Basics ...........................................Page 1
JPEGs ..................................................Page 1
GIFs ......................................................Page 1
The Basics
Transparency ......................................Page 1
An image contains a lot of information. The larger the image, the
more information it contains. However, users expect web pages
to load quickly. Large images take longer to load. To speed up
the load time, it is possible to pack the image information into a
smaller file size using complex algorithms. Two of these
compression formats are GIF and JPEG.
Anti-aliasing .........................................Page 2
Blending and Halos ............................Page 2
For More Information ..........................Page 2
R elated Guides
Photoshop Elements
JPEGs
The JPEG format (made by the Joint Photographers Expert Group) is ideal for
photographs. It compresses the information in the image by using complex
algorithms, but maintains the colors the image contains. Photographs can
have millions of colors. If you need to place photographs on your web page,
use the JPEG format.
Figure 1. A JPEG image.
JPEGs use a los s y compression format, which means the more the image is
compressed, the worse it will look. At high compression, you see artifac ts ,
pixels that seem discolored. These artifacts are more noticeable in images
with solid colors and les s notic eable in photographs, whose natural color
shifts hide the artifacts.
GIFs
GIFs are limited to 256 colors. During compression, the image uses fewer and
fewer colors. The simpler the image, the smaller its file size and the faster it
downloads. The GIF format is typically used for images with a couple of nice
solid colors like most logos, line drawings or cartoons.
Figure 2. A GIF image.
GIFs can also be animated, by giving the image multiple frames which cycle
like an animator’s flipbook. There are programs that create animated GIFs.
This guide doesn’t cover animated GIFs, but you can find out more by
searching the web.
Transparency
Figure 3. A GIF image with a
JPEGs cannot be made transparent, but GIFs can. This is useful when you
transparent background.
want to display an image on top of a multi-colored or textured background
without an ugly bounding box. In the picture to the right, the dog is set against
a background of bright green – a distracting choice. The picture at bottom
right removes the green background by making it transparent.
GIF transparency works by allowing you to select one color from your image
to become transparent (in our example, the green background). In order to
have a solid area of transparency, you have to have a solid area of the
selected transparency color.
Quick Guide
Information Technology Services λ Ithaca College
Copyright 2010 Ithaca College - All rights reserved
Anti-aliasing
Most graphics have a soft edge which is achieved through an optical illusion called anti-alias ing. Antialiasing helps our eyes see a smooth line, especially on diagonals and curves. The effect is achieved by
blending the colors of the foreground and background.
Figure 4. A GIF image: aliased (left) and anti-aliased (right).
Notice how much smoother the anti-aliased symbol on the right appears. Under some circumstances, this
blending can lead to nasty results.
Blending and Halos
Remember, only one color in a GIF can be made transparent. That means all the pixels blending the
foreground and background colors are going to remain opaque, as these pixels are different colors. These
transition pixels show up as an ugly halo if the background color of the web page and the background color of
the GIF image contrast with each other.
Figure 5. "Halo" caused by anti-aliasing.
In Figure 5, the original image (top left) was created with a red background. The destination web page has a
black background. Placing the transparent GIF image on that web page (bottom left) leaves a halo of reddish
pixels. These are the pixels that were used to blend the foreground and background colors of my original
image.
The solution is to think ahead. When creating your GIF image, choose a background color that matches the
background color of the destination web page. Then the transition pixels employed in anti-aliasing will blend
your image into the page, creating a professional final product.
For More Information
A variety of support services are available from ITS if you would like additional help:
Computer training on a variety of topics is available to faculty, staff, and students at no charge through the
Technology Learning Center (TLC). Check out the current TLC training schedule online at
https://www.ithaca.edu/its/workshops
Online documentation and tutorials on IC-supported computing software and systems are available at
https://www.ithaca.edu/its/traindoc
Page 2 of 3
Last Updated March 19, 2010
Information Technology Services • Ithaca College
Frontline computing support is available through the ITS Helpdesk in 104 Job Hall; send e-mail to
[email protected] or call 607-274-1000.
Backline consulting support is available in the Technology Learning Center, room 101 Friends Hall.
Copyright 2010 Ithaca College - All rights reserved. This publication may be duplicated in its entirety for use in not-for-profit educational
settings. All copies must include this copyright statement. Any other use requires permission from Information Technology Services at
Ithaca College, 607-274-1000, [email protected].
Page 3 of 3
Last Updated March 19, 2010
Information Technology Services • Ithaca College