IMAGESWeb Design CIT 230

Dustin Sanders

Images

Choosing images for your site

• Images make the difference between an average-looking site or a REALLY engaging one.

• Images can be used to set the tone of a site in less time then reading a description.

Images Should….Be relevantConvey informationConvey the right moodBe instantly recognizableFit the color palette

If you do not have photographs to use on your website, there are several companies that sell stock photos for use on webpages. Photographs are subject to copyrights and you can get in trouble for taking photos from other websites.

Adding Images<img src=“image_location.jpg" alt=“text_description" style="width:304px;height:228px;">

EXAMPLE: RESULTS:

HTML Images SyntaxIn HTML, images are defined with the <img> tag.

The <img> tag is empty, it contains attributes only, and does not have a closing tag.The src attribute specifies the URL (web address) of the image:

<img src="url" alt="some_text">

The alt Attribute• The alt attribute specifies an alternate text for an image, if the image cannot be

displayed.

• The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

• If a browser cannot find an image, it will display the alt text:

Example<img src="wrongname.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

Three Rules for Creating Images1. Save images in the correct format

2. Save Images in the right size

3. Measure images in pixels

Image FormatsJPEG : Image with many different colors, like photographs.

GIF : Images with few colors or large areas of the same color, like logos or charts.

PNG : was created as an improved, non-patented replacement for GIF, and is the most used lossless image compression format on the Internet.