HTML Images

HTML Image Src

Above we have defined the src attribute. Src stands for source, the source of the image or more appropriately, where the picture file is located. As with links described in a previous lesson, you may use any standard URL to properly point the src attribute to a local or external source.

There are two ways to define the source of an image. First you may use a standard URL. (src=http://www.websitename.com/photo/sunset.gif) As your second choice, you may copy or upload the file onto your web server and access it locally using standard directory tree methods. (src="../sunset.gif") The location of this picture file is in relation to your location of your .html file.

    

        

            
Local Src
            
Location Description
        
        

            
src="sunset.gif"

             
            
picture file resides in same directory as 

            .html file
        
        

            
src="../sunset.gif"

             
            
picture file resides in previous directory as 

            .html file
        
        

            
src="../pics/sunset.gif"

             
            
picture file resides in the pic directory in 

            a previous directory as .html file
        
    

A URL cannot contain drive letters, since a src URL is a relational source interpretation based on the location of your .html file and the location of the picture file. Therefore something like src="C:\wwwwebpics" will not work. Pictures must be uploaded along with your .html file to your web server.

Each method has its pros and cons, for instance using the URL of pictures on other sites poses a problem if the web master(s) of the other site happen to change the physical location of the picture file. Copying the file directly to your web server solves this problem, however, as you continue to upload picture files to your system, you may eventually run short on hard drive space. Use your best judgement to meet your needs.

HTML Alternative Attribute

The alt attribute specifies alternate text to be displayed if for some reason the browser cannot find the image, or if a user has image files disabled. Text only browsers also depend on the alt attribute since they cannot display pictures.

<img src="http://example.com/brokenlink/sunset.gif" 

alt="Beautiful Sunset" />

 

HTML Image Height and Width

To define the height and width of the image, rather than letting the browser compute the size, use the height and width attributes.

<img src="sunset.gif" height="50" width="100">

 

Above we have defined the src, height and width attributes. By informing the browser of the image dimensions it knows to set aside a place for that image. Without defining an image\'s dimensions your site may load poorly; text and other images will be moved around when the browser finally figures out how big the picture is supposed to be and then makes room for the picture.

Vertically and Horizontally Align Images

Use the align and valign attributes to place images within your body, tables, or sections.

   1. align (Horizontal)

•         right
•         left
•         center

   2. valign (Vertical)

•         top
•         bottom
•         center

<p>This is paragraph 1, yes it is...</p>



<p>



<img src="sunset.gif" align="right">



The image will appear along the...isn't it?



</p>



<p>This is the third paragraph that for displaying the results...</p>

 

Thumbnails

Thumbnails are small size (Kilobytes) pictures that link to the larger, high quality picture. To make a thumbnail save a low-quality version of a picture and make it have smaller dimensions. Now make this low-quality picture into an image link and have it point to the the high-quality picture. creating the 2 images one is large and one is small . when you click small image the big image is open . it will like your gallery example.

<a href="sunset.gif">

<img src="thmb_sunset.gif">

</a>

 

HTML GIF vs JPEG

Gifs are best used for banners, clip art, and buttons. The main reason for this is that gifs can have a transparent background which is priceless when it comes to web design. On the down side, gifs are usually larger files, not as compressed as a jpeg, which calls for slow load times and large transfer rates. Gifs are also limited to the 256 color scheme.

Jpegs however, have an unlimited color wheel, and have a high compression rate downsizing your load times and saving hard drive space. Jpegs don't allow for transparent backgrounds, but their size / quality ratio is outstanding. Its best to use Jpegs for photo galleries, or artwork to allow the viewer to catch that extra bit of detail. Avoid Jpegs for graphical design, stick to using them for thumbnails and backgrounds.