Transcript Week3 - andrew robards

Week 3: Image Formats
Introduction
• This week we will learn about the different
image formats used on the web and when is
the correct situation for using each file type.
• This will be followed by an introduction to the
save for web tool and slicing tools in
Photoshop.
Introduction
• There are three main file types we’ll want to
focus on for saving images optimized for the
web, they are:
• GIF, JPG and PNG.
• Each file type has its own strengths and
weaknesses and it is very important to know
and keep these in mind when saving an image
to be used on a website.
JPEG
• JPEG (Joint Photographic Experts Group).
• JPEGs are a "lossy" format. That is, when you save an image as a
JPEG file it is compressed, meaning not all of the information in the
original image is preserved.
• JPEG removes some of the information to keep the file size small.
Thus, it follows that there is of course a quality loss.
• JPEG is intended to be used for photos, game screenshots, stills
from a movie, etc.
• In these type of images are no well-defined lines or sharp contrasts
between colours etc
JPEG ‘artifacts’
• The term JPEG "artifacts” refers to imperfections that are result of
JPEG compression.
• Notice how the sharpness has all but disappeared and the color
"leaks" into the surrounding area. Wherever there are sharp details
or color changes like in the above image, you will notice artifacts.
When to use JPEG
• JPGs are going to be your best bet when
working with photographs or graphics
containing complex effects like shadows,
gradients, etc.
PNG
•
PNG (Portable Network Graphics).
•
PNG is the image format to use for line art, text, screenshots of operating system windows, general
web graphics and "comic strip" style art.
•
PNG is a lossless format, meaning it won't distort or alter the original image this allows fine lines
and other details to be reproduced accurately.
•
Photoshop gives you two options when working with PNGs: PNG-8 and PNG-24.
•
PNG-8 is great for simple graphics, text etc while PNG-24 on the other hand, provides a much
higher quality image.
•
PNG-24s retain the original Photoshop files image quality and are great for images with gradients or
other areas with a high number of distinct colors.
•
PNG-24s can also handle transparencies!
•
24 bit PNG result in a file size often larger than a JPEG of the same image, but the image will be an
accurate reproduction of the original.
PNG
GIF
• GIF (Graphic Interchange Format)
• In almost all instances, GIF is obsolete and should not be used.
Where you have a GIF file, a PNG would do just the same and be
noticeably smaller due to superior compression methods.
• The only real exception to the use of GIF is for simple animations.
• The GIF format is widely integrated into popular web browsers, and
animated GIFs, although considered annoying by many, are
featured on a large number of sites.
• No other image format has the combined animation abilities and
widespread browser integration.
Animated GIF