Transcript 2. Creating Images

Week 2 - Design Concepts:
INTRODUCTION TO WEB
DESIGN: CREATING IMAGES
Goals
 Understand how what dithering and
gamma are
 Understand how image compression
works
 Understand how to add images to your
web pages
Dithering
 Typically, modern monitors can display 24-
bit, “True Color”
 However, there are other monitors which
don’t have “True Color” capabilities
(usually older monitors)
Dithering
 As a result, 24-bit colors which are not
recognized by less powerful displays are
approximated.
 The approximation can result in a
speckled look called dithering
 Solution? The “Web Palette”
The Web Palette
 216 “Web safe” colors
 Cross-section of Windows and Macintosh
color palettes
 Colors look generally the same for all
users
 AKA – “Netscape Colors” or “Web Safe
Palette”
Gamma
 Gamma can be thought of as the
“brightness” of a monitor
 Windows & Unix displays tend to darker
than Macintosh displays
 Result? Images created on a Windows
machine may look “washed-out” on a
Mac; Images created on a Mac may
look too dark on a Windows machine
 Lesson? Test your images across
platforms or, at the very least, check for
gamma using a gamma correction tool
The Pixel
 Sample location and sample values
combine to make the picture element or
pixel
 3 color samples per pixel:
 1 RED sample
 1 GREEN sample
 1 BLUE sample
The Pixel - HTML
Fundamentals
color = “red” (Browser compatibility issues)
color = “#FF0000”
values vary from 00 to FF (hexadecimal)
0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f
#FF FF FF
Blue
Red
Green
The Pixel - HTML
Using Images
 Images take longer to download than text
 The larger the image, the slower the page
 Use optimization software
 Use thumb nail images
The Pixel
 Information about pixels is stored in a
rectangular pattern and displayed to the
screen in rows called rasters.
 Monitor pixels are actually circular light
representations of red, green and blue
phosphors
 Pixel density is measured using Dots Per
Inch (DPI)
Bit-Depth
 Number of bits to represent pixel color
Expression
Name
28
8-bit
216
16-bit
224
24-bit (True
Color)
Colors
256
65, 536
About
16-million
Images on the Internet
 There are actually two main categories of
images that you might encounter on the
Internet
 Raster Graphics
 Vector Graphics
Raster Graphics
 Color information
is stored based on
location and RGB
value
 Costs lots of disk
space
Vector Graphics
 Color information
is stored in a
series of
mathematical
calculations
 Don’t cost a lot of
disk space
 Fairly processorintensive
Image from
http://www.povray.org/
Raster Image Compression
 An image in its raw format would be too
large to transfer in a web download
 Because of this, images are generally
saved using any one of several
compression algorithms
GIF Format




Graphic Interchange Format (GIF)
“Lossless” Compression
Originally developed by CompuServe
You can reduce file size by color reduction
and changing bit-depth
 GIF allows for transparent images.
Transparency allows designers to display
images that seem as if they weren’t bound
by rectangular borders
GIF Format - Transparency
 How does it happen?
 The background of an image is set to a color that
the designer chooses to be “invisible” (this color
is later identified as the invisible color)
 The resulting image’s background disappears
and is replaced by the web page’s background
GIF Types
 GIF87a
 Can support up to 8-bit color (256 colors)
 Supports interlacing
 GIF89a
 Supports everything supported by GIF87a
 Also supports transparency
 Also supports animation
 Both types have universal browser-support
 Both types are saved with the .GIF extension
GIF - Interlacing
 Normal GIFs are displayed in their entirety
when the image is completed downloaded
 However, interlacing allows the image to “fade
in”
 How does this happen?
 Rows of pixels appear only after 12.5%
of it has been downloaded
 3 subsequent “passes” display 25%, 50%
and, finally, 100% of the image
 Results in slightly larger file size
JPEG Format
 Joint Photographic Experts Group (JPEG)
 Supports 24-bit “True Color”
 Good for images with large gradations in




color
Must be decompressed before they are
displayed in a browser
Based on spatial frequency
Samples image information in an 8 x 8 pixel
area
“Lossy” Compression – image information is
lost during the compression process;
Lesson? Make changes to copies of your
original!
JPEG Format
 Different compression ratios can be selected
 Represent a trade-off: File Size vs. Image
Quality
 Determined by “Q” setting (0-100)
JPEG “Q” Setting
 Lower setting is a more aggressive ratio,
resulting in smaller file sizes, but lower
image quality
 Higher setting is less aggressive, resulting
in better quality images, but larger files
Progressive JPEGs
 Display in a series of passes (similar to




interlaced GIFs)
Number of passes can determined when the
graphic is saved
Slightly smaller file size than regular JPEGs
Require more processing power than
regular JPEGs
Not supported by all browsers
When to use JPEGs
 Images with large
gradations in color
(photos)
 DO NOT USE FOR
IMAGES WITH
“FLAT” COLOR
PNG Format
 Portable Network Graphic (PNG)
 Open source solution to GIF patent issue
 Like GIF, good at compressing images
with large areas of flat color
 Support of up to 24-bit color
 Lossless compression
 Two dimensional progressive display
(similar, but better than, GIF’s interlacing)
PNG Format
 Supports “shades” of transparency;
allows for more than 1 color to be
transparent
 Built-in Gamma correction
 Includes text capabilities for notes such as
copyright info
 Browser support is spotty, at best
 Never use for images with large color
gradations (use JPEGs instead)
Managing Graphics
 Try to design new graphics using Web-
safe colors
 Keep graphic dimensions small (smaller
graphics result in smaller file size)
 Use PNG and JPG.
 PNG for transparent
 JPG High Resolution pictures
 GIFs are almost useless with the advent
of PNGs.
Managing Graphics
 Don’t attempt to reduce color color
information on your own (results in
dithering) -- browsers are capable of
approximating nearest colors
 Use correct compression schemes
appropriate for your image!
The <img> Element
 The src attribute specifies the
filename of an image file
 To include the src attribute
within the <img> element, you
type
<img src =“mygraphic.png”>
The alt and title Attribute
 For an XHTML document to be well
formed, the <img> element must include
the src , and alt/title attributes
 For Firefox to show alt text, you must
include the title attribute as well as the
alt attribute.
The alt/title Attributes
 The alt/title attributes is very important
for user agents that do not display images
and Web browsers that are designed for
users of Braille and speech devices.
 Alternate text will display if an image has not
yet downloaded, if the user has turned off the
display of images in their Web browsers, or if
for some reason the image is not available
 This enables 508 compliance attributes. If
caught not using 508 compliance
requirements, the fine is a 10K fine per
incident.
The alt Attribute
 The alt attribute also serves
another purpose:
 For any <img> elements that do not
include a title attribute, the value
assigned to the alt attribute appears as
a ToolTip in Internet Explorer and other
browsers when you hold your mouse
over the image
 This is not true for Firefox, it requires the
title tag on images, so just include
both for cross browser compatability.
Height and Width
 When you create an <img> element that
includes only the src and alt attributes, a
Web browser needs to examine the image
and determine the number of pixels to
reserve for it.
 However, if you use the height and width
attributes to specify the size of an image, the
Web browser will use their values to reserve
enough space on the page for each image.
 Why is it not wise to use the height and
width attributes to resize an image on your
Web page?
Height and Width
 Why is it not wise to use the
height and width attributes
to resize an image on your Web
page?
Height and Width
 ANSWER: The reason not to use the
height and width attributes to modify the
size of an image is that although you
may reduce how the image appears in
a browser, the browser still needs to
download the original image in its
original size, which may result in the
page rendering more slowly than
necessary.
Using Images from Other Locations
 You can place images in subfolders that
are relative to the location of the current
Web page folder
 You can link to images at other locations
on the Web by assigning an absolute URL
to the src attribute of the <img> element.
Questions?