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.
and .JPGJPEG

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.
and .PNGPNG

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.
file. If you use Microsoft Windows Paint (Start > All Programs > Accessories > Paint) you can choose Save As, and under Save as type choose .gif or .jpg or .png to convert a huge .bmp to a much more reasonable format and size. Professionals use programs like Photoshop which has specific features for Web graphics, such as its very handy File > Save for Web & Devices menu option.

Even some .jpg files can be very large. Today's megapixel digital cameras take high resolution images that can be literally poster size, over 3600 pixels wide, and over 3 megabytes large - that means very slow speeds when someone tries to open your Web page.

If you insert a large picture into a Web page and set its height and width property to a small size, it appears small, but it is still huge and slow loading. ResizeRESIZE

Most paint programs have a resize option:
PhotoShop: File > Save for Web & Devices
Microsoft Windows 7 Paint: Home tab > Resize
Office Picture Manager: Edit Pictures > Resize
or Edit Pictures > Compress Pictures
 an image before you insert it; reducing your file sizes will optimize your web site. Perhaps you might choose to make it a more reasonable 360 pixels wide. 360 is 1/10 of the width of 3600 pixels, but also 1/10 of the height as well, and consequently you can actually make the file size nearly 100 times smaller.

A serious webweaver should optimizeOPTIMIZE

Optimization is the process of improving the page download time by managing such components as page size, image size, and the number of objects and scripts on a page.
a site after inserting images. For help with page optimization visit: http://www.websiteoptimization.com/services/analyze/

Now it's time to insert an image in a Web page:

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">

Picture of Zoey Dog. Zoey will blink if she likes you.

Adding the height and width attributes to the image tag used to allow your page to load more efficiently. There are several ways to discover the width and height sizes of an image. Most Paint programs will display the width and height on the bottom of the screen when the file is opened. If your Explorer is set up to display the status bar on the bottom, you can just select the image and its dimensions will display at the bottom of the screen. Or you can right-click on the file and choose Properties. 

Reminder: If you upload a file that is 3,600px wide, and you set the width attribute to width="200px" the file will display as 200px, but it is still a very large 3,600px file and will download very slow.  So be sure to resize and optimize your files before uploading them to your website.

However, today's HTML5 websites should be coded for Responsive Website Design (RWD) where sites are optimized for each device and display differently on a desktop PC, tablet, and smartphone, whether in portrait or in landscape view. One of the aspects of RWD is to no longer use the width= and height= attributes of the img tag. So the code above should now read:
<img src="images/ZoeyAn.gif" alt="Picture of Zoey Dog">

The image source (src) above could be a .gif, a .jpg, or .png. In this case, the image is actually an animated gif of my dog Zoey. If you watch her for a few seconds she will blink if she likes you. The required img alt tag (see alt="Picture of Zoey Dog" below) allows screen reader programsCREEN READERS

Screen Reader Programs convert and present screen content as simulated speech for visually impaired readers. Dragon Naturally Speaking, Jaws, and the lightweight Windows Narrator are but a few examples of text-to-speech programs.
 to use simulated speech to give an audio description of the image to visitors to your site who might be vision impaired. On some browsers, if you hover over the images you will see a small popup displaying the written text of the alt tag. For other browser you must add the optional title attribute, such as title="Picture of Zoey Dog." Hover your mouse over Zoey to see the alt or title text.

Picture of DogYou can make the image float to the right of the page by using the style code below:
<img src="images/ZoeyAn.gif" style="float:right" alt="Picture of Dog" title="Picture of Zoey Dog">

You could add a border to the image by using the style code below:
<img src="images/ZoeyAn.gif" style="border:6px solid black;" alt="Picture of Zoey Dog">
Picture of Zoey Dog. Zoey will blink if she likes you.

You can change the background image of a page by using the inline style shown below:
<body style="background-image:url(images/bgImage.jpg)">
The background image for these tutorials was created by adding the following line to the body selector of the external cascading stylesheet:
body {background-image:url(images/bgImage.jpg);}

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" alt="Zoey Dog"></a>

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

You can create a line separating content or images using the horizontal rule or <hr> tag shown below (notice it is self-closing):
<hr style="width:80%; color:#009; text-align:center; height:3px">


The problem with the <hr> tag is that it displays differently in different browsers. For instance, the Internet Explorer uses the color attribute with the <hr> element, whereas Firefox uses the background-color attribute. To deal with this, you could set both attributes as in: color:#009; background-color:#000. Centering can also be challenging in different browsers. So perhaps the best technique to guarantee consistent results may be to simply add an image instead of an <hr>. That way you can also use gradients and other special effects. For instance see the image below:

Blue Line

A third way to draw a line is to use the border attribute. For instance the line under the <h1> tag on the top of this page was created by adding the following border attribute to the h1 selector in the cascading stylesheet:
h1 {border-bottom:2px #009 solid;}

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.

Troubleshooting Tip: A box with a red X in it means the image is not there. Which means - you did not put it in the images folder, you did not include the path to the images folder, as in images/pic.jpg, you spelled it wrong, (Linux servers are case sensitive), you did not upload it, you uploaded it to the wrong folder and not to the images folder, ...

The short 4 minute YouTube video below shows you how to quickly add images using Windows Notepad. (Please wait for it to load.)
Note: We should no longer use the width= and height= attributes of the img tag when you are coding for Responsive Web Design in HTML5.

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

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