Castro Chapter 5

download Castro Chapter 5

of 17

  • date post

  • Category


  • view

  • download


Embed Size (px)



Transcript of Castro Chapter 5

  • 1. IMAGESHTML5 & CSS3 Visual Quickstart GuideChapter 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 filesizes 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 displays1280x1024, I think) Users dont 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 (contd) 5. Size and Resolution (contd) 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 images 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 (contd) 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 inbetween 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 BMPonly IE users will be able to see them! 10. Choosing an Image Editor Photoshop (expensive) Photoshop Elements (quite a bit cheaper, but stillexpensive) Fireworks Paint Shop Pro GIMP For simple editing (size), MS Offices picture manager (onWindows) or Preview (on Mac) 11. Properly Optimizing Images for the Web Main objective: smallest file size possible with acceptableimage quality Images should be in RGB mode, not CMYK (which is forprint) PNG can be used for computer-generated and naturalcolor images Often better than GIF, but not quite as good as JPEG Photoshops PNG compression algorithms are lackluster Fireworks are better Adobes Save for Web command creates a new image file, leaving original intact. Nice if youre working with uncompressed original image, and want to re-edit without losing data 12. Inserting Images on a Page 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 beable to see them Test your image, and think about people with slowerInternet connections! 13. Offering Alternate Text Slow connection, handhelds, screen readers these folksoften dont download images at all! Offer alternate text for when images dont appear The alt attribute is required in HTML5 Screen readers such as JAWS and VoiceOver can readalternate text out loud so blind/visually impaired visitorscan get an idea of what the image is about If image is just for formatting, like a horizontal line or abullet image, W3C suggests you use alt= 14. Specifying Size for Speedier Viewing If you provide image dimensions, browser can fill inaround the image so visitors have something to readwhile 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) barvisible in lower-left border Hold Option key (or Alt on Windows) and click in document info bar 15. Specifying Size for Speedier Viewing(contd) Note: dont do this to change the image size!!! Figure out the size of your image Specify width and height as attributes in img tag 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: 17. Adding an Icon for Your Web Site (contd) Favicons should be saved in .ico format Telegraphics makes a plugin for creating .ico files in Photoshop Some browsers (not Internet Explorer) support favicons in GIF(including animated GIFs) and PNG format. Just be sure to use theproper MIME type in the link element IE originally required favicon.ico file to be placed in root directory ofweb site. This is no longer the case Browsers may still look there if link element not present or notunderstood (by older browsers)