1. IMAGES
HTML5 & CSS3 Visual Quickstart Guide
Chapter 5

2. Images for the Web
• Format
• Graphics used must be in a format that all viewers can see
• GIF and JPG most widely used
• PNG is catching up!
• PNG often better choice than GIF, because it generates smaller file
sizes and has superior transparency support
• Current browsers: GIF, JPG, PNG
• Color
• Almost all Web users have 24-bit or 32-bit monitors
• All modern monitors display 16m colors
• In early days, monitors only handled 8-bit colors
• Restricted us to browser safe colors (16 of them)
• Inside back cover of book gives fold-out color chart

3. Size and Resolution
• Digital images measured in pixels
• A 4MP camera takes pictures 1600 pixels wide by 1200 pixels high
• Printed at 200 ppi, this is 8 inches by 6 inches
• On a 72 ppi display, 18 inches by 14 inches
• Average Web pages were constrained to 600 pixels wide,
because early monitors were 640x480
• Monitors are bigger and bigger (the projector displays
1280x1024, I think)
• Users don’t necessarily fill up the monitor with a single web page!
• Use of smartphones and tablets increasing, so should consider
screen size and limited download speeds

4. Size and Resolution (cont’d)

5. Size and Resolution (cont’d)
• Resolution can mean 2 things:
• Number of pixels on a monitor or in an image
• 640 x 480
• 1024 x 768
• Number of pixels in an inch of that monitor or image
• 72 ppi
• 86 ppi
• The higher the resolution, the more pixels
• On paper, more pixels can add size or detail
• On screen, more pixels always means bigger size

6. Speed
• Large image files take time to download
• Larger an image’s file size, longer it takes to download
• Speed up by compressing the image
• LZW (for GIF)
• JPEG
• PNG
• LZW effective for logos, rendered text, other images with
large areas of a single color
• If you can reduce the number of colors in an image, LZW can often
(but not always) compress image even more
• JPEG best for photographs and other images with many
colors

7. Speed (cont’d)
• GIF images limited to 256 colors
• JPEG has 2 main disadvantages
• Compression information takes up a lot of space (not worth it for
small images)
• Compression is lossy (permanently eliminates details to save
space)
• PNG compresses better than LZW, without losing
information.
• Does not allow animation, as GIF does
• Limited support in IE 6

8. Transparency & Animation
• GIF and PNG allow transparency
• JPEG does not
• Which format is better at transparency?
• In a GIF, a pixel is either transparent or not transparent; no in
between
• PNG supports alpha transparency
• Partial and full transparency
• Allows for 50% opaqueness, for example
• Animated images can be saved in GIF format, but not
JPEG or PNG
• Can also create animation with Flash, CSS, and JavaScript

9. Getting Images
• Use Google
• But be careful of copyright infringement!
• Creative Commons License
• Stock photography and image CDs
• Stock photography Web sites
• Digital cameras, film development to CD
• If you create your own, save as GIF, JPEG, or PNG
• Not BMP—only IE users will be able to see them!

10. Choosing an Image Editor
• Photoshop (expensive)
• Photoshop Elements (quite a bit cheaper, but still
expensive)
• Fireworks
• Paint Shop Pro
• GIMP
• For simple editing (size), MS Office’s picture manager (on
Windows) or Preview (on Mac)

11. Properly Optimizing Images for the Web
• Main objective: smallest file size possible with acceptable
image quality
• Images should be in RGB mode, not CMYK (which is for
print)
• PNG can be used for computer-generated and ―natural‖
color images
• Often better than GIF, but not quite as good as JPEG
• Photoshop’s PNG compression algorithms are lackluster
• Fireworks’ are better
• Adobe’s Save for Web command creates a new image
file, leaving original intact. Nice if you’re working with
uncompressed original image, and want to re-edit without
losing data

12. Inserting Images on a Page
• <img src=―image.url‖ />
• ―image.url‖ indicates location of image file on the server
• Add a p or br tag before an image to start on a new line
• Images must be uploaded to server before visitors will be
able to see them
• Test your image, and think about people with slower
Internet connections!

13. Offering Alternate Text
• Slow connection, handhelds, screen readers – these folks
often don’t download images at all!
• Offer alternate text for when images don’t appear
• <img src=―image.url‖ alt=―Image‖ />
• The alt attribute is required in HTML5
• Screen readers such as JAWS and VoiceOver can read
alternate text out loud so blind/visually impaired visitors
can get an idea of what the image is about
• If image is just for formatting, like a horizontal line or a
bullet image, W3C suggests you use alt=“”

14. Specifying Size for Speedier Viewing
• If you provide image dimensions, browser can fill in
around the image so visitors have something to read
while image downloads
• Find the size in your browser:
• Right-click (in Windows) or Control-click (in Mac) the image
• Choose Properties or Get Image Info
• Find the size with Photoshop or Photoshop Elements
• Open image
• Make document window wide enough so document info (―Doc‖) bar
visible in lower-left border
• Hold Option key (or Alt on Windows) and click in document info bar

15. Specifying Size for Speedier Viewing
(cont’d)
• Note: don’t do this to change the image size!!!
• Figure out the size of your image
• Specify width and height as attributes in img tag
• <img src=―image.url‖ alt=―Image‖ width=―200‖ height=―200‖ />

16. Adding an Icon for Your Web Site
• Most browsers now support associating small image with
Web site
• Displayed in Address bar, Favorites menu, or elsewhere
• Images called favicons, which is short for Favorites Icon.
• Apple asks for larger icons for home screens in iOS; recommend
114 pixels by 114 pixels
• iOS will add rounded corners, drop shadow, reflective shine
• To add an icon for your Web site:
• Create a 16x16 pixel image
• Create a 114x114 pixel image, in PNG format
• In the head section, type:
• <link rel=―icon‖ href=―favicon.ico‖ type=―image/x-icon‖ />
• <link rel=―apple-touch-icon‖ href=―/apple-touch-icon.png‖ />

17. Adding an Icon for Your Web Site (cont’d)
• Favicons should be saved in .ico format
• Telegraphics makes a plugin for creating .ico files in Photoshop
• http://www.telegraphics.com.au/sw/
• Some browsers (not Internet Explorer) support favicons in GIF
(including animated GIFs) and PNG format. Just be sure to use the
proper MIME type in the link element
• IE originally required favicon.ico file to be placed in root directory of
web site.
• This is no longer the case
• Browsers may still look there if link element not present or not
understood (by older browsers)