IMAGESHTML5 & CSS3 Visual Quickstart Guide

Chapter 5

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

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

Size and Resolution (cont’d)

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

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

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

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

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!

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)

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

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!

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=“”

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

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” />

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” />

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)