Working with picturesUnit E

Image MeasurementsThe 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 TimeDownload 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: 50-100 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 SitesUses high quality images with small file sizes.

Finding PhotographsStock 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. www.pdphoto.org or search public domain

Using an image without permission is against the law!

Inserting a PictureA picture in a Web Page is not embedded in

the HTML file.

Referenced in the HTML Code

<img>

Meaningful Alternate TextKeep descriptions brief.

Don’t use the word “picture” or “button”

Focus on describing what the image means not what it looks like.

Resizing a PictureYou 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 <img> tag.The picture looks different but the dimensions

or file size does not change.

Resampling a PictureResampling: removes extra pixels.

This changes the dimensions and file size of the image.

Improves clarity. (Better than resizing)

Decreases download time.

Editing a PictureImage editing Toolbar: used to make simple

changes to a pictureTable E-2 page 105

Cropping: trims or removes unwanted parts of the picture

Setting Wrapping Style 3 choicesDefault 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.

MarginsIf 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 OptionsThumbnail: 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 StyleChoose one style and stick with it!

Example: If you use cartoon-like images on one page, use them throughout the website.

Creating a Thumbnail PictureAfter 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.