Images are an important part of engaging web design. They should be relevant, convey information and mood, and be instantly recognizable while fitting the site's color palette. When adding images, the HTML <img> tag is used which includes attributes like src for the image URL and alt for alternate text. For best results, images should be saved in the correct format like JPEG, GIF or PNG, the right size, and measured in pixels.

1. IMAGESWeb Design CIT 230
Dustin Sanders

2. 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.

3. Images Should….
Be relevant
Convey information
Convey the right mood
Be instantly recognizable
Fit 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.

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

5. HTML Images Syntax
In 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;">

6. Three Rules for Creating Images
1. Save images in the correct format
2. Save Images in the right size
3. Measure images in pixels

7. Image Formats
JPEG : 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.