POWER POINT PRESENTATION

EMPOWERMENT TECHNOLOGIES
GROUP 3
WEB GRAPHICS FORMATS
There are three file format for
graphics used on the web: jpg, gif,
and png. Each of these file formats
are designed with a specific purpose
in mind, so it is important to
understand the differences when we
use them in our websites
 JPG
 The jpg image format was designed to efficiently store and
compress realistic images and artwork (both color and
greyscale). The jpg format does a very good job in
compressing images with lots of colors and gradations in
colors. Think of a jpg as a highly compressed photograph.
 The jpg format is not capable of saving any transparencies. If
transparency is needed in background of your image, you
must choose a different format.
When saving images in the jpg format,
you can choose the level of compression
to balance the file size and image quality.
File size is directly related to the actual
size (in pixels) of an image. A larger pixel
size will always result in a larger file size.
EXAMPLES OF IMAGES THAT SHOULD BE
SAVED IN THE JPG FORMAT:
 GIF AND PNG

• The GIF and PNG image formats use what is called "index-color".
They store a minimized color palette in the image file and keys to
where those colors should be located in the image. File size for GIF
and PNG images is generally related to the number of colors used.
Commons numbers of colors are: 2, 4, 8, 16, 32, 64, 128, 256.
• The GIF and PNG image formats are ideal for images with flat colors
(no gradients) and hard edges. Common examples of these types of
images are logos, logotypes, and illustrations without gradients.
 TRANSPARENCY
 The GIF and PNG formats also both support transparency. If you
need any level of transparency in your image, you must use either a
GIF or a PNG.
 GIF images (and also PNG) support 1-color transparency. This
basically means that you can save your image with a transparent
background.
 Let's use the Good Food logo as an example. This has to be an image
file because we're using fancy type and also a graphic of an apple in
place of the a. We want our logo to sit on a light green background
color. Here's our background color we're saving the logo on
 The GIF and PNG formats also both support transparency. If you need
any level of transparency in your image, you must use either a GIF or
a PNG.
 GIF images (and also PNG) support 1-color transparency. This
basically means that you can save your image with a transparent
background.
 Let's use the Good Food logo as an example. This has to be an image
file because we're using fancy type and also a graphic of an apple in
place of the a. We want our logo to sit on a light green background
color. Here's our background color we're saving the logo on.
 VARIABLE TRANSPARENCY
The PNG file format is capable of saving variable
levels of transparency. This is known as the
alpha channel. Using variable transparency, we
can actually use transparencies as a gradient.
The easiest way to demonstrate variable
transparency is through an example. Below is
the same image twice, on two different
background colors.
 Notice how the background color simply fades
into the picture.

 Going back to our Good Food logo, we can use the

same technique to make sure our logo blends to
any background color.
 MORE ABOUT PNG
 The PNG format comes in two varieties: 8-bit and 24-bit.
 The 8-bit format functions just like a GIF file. It uses index-color and
can provide one color transparency. This is the format that you
should use most of the time when saving your images as PNG files.
 The 24-bit format functions more like a JPG file. You can save
photographs using this format, but in general the file size is bigger
than a JPG, so you should use a JPG instead. If you want to use
variable transparency, you must save your file as a 24-bit PNG. In
general, the only time you use 24-bit PNG files on the web is for
images that require variable transparency.
GIF VS. PNG
You might be wondering at this point how
to know when to use a GIF or a PNG. GIF is
an older file format going back to the early
1990's. It used to be used for really
obnoxious image animations, which have
experienced a resurgence in popularity in
recent years. GIF is the only file format that
can accomplish this.
 The PNG format is the newer and better format. The PNG
format uses a better compression scheme than GIF so the
file sizes are generally smaller. Additionally, PNG images
can be further compressed using a compression tool like
Tiny PNG or ImageOptim which is installed on the lab
computers
 Unless you want to animate a cat throwing a dog, or do
some sort of artsy loop thing, use the PNG format instead
of GIF.
 IMAGE FORMAT SUMMARY
JPG
 Used for photographs or any type of image with smooth
transitions between colors. Does not support transparency.
PNG
 Used for images with flat colors and hard edges, such as
logos, logotypes, and illustrations without gradients. Can have
either single or multiple levels of transparency.
GIF
 Used for goofy short animations.