IMAGESBY: SHANALEE MANWARING

CIT 230

GREAT IMAGES = AMAZING SITES

3 RULES OF IMAGES

1.

SAVE IMAGES IN THE RIGHT

FORMAT

2.

SAVE IMAGES AT THE RIGHT

SIZE

3.

ALWAYS MEASURE IMAGES IN

PIXELS

SAVING FORMATS

JPEGUSED WHEN YOUR PICTURES

HAVE MANY DIFFERENT COLORS.

BEST FOR PHOTOGRAPHS

GIFOFTEN USED WHEN YOUR PICTURE

HAS SHARP LINES AND SOLID COLORS.

ABILITY TO BE ANIMATED

BEST FOR LOGOS AND ANIMATED IMAGES

PNGSIMILAR TO GIF, BUT USED FOR TRANSPARENT BACKGROUNDS

BEST USED FOR SCREEN GRAPHICS. THEY DO NOT LOOK

GOOD PRINTED OUT

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)

INSERTING AN IMAGE ONTO YOUR SITEImages 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>

THE CODE THE RESULT

=

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