1. 10/23/2015Images on the Web1 Images Spring, 2008 Modified by Linda Kenney 3/26/08

2. 10/23/2015Images on the Web2 Overview of images on the Web As we’ve discussed, XHTML files are text files. Since computer images are not stored as text, they cannot be stored in XHTML files. Instead, images are stored in separate files and Web authors use XHTML elements to tell the browser which image file to retrieve from the server and where to include it in the rendered page.

3. 10/23/2015Images on the Web3 Overview of images on the Web (cont.) In order to understand images on the Web, we need to examine several concepts.  We’ll need to examine how images are stored in files, so we can store images appropriate for use on the Web.  We’ll need to explore how images are obtained and organized and learn the basics of copyright laws, so we can manage our images without getting into trouble.  And we’ll need to learn the XHTML element that is used to insert images into Web pages, so we can actually use our images to enhance our pages.

4. 10/23/2015Images on the Web4 Computer images All computer images are made up of tiny dots called picture elements (or pixels) arranged in a rectangular grid. Because the pixels are so small, however, our eyes don’t perceive them as separate dots.  Instead, our eyes blend the dots together to form a coherent image.

5. 10/23/2015Images on the Web5 Color images Each pixel in an image can be displayed in a range of colors. The image below contain 128 different colors.  Note how similar the vast majority of the colors are in this image. Subtle combinations of similarly colored pixels can contribute to the realism of an image by adding shading and other features.

6. 10/23/2015Images on the Web6 Storing an image – part 1 To store an image, we need to record the color of each pixel the image contains. Because pixels are so small, images typically contain lots of them.  The small sample image below contains 75 rows and 77 columns. 75 rows of 77 pixels each is a total of 5,775 pixels.  Since all the pixels on a computer screen are the same size, a taller image would contain more rows and a wider image would contain more columns. In other words, bigger images contain more pixels than smaller ones.  Since each pixel requires the same amount of memory, larger images with more pixels require more memory for storage.

7. 10/23/2015Images on the Web7 Storing an image – part 2 Since computers must represent everything as numbers, the color of each pixel is stored as a number. You can think of a file that stores an image as a type of “paint-by-numbers” for the computer.  To display the stored image, the computer simply reads the numbers that represent the pixels in each row and displays each pixel in that row using whatever color its number specifies. Computers use more memory to store larger numbers.  So images with a wider range of colors require more storage.

8. 10/23/2015Images on the Web8 Color depth Because computers use the binary number system the ranges are a bit different than we would expect, but the idea is the same.  The binary number system is a base 2 number system, which effectively means it uses only two digits. In the binary number system, each digit is referred to as a binary digit.  In computer science “binary digit” is generally shortened to “bit”.  A single bit can represent only two possible values: 0 or 1. 0 and 1 are the only two digits available in the binary number system.  Everything the computer stores and manipulates is represented in the binary number system and therefore consists of bits

9. 10/23/2015Images on the Web9 Color depth (cont.)  The more bits we are willing to allocate to storing a numeric value, the wider the range of possible values. If we stored each color as a single bit, we’d only have 2 colors to use. If we stored each color using eight bits, we’d have 256 colors. If we stored each color using sixteen bits, we’d have 65,536 colors. If we stored each color using twenty-four bits, we’d have 16,777,216 colors.  On the Web, 256 colors are generally accepted as the minimum useful.  Since humans cannot distinguish more than 16.7 million colors, 16,777,216 colors are generally accepted as the maximum useful. Because it covers all the visible colors, 24-bit color is often referred to as true color. The number of bits used to store each color determines an image’s color depth.

10. 10/23/2015Images on the Web10 Image size Since each image on a Web page is stored in a separate file and retrieved from a Web server, the size of those files is a major concern. Larger image files take longer to retrieve from the server, and that adds to the time it takes a page to render.  Most Web users don’t like to wait a long time for pages to appear.  So Web authors are very interested in minimizing the size of image files to speed up their pages.  The most important tool available for reducing file size without significantly decreasing image quality is a technology known as compression

11. 10/23/2015Images on the Web11 Compression Stated simply, compression is the process of storing data with fewer bits than it would normally require. In general, this can be accomplished in two ways.  Lossless compression  Lossy compression Compression is an essential part of storing images for use on the Web as a means of reducing the time needed to retrieve them from Web servers.

12. 10/23/2015Images on the Web12 Compression (cont.) Lossless compression reduces the amount of storage required for data by using more efficient representations.  None of the data is lost due to the compression process. So the resulting image is identical to the original. This can be especially important for certain types of images where any loss of data would have a noticeably detrimental impact on the quality of the image.

13. 10/23/2015Images on the Web13 Compression (cont.) Lossy compression reduces the amount of storage required for data by actually eliminating some of it.  The least useful portions of the data are simply thrown away during the compression process. In this case, the resulting image is only an approximation of the original. Some types of images, such as photos, are remarkably tolerant of data loss.

14. 10/23/2015Images on the Web14 Image file formats By now, it should be evident that there are a variety of factors involved in deciding how to save an image in a file. Software designers make the decisions about how to save an image and publish their conclusions as image file formats.  By following the specifications in a published image file format, a software designer can develop software that can store and display any image that uses that format. Over the years, dozens of image file formats have been published, each optimized for one or more specific uses.

15. 10/23/2015Images on the Web15 Image file formats (cont.) The Web requires a balance of image quality against file size.  This limits the range of image file formats available for Web authors.  We are only interested in image file formats that browsers can display.  And browsers, in general, can only display three different image file formats: JPEG, GIF and (sometimes) PNG.

16. 10/23/2015Images on the Web16 GIF Images Graphics Interchange Format Best used for line art and logos Maximum of 256 colors One color can be configured as transparent Can be animated Uses lossless compression Can be interlaced All major graphical browsers support GIF images. When you have a non-photographic image to use on the Web, chances are you want it stored as a GIF file. GIF files must have names ending in.gif

17. 10/23/2015Images on the Web17 JPEG Joint Photographic Experts Group Best used for photographs Up to 16.7 million colors Use lossy compression Cannot be animated Cannot be made transparent All major graphical browsers support JPEG images.  When you have a photo that you wish to use on a Web page, you generally want that photo stored in a JPEG file.  JPEG files must have names ending in.jpeg (or.jpg).

18. 10/23/2015Images on the Web18 PNG for the future Portable Network Graphic Support millions of colors Support multiple levels of transparency Support interlacing Use lossless compression Combines the best of GIF & JPEG Browser support is growing

19. 10/23/2015Images on the Web19 Image file formats compared – part 1 ExtensionCompressColorsAnimateTransparent Browser SupportUsed for JPEG.jpeg.jpg Lossy True color No UniversalPhotos GIF.gifLossless Up to 256 Yes UniversalNon-photos PNG.png Lossless (20% more efficient than GIF) Up to True color No Yes, 256 levels GoodAny image

20. 10/23/2015Images on the Web20 Image file formats compared – part 2 BMP 90KTIFF 103K JPEG 9K GIF 21KPNG 19K

21. 10/23/2015Images on the Web21 Image file formats compared – part 3 BMP 106K TIFF 11K JPEG 10K GIF 4K PNG 4K

22. 10/23/2015Images on the Web22 Obtaining images There are a variety of ways through which images are obtained for use on the Web. Many Web authors create their own images.  Hand drawn images can be created from scratch using programs called image editors. There are many image editors available, but some common ones include Adobe Photoshop, Jasc PaintShop Pro, and Macromedia Fireworks.  Photos can be taken with digital cameras or scanned in with an image scanner.

23. 10/23/2015Images on the Web23 Obtaining images (cont.) It’s also fairly common to use images created by others.  Many image archives exist on the Web as resources for downloading images. Image archives are also available on CD. Some offer free images, some sell the right to use their images.  For high-budget Web projects, a Web author might hire a graphic designer to create the images they need. As a student, you might ask an artistic friend to create your images as a favor.  When using images created by others, it’s important to ensure that you have permission from the owner of the image.

24. 10/23/2015Images on the Web24 Understanding copyright Every original creation is automatically copyrighted upon creation. Unless that copyright is specifically transferred in writing to another individual or organization, the copyright is automatically held by the creator.  This means that somebody holds the copyright for virtually everything you see on the Web – text, images, sounds, video and so on. Holding the copyright on something means that you get to decide how that thing can be used and by whom.  If you wish to use a copyrighted image in your Web pages, it’s your responsibility to get permission to do so from the copyright holder for that image. Many people mistakenly believe that any image they see on the Web is free for the taking. Using a copyrighted image without permission leaves you open to legal action.

25. 10/23/2015Images on the Web25 Understanding copyright (cont.) Some copyright holders choose to establish fairly lenient terms of use for everyone at once or large classes of users (such as students or non- profit sites). This will often be the case with images obtained from image archives. When visiting an image archive you typically start by locating and reading their terms of use. You need to make sure you understand and accept those terms of use before using one of the images. If you don’t accept their terms of use, look elsewhere for your images.

26. 10/23/2015Images on the Web26 Understanding copyright (cont.) Others view their copyrighted materials as financially valuable goods and either refuse any request to utilize those materials or negotiate limited terms of use on a case-by-case basis.  This situation also typically involves some sort of payment for the limited rights to use the image.  This is their prerogative as the copyright holder, and it’s your responsibility to respect their decision. If you find an image on the Web and wish to use it, try asking the page’s owner for permission.  If you explain how you intend to use the image and ask politely for permission, you’ll often get it.  The worst they can do is say “no” or ignore your request.  Just be reasonably sure you’re dealing with the rightful owner!

27. 10/23/2015Images on the Web27 Grabbing images from the Web It’s very easy to grab a local copy of any image you see on a Web page. Simply click the image with the right-hand mouse button and look for a command that will save the image in the shortcut menu that appears. In the dialog box that appears, choose the local folder where you wish to store your copy of the image and enter an appropriate name for the image file.  When specifying the file name, be sure to keep the same type of extension, or you will confuse both the server and browsers.  It is best to use only lowercase letters and avoid spaces in your image file names.  It is acceptable to change the case of the extension or to replace a.jpg extension with a.jpeg extension.  But you should never replace a.gif extension with a.jpeg extension, for example.  If you wish to have your version of the image stored in a different image file format, use a conversion program of some sort.

28. 10/23/2015Images on the Web28 Grabbing images from the Web (cont.) Grabbing images from the Web is easy because it is perfectly acceptable to do so for your own private use. Using those images in your pages, however, requires permission.  Simply being able to grab your own copy of an image off the Web does not imply that you have permission to use it legally.  It is still your responsibility to ensure you have the necessary permission from the copyright holder to use the image.

29. 10/23/2015Images on the Web29 Organizing images On average, each Web page contains several images. Storing all the image files in the same place as your XHTML files can get confusing and hard to manage. So most experienced Web authors store their images in one or more separate folders. Since the pubpages server only looks in your public_html folder, any image folders you create should be inside your public_html folder. To make your life easier, make your image folder inside your cs403 folder.

30. 10/23/2015Images on the Web30 Using images in Web pages To insert an image into your Web page, use the element. is an empty element, so it must end with a slash. is also a replaced element, so the browser replaces it with the image it specifies.  To specify which image the browser should use as a replacement, each element must contain a src attribute.  The value of this src attribute should be the URL of the desired image file.

31. 10/23/2015Images on the Web31 Local resources vs. remote resources It’s important to understand the distinction between local resources and remote resources. Local resources are pages and images that are part of your presentation and under your control.  All of the pages you write and images you use are likely to be local resources. Remote resources are pages and images that are part of somebody else’s presentation and/or under somebody else’s control.  When you access someone else’s home page you are accessing a remote resource.

32. 10/23/2015Images on the Web32 Accessing remote resources In order to access a remote resource you must use an absolute URL. Absolute URLs are the URLs we’ve discussed previously. They include all the info a browser needs in order to retrieve the specified resource. Give an example However, images are almost never accessed as remote resources.

33. 10/23/2015Images on the Web33 Avoiding remote images It is extremely rare for an image on the Web to be accessed as a remote resource. When your pages access images as remote resources on someone else’s server host, you are utilizing their storage and bandwidth without allowing them to derive any benefit.  This situation is often referred to as bandwidth theft, since you are deriving benefits at someone else’s expense.  Many server administrators get very angry when they discover bandwidth theft and may threaten you with legal action.

34. Avoiding remote images (cont.) Note that this applies only to using images as remote resources; linking to someone else’s page should always link to that page as a remote resource. Since images are almost never accessed as remote resources for this reason, you should almost never use an absolute URL as the value of an element’s src attribute. Instead, store your images on your own server space and use relative URLs. 10/23/2015Images on the Web34

35. 10/23/2015Images on the Web35 XHTML tag The image tag Used to place graphics on a web page src Attribute used to indicate the file name of the graphic. alt Attribute Used to configure a text description. height Attribute Used to configure the height of the image in pixels. width Attribute Used to configure the width of the image in pixels.

36. 10/23/2015Images on the Web36 Images and accessibility As we’ve discussed, accessibility refers to the ease with which users with various disabilities are able to utilize our pages. Images present a special challenge for blind and low- vision users of the Web. Such users typically browse the Web using screen readers that read the content of the pages aloud.  Screen readers are only able to read text.  So, every element is required to have an alt attribute as well as a src attribute. The src attribute tells a visual browser where to go in order to retrieve the image to be displayed. The alt attribute gives a screen reader some text to read in place of the image. Provide alternative text descriptions for all mages.

37. 10/23/2015Images on the Web37 Specifying height and width of images If a visual browser knows the height and width of an image, it can reserve space for that image without delaying the rendering process. Once the image is retrieved from the server it can be rendered in the reserved space.  This can decrease the perceived load time of a page. If it does not know the dimensions of an image, the browser must wait until it has retrieved an image from the server to find out how much space it will occupy.  This can cause delays or adjustments in rendering and increase the perceived load time. Use the element’s height and width attributes to specify the height and width of an image. Most often, these values will be set to the actual pixel dimensions of an image. They can be set to different dimensions, and the browser will scale the image to the specified dimensions. However, browsers are not image editors, and they often do a poor job of scaling images. Use an image editor to scale an image then specify the actual dimensions of the edited image in the XHTML.

38. 10/23/2015Images on the Web38 Tips for using images effectively There are several “rules of thumb” you may wish to consider when deciding how to use images in your Web pages. Have a good reason for every image you use. Unnecessary images increase load times and distract the user. This is especially true for animated images!

39. 10/23/2015Images on the Web39 Tips for using images effectively (cont.) Use the smallest image that will do the job. Keep the file size of each image as far below 100KB as possible.  Ideally, the cumulative size of a page (XHTML and images combined) should not exceed 100KB, but I’ll use 100KB per image as the maximum size for grading purposes.  Choosing the right image file format is only the first step.  For JPEG images experiment to find the best balance of file size and image quality.  For GIF and PNG images, try to use the fewest colors needed to produce an acceptable image.  Keeping the dimensions of each image as small as possible reduces file size and increases the range of environments that can display your pages as you intend.

40. 10/23/2015Images on the Web40 Tips for using images effectively (cont.) Provide alt, height and width attributes for each image to enhance accessibility and decrease perceived load times. Reuse images from page to page whenever possible to maximize the benefits of the browser’s cache. Make local copies of all images and reference them with relative URLs.  This will lead to more portable presentations and avoid bandwidth theft.

41. 10/23/2015Images on the Web41 Image Links To create an image link use an anchor tag to contain an image tag Home

42. 10/23/2015CS403 Cascading Style Sheets42 The background-image property The background-image property allows you to set a background image to be used for an element. It takes as its value either the URL of the image to use or the word none (which is the default).  URLs in CSS are specified using functional notation. Note the lowercase url followed by the actual URL enclosed in parentheses. In external style sheets, use absolute URLs even for local resources. body {background-image:url(images/texture.jpeg);}

43. 10/23/2015CS403 Cascading Style Sheets43 The background-image property (cont.) Choose images that are relatively homogeneous and tile nicely for background images.  A relatively homogeneous image will contain mostly similar colors, making it easier to choose foreground colors that remain uniformly visible against it.  An image tiles nicely when it can be placed adjacent to a copy of itself without any visible seam. When setting a background image, always set foreground and background colors as well.  Set foreground colors that will contrast well against the background image so text remains easy to see and read.  Set a background color that approximates the effect of the background image. The background image will be shown over the background color whenever possible. body {background-color: #FFFF66; background-image: url(images/texture.jpeg); color: #000066;}

44. 10/23/2015CS403 Cascading Style Sheets44 The background-repeat property If you don’t specify otherwise, a browser will repeat a background image in as many rows and columns as needed to fill the background area of the element. This process is commonly referred to a tiling, since it is similar to covering a wall with ceramic tiles. The background-repeat property lets you specify exactly how the background image should be repeated.  Using a value of repeat instructs the browser to use as many rows and columns as it needs to fill the background area.  Using a value of no-repeat instructs the browser to simply show the background image once.  Using a value of repeat-x instructs the browser to use as many copies of the image as needed to span across the background area but only in a single row.  Using a value of repeat-y instructs the browser to use as many copies of the images as needed to span down the background area but only in a single column. If no background image has been specified, this property has no effect. body {background-color: #FFFF66; background-image: url(images/texture.jpeg); background-repeat: repeat-x; color: #000066;}

45. 10/23/2015CS403 Cascading Style Sheets45 The background-attachment property Unless you specify otherwise, a background image scrolls along with the page on which it is displayed. But you can use the background-attachment property to control whether the background image scrolls with the page or remains in a fixed position.  Use a value of scroll to instruct the browser to scroll the background with the page.  Use a value of fixed to instruct the browser to leave the background in its original position and allow the page to scroll “over” it. If no background image has been specified, this property has no effect. body {background-color: #FFFF66; background-image: url(images/texture.jpeg); background-repeat: repeat-x; background-attachment: fixed; color: #000066;}

46. 10/23/2015CS403 Cascading Style Sheets46 The background-position property By default, the first copy of a background image is displayed with its upper left corner at the upper left corner of the background area of the element to which it’s applied. The background-position property can be used to control precisely where the first copy of the background image gets displayed.  Any tiling needed then proceeds from that initial copy towards the right and/or bottom.  This property can accept a variety of value types, but there are typically two values separated by a space. The first value represents the horizontal position desired. The second value represents the vertical position desired. It’s fairly common for the values to be percentages. Commonly used percentages have keywords associated with them. And absolute length units are also acceptable.

47. 10/23/2015CS403 Cascading Style Sheets47 Background positioning by percentage When using the background-position property, percentages are relative to the background area which the image will be used to fill. They are also relative to the dimensions of the background image itself  The example below positions the upper left corner of the initial background image in the upper left corner of the background area  This example positions the lower right corner of the initial background image in the lower right corner of the background area  This example positions the center of the initial background image in the center of the background area  And this last example positions the point 23% of the way across and 38% of the way down the initial background image 23% of the way across and 38% of the way down the background area body {color: #000066; background-color: #FFFF66; background-image: url(images/watermark.jpeg); background-repeat: no-repeat; background-attachment: fixed; background-position: 0% 0%;} body {color: #000066; background-color: #FFFF66; background-image: url(images/watermark.jpeg); background-repeat: no-repeat; background-attachment: fixed; background-position: 100% 100%;} body {color: #000066; background-color: #FFFF66; background-image: url(images/watermark.jpeg); background-repeat: no-repeat; background-attachment: fixed; background-position: 50% 50%;} body {color: #000066; background-color: #FFFF66; background-image: url(images/watermark.jpeg); background-repeat: no-repeat; background-attachment: fixed; background-position: 23% 38%;}

48. 10/23/2015CS403 Cascading Style Sheets48 Background positioning by keyword It’s also possible to use keywords instead of commonly used percentages as values of the background-position property. The keywords left, center and right are equivalent to horizontal positions of 0%, 50% and 100%, respectively The keywords top, center and bottom are equivalent to vertical positions of 0%, 50% and 100%, respectively The keywords may be used in any combination with one another  But keywords cannot be combined with percentages or length units body {color: #000066; background-color: #FFFF66; background-image: url(images/watermark.jpeg); background-repeat: no-repeat; background-attachment: fixed; background-position: left center;} body {color: #000066; background-color: #FFFF66; background-image: url(images/watermark.jpeg); background-repeat: no-repeat; background-attachment: fixed; background-position: center top;}

49. 10/23/2015CS403 Cascading Style Sheets49 The background property Since it’s common to use several of these background related properties together, there is a single background property that lets you specify several values at once. Such properties are often referred to as shorthand properties. The background property can accept a value comprised of any combination of legal values for the other background related properties.  The example above is equivalent to the example below  If there are not explicit values for every background related property provided, the background property sets those values left unspecified to their defaults The example above is equivalent to the example below body {color: #000066; background-color: #FFFF66; background-image: url(images/watermark.jpeg); background-repeat: no-repeat; background-attachment: fixed; background-position: center center;} body {color: #000066; background-color: #FFFF66; background-image: url(images/watermark.jpeg); background-repeat: repeat; background-attachment: scroll; background-position: 0% 0%;} body {color: #000066; background: #FFFF66 url(images/watermark.jpeg) no-repeat fixed center center;} body {color: #000066; background: #FFFF66 url( images/watermark.jpeg);}

50. 10/23/2015Images on the Web50 See examples: http://pubpages.unh.edu/~ltv6/cis599/samples/chapter5/