Web Page Images

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:

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

Adding the height and width attributes to the image tag will 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.

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 alt tag - alt="Picture of Zoey Dog" - 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 give a verbal description of what the image is to visitors to your site who are vision impaired. On some browsers, if you hover over the images you will see a small popup displaying the text of the alt tag. For other browser you must add the title attribute, such as title="Picture of Zoey Dog." Hover your mouse over Zoey to see the alt or title text.

You can make the image float to the right of the page by using the style code below: Picture of Zoey Dog. Zoey will blink if she likes you.

You could add a border to the image by using the style code below:

<img src="images/ZoeyAn.gif" style="border:6px solid black;" width="120" height="120" alt="Picture of Zoey Dog" />
Picture of Zoey Dog. Zoey will blink if she likes you.

Let's draw a line separating the 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:

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

The background image for these tutorials was created in the cascading stylesheet by adding the following line to the body selector: background-image:url('images/bgImage.jpg');

Finally, 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.

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.

The short 4 minute YouTube video below shows you how to quickly add images using Windows Notepad. (Please wait for load.)

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