Adding Images

Learning Web Design: Chapter 7

Using an Image Images have many

purposed on aWeb site

Used as a static image To add illustration:

ex. A company logo To add decoration

Used to link to other documents Used as an imagemap

Graphics File Formats for Web

GIF: Graphical Interchange Format

JPEG: Joint Photographic Experts

Group

PNG: Portable Network Format

GIF Format One of the most popular formats that

uses lossless compression No information is lost in compression

Limited to showing 256 colors Used to represent images with flat color

Line drawings Logos Illustrations

JPEG Format Uses lossy compression

Information is lost after compression Uses 24 bit color which is also

referred to as millions of colors Used mainly for photographic type

images

PNG Format Supported by newer browser versions Was developed as patent-free answer to

GIF Also uses lossless compression! Uses 8 bit color palette Supports 16 bit grayscale Up to 48 bit true color Supports 8 or 16 bit transparency

Graphics File Extensions Make sure to use the proper file

extension when adding images to your page

.gif , .jpg, .png Browsers use the extension to

determine how to display the image

The img Element <img> This tag is used to insert an

image in the flow of text The <img> tag is an inline element

and is placed on the baseline when displayed

The image tag is a self-terminating tag Add a forward slash before the closing

brace /><img src= “myfolder/mypet.jpg” alt=“Cat” />

<img> Attributes src=“path”

This is the source of the image The value is the path to the image

alt=“describing text” Alternative text that describes the image Needed for accessibility issues, required

by the Americans with Disabilities Act (ADA)

Must be included in order to validate!!!!

<img src=“Images/bird1.jpg” alt=“American Goldfinch” />

Long Descriptions

Alternative text provides a good start to increasing the accessibility of your non-textual content Alternative text is meant to be brief and

to the point A long description can be used to

provide a more thorough explanation <img src=“chart.jpg” alt=“chart”

longdesc=“budget for January” />

height=“number” (image height in pixels) width =“number” (image width in pixels)

For images that are part of page content, include width and height in (X)HTML markup

Specifying both width and height for an image can help browser load page faster

Width and Height Dimensions

Resizing an Image A smaller or larger pixel size will stretch or

shrink the image only in the browser If you just modify the width attribute pixel

size, the height will adjust proportionately The image file is still the same size and

takes the same time to download Note: If adjusting of image size is

needed, do it with a graphics program not in the browser

Decorative Page Images Images that are used as page decoration or

to support page layout can be viewed as presentational elements

These images should be controlled by a style sheet using CSS rather than placed in (X)HTML markup

Removing these images from page markup to a style sheet will make your pages cleaner and also make them more accessible

Align and Spacing Attributes align hspace vspace border <br clear=“all” />

These HTML attributes are being deprecated. Use CSS in a style sheet to set image

alignment, add padding or a border on images

Dep

recate

d

CSS Float Property Normally elements flow down the page

from left to right and top to bottom. The float property can be used to take

an element out of the normal flow and move it all the way to the left or right margin of the containing element float: left; float: right;

Use float instead of HTML align attribute

CSS Padding Property The spacing between an element’s

content and its border is called the padding (think padded cell)

There are four edges of an image element which can be padded: padding-left padding-right padding-top padding-bottom

Floating an Image To float an image using embedded

CSS, create a class the uses the float property

Then apply the class to an image

.imageleft { float: left; padding-right: 5px; }

<img src=“Images/dog.jpg” alt=“Dog” class=“imageleft” />

<a href=”document.htm”><img src=“Images/books.gif”

alt=“Books” class=“noborder” /> </a>

.noborder {border-style: none; }

Linking Images Use the <a > tag in conjunction

with the <img> tag

You can apply a CSS class to the image to suppress the border of a linked image

Imagemaps – Covered Later

An imagemap can be used to place hotspots (clickable areas) on an image

Each hotspot has a set of coordinates that define the clickable area

Because it is almost impossible to guess what these coordinates are without a tool to help you calculate them…

We will wait to cover imagemapping until we can use Expression Web to help us determine these coordinates

Storing Images on Site You should get in the practice of

creating a separate folder for your images on your site

This folder is usually called Images You can create other subfolders

within your Images folder Thumbnails Fullsize etc.

Where should Graphics Reside? Advantages of storing graphics on your own

Web server: They will load faster You have control of the files You can optimize graphics for your usage

Disadvantages of linking to files on another Web server They take up room on the server Makes your site organization more cluttered You don’t control the files, they may go away

Image Ownership Its poor form, not to mention illegal to

use images that are copyrighted if you have not paid for them

Don’t borrow an image from another site and call it your own

Look for the words: “unrestricted” or “royalty-free” on found images

Stock images can often be purchased for a very minimal amount

Lesson Summary Graphics are an important tool of a web designer There are many graphics formats which can

display on the web The <img> tag is an inline element used to add

images to a page Many <img> attributes are deprecated and

should be controlled using CSS Know the ethical and performance issues related

to using and storing graphics on a web site