Adding Images Learning Web Design: Chapter 7

Using an Image Images have many purposed on a Web 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 This tag is used to insert an image in the flow of text The 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 />

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!!!!

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

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 These HTML attributes are being deprecated. Use CSS in a style sheet to set image alignment, add padding or a border on images Deprecated

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; }

.noborder {border-style: none; } Linking Images Use the tag in conjunction with the 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 tag is an inline element used to add images to a page Many 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