1. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE HTML and CSS 8th Edition Chapter 5: Images

2. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Objectives Create images in GIF, PNG, and JPEG formats. Add visual interest with transparency. Find, purchase, and create images for a webpage. Insert images on a webpage. Offer alternate text when images don't appear. Specify image size. Find an image’s size with a browser or Photoshop. Scale images with the browser or image editor. Add icons to a website.

3. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Images There are six factors to keep in mind when you create images for the web: –Format –Download speed –Color –Size (dimensions) –Transparency –Animation

4. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Format and Download Speed Three most widely used formats on the web are GIF, PNG, and JPEG. JPEG format is good for color photographs. JPEG is a lossy format, which means some of the image’s original information will be lost when the image is saved.

5. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE PNG and GIF PNG and GIF formats compress areas of continuous colors or repetitive patterns better than JPEG. PNG and GIF formats are good for saving files that: –Have large amounts of solid colors and patterns and need transparency. PNG has a better compression algorithm for smaller file sizes and superior transparency support (alpha transparency).

6. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Choosing Image Formats Save full-color photos as JPEG or PNG-24 Zip and save logos in PNG- 8 format

7. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE The WebP Image Format WebP is Google’s image format, named. –WebP supports both lossy and lossless compression and can result in significant file-size savings over JPEG and PNG. It also features alpha transparency, like PNG. WebP is still evolving, and browser support is limited at the time of this writing: Chrome, Opera 12+, and some Android browsers are the only ones with full support, and it’s uncertain if other browsers will adopt it.

8. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Color GIF and PNG-8 images have a limited color palette. –Only 256 colors. Fine for logos and icons. Save photographs and complex illustrations in JPEG or PNG-24 format. –Accommodate more colors in a single image.

9. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Size (Dimensions) Digital images are measured in pixels. –Keep images to within a few hundred pixels wide. Dimensions vary depending on the image’s purpose. –Icons will be smaller, logos a little bigger, and photos, bigger still. Maximum width of a site is typically 960 pixels wide. Images typically print smaller than they appear on a display. –Printers print more dots per inch (dpi) than most displays have pixels per inch (ppi). –Screen resolution plays into this, too.

10. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Comparing Image Sizes 2048 pixels wide and 1536 pixels tall 400 pixels wide and 300 pixels high

11. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Transparency Transparency can give an image a non-rectangular outline, blending it in with a background color or texture behind the image. –PNG and GIF allow transparency; JPEG does not. Index transparency: Pixel can be transparent or not. –Both GIF and PNG support index transparency. Alpha transparency: Controls the degree of a pixel’s transparency. –Only PNG supports alpha transparency. Images with complex transparent backgrounds look better as PNGs because edges appear smooth, not jagged.

12. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE PNG-8 and PNG-32 PNG-8 supports both index and alpha transparencies, but you’ll need a program like Fireworks to save an alpha PNG-8. –Photoshop doesn’t support alpha transparency for PNG-8, but it does support it for PNG-32. –One reason most transparent PNGs on the web are PNG- 32. Use PNG-8 or PNG-32 for transparent images. The latter is required if your image has more than 256 colors.

13. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Photoshop, PNG-24, and PNG- 32 PNG-24 and PNG-32 are essentially the same except the latter supports alpha transparency. Photoshop refers to both PNG-24 and PNG-32 as PNG-24, so it’s common to think PNG-24 has alpha transparency. In truth, when you select the Transparency option for a PNG-24 in Photoshop, it creates a PNG-32 behind the scenes. The term “PNG-24” is often used when speaking of alpha transparent images, even though it isn’t technically accurate.

14. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Image Transparency

15. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Animation Animated images can be saved as GIFs, but not as JPEGs or PNGs. –Using images for animation is becoming uncommon, except for GIFs on site’s like Tumblr. –Animation is generally created using CSS Animations, JavaScript, HTML5 Canvas, SVG (the dark horse of the bunch), and Flash. –Flash animations on the web are becoming rare due to iOS’s lacks Flash support and the increased capability and support for other technologies.

16. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Getting Images Ways to get images: –Buy or download ready-made images. –Digitize photographs or hand-drawn images with a scanner. –Use a digital camera. –Draw images from scratch in an image editing program like Adobe Photoshop. Once you’ve got them in your computer, you can adapt them for use on the web.

17. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Get Images Use Google to find images on the web. –Even free images on the web have some restrictions. Stock photography and images can be bought for a reasonable price. –Purchased images can be used for most purposes, except reselling. –Read any disclaimers or licenses carefully. Create images with scanners and digital cameras.

18. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Creative Commons Licenses Creative Commons: Non-profit that developed Creative Commons license. Creative Commons license: System of copyright templates that let artists share their work in specified ways without giving up all rights over their work. –Many artists use Creative Commons licenses. –Flickr asks users to designate a Creative Commons license for each photo they upload. –Google can do a restricted search based on usage rights.

19. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Choosing an Image Editor Most modern image editors have special tools for creating web images. –Photoshop is the industry standard. –Adobe Fireworks is a very powerful program. –Alternatives include Paint.NET for PCs and Acorn or Pixelmator for Mac. –Online editors, like Photoshop.com and Aviary.com, are becoming more capable. Basic strategies for optimizing images for the web are the same regardless of the software you choose.

20. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Saving Your Images Saving images is a balancing act between visual quality and file size.

21. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Photoshop’s Save for Web Command Visually compares original image with up to three versions.

22. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Use Photoshop’s Save for Web Command Open Photoshop and create image or open existing image. Choose File > Save for Web. Save For Web dialog appears. Click one of the following tabs: –Optimized tab to see one optimized version. –2-Up tab to see one optimized version with the original. –4-Up tab to see three. Click an optimized version, if necessary.

23. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Use Photoshop’s Save for Web Command Choose desired format: –Save images created on a computer in PNG-8 or GIF format. –Save images with continuous tones in JPEG or PNG-24 format. Adjust additional settings until smallest file with acceptable quality is reached. Click Save, choose directory, and name new file.

24. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Inserting Images on a Page Images on a webpage appear automatically, as long as the browser is set up to view them.

25. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Insert an Image on a Page Place the cursor in the HTML code where the image will appear. Type <img src="image.url” –Where image.url indicates location of image file on server. Type a space and then the final />.

26. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Offering Alternate Text Alt attribute adds descriptive text that will appear if the image does not appear. To offer alternate text: –Within the img tag, after the src attribute and value, type alt=". –Type the alternate text. –Type ".

27. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Why Images Might Not Appear An image may not appear for a variety of reasons: –You coded the wrong URL in the src attribute –You forgot to upload the image to the web server. –Visitor might have a poor connection. –A browser can be set up to not load images.

28. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Specifying Image Size Specify image size in code and browser will reserve its space. Text will fill in around image’s space as image loads, and layout will remain stable. Use browser or image editing program to get exact dimensions of image.

29. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Find the Size of Your Image with Your Browser Right-click the image. A contextual pop-up menu appears. Choose Properties or View Image Info (depending on browser). A box appears that shows the dimensions of the image in pixels.

30. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Find the Size of Your Image with Photoshop Open the image in Photoshop. Choose Image > Image Size. The Image Size dialog displays.

31. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Specify the Size of Your Image in HTML Determine the size of your image. Within the img tag, after the src attribute, type width="x" height="y" –Use the values you found for the width and height to specify the values for x and y in pixels.

32. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Scaling Images with the Browser Change display size of an image by specifying a new height and width in pixels. To scale an image with the browser: –Type <img src="image.url" Where image.url is the location on the server of the image. –Type width="x" height="y" Where x and y are desired width and height, respectively, in pixels, of your image. –Add any other image attributes as desired and type final />.

33. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Creating and Sizing Images for Retina Displays Apple’s Retina display has four times as many pixels in the same amount of space as in an otherwise comparable normal display, resulting in sharper images. In some cases, images need to be made with the Retina display and similar displays in mind, otherwise they will look blurry in a browser. To avoid blurry images, double the size of your images, but display them at half that size.

34. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Scaling Images with an Image Editor Most images are simply too big for a webpage. –Image for print might measure 1800 pixels across. –Images for webpages shouldn’t be wider than 600 pixels. Scale images up or down with an image editor. To scale an image with Photoshop: –In lower-right portion of the Save for Web window, click W (Width) box or H (Height) box in the Image Size section. –Enter a new width or height in pixels, or a percentage, and then press the Tab key to resize the image. –Continue to adjust the size up or down until you’re satisfied. The image is not resampled until you press Save.

35. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Scaling an Image 2816 pixels wide400 pixels wide

36. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Scalable Vector Graphics (SVG) The SVG graphics language allows you to create graphics that can scale up or down without compromising quality (and more). You can include SVG in your webpages; gradually, we’re seeing more of that, because all modern browsers provide basic support.

37. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Adding Icons for Your Website Favicon are small icon in address bars, tabs, and bookmarks. –Short for “favorites icon.” –Favicons are small, measuring 16 x 16 pixels. –Because browser often displays icon over gray or other colors, make icon’s background transparent. Touch icons display when a site is added to the home screens of Apple and other touch devices.

38. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Add an Icon for a Website Create 16 x 16 image an save it in ICO format. Create 114 x 114 image for touch devices. Save in PNG format. Place the icon images at the root of your website. Browsers look for those specific file names at the root automatically.

39. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Favicons Favicon in browser displayApple-touch-icon