1. There are three main rules for images on websites: save images in the correct format (JPEG, GIF, or PNG), save images at the right size by resizing in a photo editor, and always measure images in pixels. 2. JPEG is best for photos with many colors, GIF is best for logos and animations with sharp lines and solid colors, and PNG is similar to GIF but supports transparency. 3. Images can be inserted into a website by saving them in an image folder and using HTML code with the <img> tag to specify the source and alt text, or with <figure> tags to add a caption.

1. IMAGES
BY: SHANALEE MANWARING
CIT 230

2. GREAT IMAGES = AMAZING SITES

3. 3 RULES OF IMAGES
1.
SAVE
IMAGES IN
THE RIGHT
FORMAT
2.
SAVE
IMAGES AT
THE RIGHT
SIZE
3.
ALWAYS
MEASURE
IMAGES IN
PIXELS

4. SAVING FORMATS
JPEG
USED WHEN YOUR PICTURES HAVE
MANY DIFFERENT COLORS.
BEST FOR PHOTOGRAPHS
GIF
OFTEN USED WHEN YOUR PICTURE
HAS SHARP LINES AND SOLID COLORS.
ABILITY TO BE ANIMATED
BEST FOR LOGOS AND
ANIMATED IMAGES
PNG
SIMILAR TO GIF, BUT USED FOR
TRANSPARENT BACKGROUNDS
BEST USED FOR SCREEN GRAPHICS.
THEY DO NOT LOOK GOOD
PRINTED OUT

5. SIZING THE IMAGE
• USING A PHOTO EDITOR WILL
HELP YOU RESIZE AND CROP
YOUR PICTURE.
• ALWAYS SAVE THE IMAGE AT
THE SAME WIDTH AND HEIGHT
YOU WANT IT TO APPEAR ON
THE WEBSITE. (MEASURED IN PIXELS)

6. INSERTING AN IMAGE ONTO YOUR SITE
Images can be inserted into a web site by adding an image folder to your
source folder and keeping all images need for the site in one location.
Code to enter images looks like this:
<img src=“imagefolder/imagename.format” Alt=“image” />
Images can be added as a picture or as a picture with caption. To add
caption to a picture you must use the <figcaption> element.
Code to add an image with caption would look like this:
<figure>
<img src=“imagefolder/imagename.format” Alt=“image” />
<br />
<figcaption>Description of your image</figcaption>
</figure>

7. THE CODE THE RESULT
=

8. SOURCES
 HTTP://WWW.KILLERSITES.COM/ARTICLES_2005/THEORY/IMAGES-IN-WEBPAGES.PHP
 HTTPS://PIXLR.COM/EDITOR/
 HTML & CSS DESIGN AND BUILD WEBSITES; BY JON DUCKETT
 HTTPS://COMMONS.WIKIMEDIA.ORG/WIKI/FILE:MANHATTAN_BEACH_SUNSET.JPG
 HTTP://BELLARD.ORG/BPG/GALLERY2.HTML
 HTTP://WWW.GIFS.NET/GIF/INDEX.PHP?N=IMAGE.PHP&IMAGE_ID=1530&IMAGE_NAME=
3D_CD