A Cropping Tool A few attractive images can make a Web site look great. However, make sure the image or photo has been properly cropped, sized, and optimized so that it will not cause a delay on loading the page.

If possible, CropCROP

When you crop a photo, you use the Crop tool or the Select tool to grab the most important rectangular area within the photo, cutting away unneeded background information. The result should be an image that better displays the intended subject, with the added benefit of often having a smaller file size.
the photo, to clearly display the more important features and also reduce the file size. A good example of cropping is to select just a person's head and shoulders, instead of including the entire body as well as the background. Both the simple Windows Paint and powerful Photoshop have cropping tools on their main toolbars. The newer versions of Windows also have a Snipping Tool: Start > All Programs > Accessories > Snipping tool. And Expression Web has its own Cropping tool: View > Toolbars > Pictures.

The Internet uses compressed .GIFGIF

The Graphics Interchange Format (GIF) was introduced by CompuServe in 1987. This format allows an image to use up to 256 distinct colors in a relatively small file size. Most online drawings and simple animations are .gif files.

The Joint Photographic Experts Group (JPEG or JPG) is the most common compression method for photographic images. JPEG typically achieves 10:1 compression with little perceptible loss in image quality. JPEG is a lossy compression method, that is, some visual quality is lost in the process and cannot be restored. JPEG files can display up to 16 million colors.

Portable Network Graphics (PNG) is an image format that employs lossless data compression. PNG was created in 1995 to improve upon and replace GIF files, when it was determined that the GIF data compression algorithm had been patented by Unisys and there might be royalty issues with using GIF files on the Web.
files for images. They are usually more than ten times smaller in size than a comparable Windows .BMPBMP

Windows Bit Map (BMP) images are uncompressed files which have very good quality, but also very large file sizes, and are therefore not suited for the Internet.

The following line of HTML code will display the image immediately below it:

<img src="images/ZoeyAn.gif" width="120" height="120" alt="Picture of Zoey Dog" />

The short 4 minute YouTube video below shows you how to quickly add images using Windows Notepad.

You can even use an image as a hyperlink by using the code below (notice the blue hyperlink border around the image). Click on it to confirm that it works.

<a href="http://en.wikipedia.org/wiki/Dog" target="_blank"><img src="images/ZoeyAn.gif" width="120" height="120" alt="Zoey Dog" /></a>

Picture of Zoey Dog. Zoey will blink if she likes you. Click for more info about dogs.

Add some images into a practice Web page, and add an alt tag, a border, make the image float right, make it a hyperlink... Experiment and become good at inserting images into Web pages.

For more HTML code samples see: www.w3schools.com
For other resources and tutorials see: quackit.com and htmlquick.com

Validation checks the syntax of your file, looking for both errors and possible issues when viewing your page in a browser. Some of the problems reported are missing end tags, missing characters, invalid attributes, incorrect nesting of elements...
 your file, see: http://validator.w3.org
Optimize your page: http://www.websiteoptimization.com/services/analyze/

Review Assignment Learning Project: 10 Practice Review Steps

Return to Menu   Top