XP INFS 2150 / 7150 Intro to Web Development / HTML Programming Working with Graphics in a Web Page 1 Objectives Learn about different image formats Control the placement and appearance of images on a Web page Using the <img> tag and the attributes 2 1
Images and Image File Formats The two most commonly used image file formats in Web browsers are GIF and JPEG. Choosing the appropriate image format is an important part of Web page design. Balance the goal of creating an interesting and attractive page against the need to keep the size of your page small and easy to receive. Each file format has its advantages and disadvantages, and you will probably use a combination of both formats in your Web page designs. 3 Working with GIF Files GIF (Graphics Interchange Format) is the most commonly used image format on the Web. Compatible with virtually all browsers. GIF files are limited to displaying 256 colors. Often used for graphics requiring fewer colors, such as clip art images, line art, logos, and icons. Images that require more color depth, such as photographs, can appear grainy when saved as GIF files. 4 2
Interlaced and Non-interlaced GIFs Interlacing refers to the way the GIF is saved by the graphics software. Normally, with a noninterlaced GIF the image is saved one line at a time, starting from the top of the graphic and moving downward. With interlaced GIFs, the image is saved and retrieved stepwise. for example, every fifth line of the image might appear first, followed by every sixth line, and so forth through the remaining rows 5 Interlaced and Non-interlaced GIFs Interlacing is an effective format if you have a large graphic and want to give users a preview of the final image as it loads. Interlacing can increase the size of a GIF file by anywhere from 3 to 20 kilobytes, depending on the image. 6 3
Non-interlaced Graphic This figure shows how a noninterlaced GIF appears as it is slowly retrieved by the Web browser. If the graphic is large, it might take several minutes for the entire image to appear, which can frustrate the visitors to your Web page. top appears first Image appears one line at a time entire image is retrieved 7 Interlaced Graphic This figure shows the effect of interlacing, which is when the graphic starts out as a blurry representation of the final image, then gradually comes into focus-unlike the noninterlaced graphic, which is always a sharp image as it s being retrieved, although an incomplete one. a rough image appears first image starts to show more detail final image is crisp and detailed 8 4
Transparent GIFs A transparent color is a color from the image that is not displayed when the image is viewed in an application. In place of a transparent color, the browser will display whatever is on the page background. Creating a transparent color depends on the graphic software used. Many applications include the option to designate transparent color when saving the image i.e. PhotoShop. 9 A Transparent Image File This figure shows a transparent image file. the green background will be transparent when displayed in the browser logo background is transparent in the browser 5
Animated GIFs One of the most popular uses of GIFs is to create animated images. Animated GIFs are easy to create and smaller in size. An animated GIF is composed of several images that are displayed one after the other in rapid succession. Animated GIFs are an effective way to compose slide shows or to simulate motion. The newer standard includes enhancements such as interlacing, transparent colors, and animation. 11 Animated GIF Programs This figure shows a list of programs available on the Web that you can use to create your own animated GIFs. 6
Animated GIF Collections If you don t want to take the time to create your own animated GIFs, many animated GIF collections are available on the Web. This figure shows a list of a few of them. Animated GIFs continued Animated GIF files are typically larger than static GIF images. The use of animated GIFs can greatly increase the size of a Web page. Be careful not to overwhelm the user with animated images. Animated GIFs are limited to 256 colors and can use transparent colors. Early browser versions may not support animated GIFs. 14 7
Portable Network Graphics (PNG) A new file format called PNG (Portable Network Graphics) was created, and was promoted to take the place of GIF. PNG files use a free and open file format and can display more colors than GIFs. PNGs cannot be used for animated graphics. PNGs do allow transparent colors, but not all browsers support this feature. The PNG format may eventually replace GIFs, however GIFs continue to be very popular. 15 BMP, XPM, and XBM Images and Browsers Browsers can also display graphic files in many different formats BMP, XPM, XBM. BMP bit map format is a raw format: no compression applied; hence very large, and therefore slow in performance. Be aware when using other strange formats, the image might not be viewable in all browsers or browser versions. 16 8
Working with JPEG Files JPEG (Joint Photographic Experts Group) format creates graphics that use the full 16.7 million colors available in the color palette. JPEG files are most often used for photographs and images that cover a wide spectrum of color. JPEG files usually are smaller than GIF files. A JPEG file size can by controlled by the degree of image compression applied to the file. A JPEG file commonly uses file name extension -.JPEG or -.JPG. 17 Working with JPEG Files You cannot use transparent colors or animation with JPEG files. A JPEG format called progressive JPEG does now allow JPEG files to be interlaced. Not all design applications and Web browsers support progressive JPEGs. 18 9
The Effects of Compression on JPEG File Size and Quality This figure shows the effect of compression on a JPEG file. The increased compression cuts the file size to onetenth that of the original. The resulting image is less well-defined than the image with low compression. minimal compression: file size = 84.3 KB medium compression: file size = 14.2 KB moderate compression: file size = 20.7 KB heavy compression: file size = 8.6 KB An Inline Image If an image appears blurry or grainy, it could be because your monitor is capable of displaying only 256 colors, and not the full palette of 16.7 million colors. 10
Image Size and Placement We use the <img> tag to display an image from an image file; the attributes of the <img> tag allows us to control the image size and placement for display... 21 Attributes of the <img> Tag <img src= image file alt= text description height=# pixels width=# pixels hspace=# pixels vspace=# pixels border=# pixels bordercolor=color align= top middle bottom left right /> will make the image into a floating object for in-line text processing. NOTE: align = left or right 22 11
Controlling Image Alignment The align attribute can control the alignment of an image with the <img> tag. The syntax for the align attribute is: <img src= URL align= alignment > URL is the location and filename of the graphic file alignment indicates how you want the graphic aligned in relation to the surrounding text 23 Alignment Options This figure describes the possible values of the align attribute. align= absbottom Description Aligns the bottom of the object with the absolute bottom of the surrounding text. The absolute bottom is equal to the baseline of the text minus the height of the largest descender in the text. absmiddle Aligns the middle of the object with the middle of the surrounding text. The absolute middle is the midpoint between the absolute bottom and text top of the surrounding text. baseline bottom left middle right Aligns the bottom of the object with the baseline of the surrounding text. Aligns the bottom of the object with the bottom of the surrounding text. The bottom is equal to the baseline minus the standard height of a descender in the text. Aligns the object to the left of the surrounding text. All preceding and subsequent text flows to the right of the object. Aligns the middle of the object with the surrounding text. Aligns the object to the right of the surrounding text. All subsequent text flows to the left of the object. texttop top Aligns the top of the object with the absolute top of the surrounding text. The absolute top is the baseline plus the height of the largest ascender in the text. Aligns the top of the object with the top of the text. The top of the text is the baseline plus the standard height of an ascender in the text. 24 12
Effects of the Align Attribute This figure shows the effect of each alignment options on text surrounding the image. align = bottom align = middle align = top align = left align = right style= float: instead of align Instead of using the align= attribute, we may also use CSS style specification to specify how the image should be presented in HTML <img align= right > <img style= float:right; > Both work the same way: the image becomes floating graphics to be inserted to the right with text wrapped around. The same for left side: <img align= left > <img style= float:left; > 26 13
Clearing of Floating Graphic Since the HTML does not know the size of the floating graphic (on left, right, or both sides) it is necessary to use a line break with specification to clear beyond the floating graphic, if any. Note the use of clear= attribute in <br> tag, and the function equivalent use of CSS style. <br clear= right /> <br style= clear: right; /> It also works with floating graphic on left side, or on both sides, specifying left or both respectively instead of right. 27 Vertical and Horizontal Space To increase the horizontal and vertical space around an image use the hspace and vspace attributes. The syntax is: <img src= URL vspace= value hspace= value > hspace (horizontal space) attribute indicates the amount of space to the left and right of the image. vspace (vertical space) attribute controls the amount of space above and below the image 28 14
Using the hspace and vspace Attributes set the horizontal space around the graphic to 15 pixels and the vertical space to 5 pixels Controlling Image Size Another set of attributes for the <img> tag are the height and width attributes. Height and width attributes instruct the browser to display an image at a specific size. The height and width attributes can be used to increase or decrease the size of the image on a Web page. The syntax for setting the height and width attributes is: <img src= URL height= value width= value > value is the height and width of the image either in pixels or as a percentage of the page s height and width 30 15
Controlling Image Size To decrease the size of an image, use an image editing application to reduce the file size and dimensions of the image. Changing the size of the image within the <img> tag does not affect the file size, it makes the image look smaller improving the performance of the Web page. When a browser encounters an inline image, it calculates the image size and then uses this information to format the page. If the dimension is included with an image, the browser displays the image faster. 31 Using the alt Attribute The alt attribute specifies text to display in place of an inline image. The syntax for specifying alternate text is: <img src= URL alt= alternate text > 32 16
Specifying Alternative Text for an Inline Image Alternate image text is important because it allows users who have nongraphical browsers to know the content of your graphics. Alternate image text also appears as a placeholder for the graphic while the page is loading. This can be particularly important for users accessing your page through a slow dial up connection. specifying alternative text for an inline image 33 General Tips on Working with Color and Images The primary purpose of a Web page is to convey information. If an image adds visual interest to the Web page, include it. Be aware that overusing graphics can make a Web page difficult to read and cumbersome to display. 34 17
Reduce the Size of Web Pages Strive to make your Web page quick and easy to retrieve. The total size of an image on a Web page should be no more than 40 to 50 kilobyte. There are several ways to achieve this: use an image editing application experiment with different graphic format types use thumbnails-reduced versions of your images reuse images provide an alternate, text-only version of the Web page 35 Manage Your Colors Color can add a lot to a Web page, it can also detract from it. Make sure to have enough contrast between the text and background. do not place dark text on a dark background do not place light text on a light background Color is handled differently on different browsers test Web pages on different browsers and monitors 36 18
Summary Common image formats: GIF, JPG Using the <img> tag Controlling size and placement of images. How to align text with images. 37 19