Unit E

Image Measurements The size of an image can be measured 2 ways: Dimensions: the height and width, measured in pixels. File Size: measured in Kilobytes (KB) Affects how long it takes the picture to display in a visitor’s browser. The larger the dimensions, the larger the file size.

Page download Time Download Time: the amount of time it takes the pages to load into a browser. Determined by 2 factors: The file size of the page and its referenced files The speed of the visitor’s Internet Connection Keep your pages small! People will wait an average of 8 seconds for a page to load!

How do I know How large my page is? The status bar shows the total file size for a page. Figure E-1 Rule of thumb: KB is a safe range.

Image File Formats JPEG is the best used for photographs that have many different colors. Figure E-2 GIF is best used for drawings, simple graphics, navigation buttons, or images with solid colors. Figure E-2 PNG was specifically created for Web Sites Uses high quality images with small file sizes.

Finding Photographs Stock photos: photos taken by professional photographers and offered for sale. Public domain: work that is not protected by copyright law and is free to use and copy. or search public domain Using an image without permission is against the law!

Inserting a Picture A picture in a Web Page is not embedded in the HTML file. Referenced in the HTML Code

Meaningful Alternate Text Keep descriptions brief. Don’t use the word “picture” or “button” Focus on describing what the image means not what it looks like.

Resizing a Picture You can change the size of a picture by dragging the sides or a corner of the image. Reducing the image dimensions is fine. Increasing the image dimensions can result in loss of quality. Resizing: changing the height and width attributes in the tag. The picture looks different but the dimensions or file size does not change.

Resampling a Picture Resampling: removes extra pixels. This changes the dimensions and file size of the image. Improves clarity. (Better than resizing) Decreases download time.

Editing a Picture Image editing Toolbar: used to make simple changes to a picture Table E-2 page 105 Cropping: trims or removes unwanted parts of the picture

Setting Wrapping Style 3 choices Default wrapping style, None: the text does not flow around the picture but starts at the bottom edge. Usually not the best look for a page layout Left: Displays the picture on the left side with text wrapping around it on the right. Right: Displays the picture on the right side with text wrapping around it on the left.

Margins If you wrap text around your image, you also want to create margins around your picture. This stops the text from flowing to the edge of the picture. The easiest way is to use the Picture Properties dialog box.

Thumbnail Options Thumbnail: a smaller image Saves space and minimizes download time Default for Thumbnail: 100 pixels wide and have 2- pixel border If you want something different you must change the setting in the Page Editor BEFORE you create the thumbnail

Consistent Graphical Style Choose one style and stick with it! Example: If you use cartoon-like images on one page, use them throughout the website.

Creating a Thumbnail Picture After you set the appropriate options, you need to create the thumbnail. Auto Thumbnail command: creates the thumbnail image and links it to the full-sized image.

Styling a Thumbnail The Auto Thumbnail settings in the Page Editor Options control the dimensions, border size, and edges on the thumbnail. To change wrapping styles, alignment, or margins you use the Picture Properties Options.