Optimizing the HTML Code

he image tag, offers several attributes that you should always include for best use of graphics:

Attribute:What it does:
width

width=”100″>

Specifies the width of the graphic you are inserting into the page. Using this attribute lets the browser quickly make a space for the image, then go on loading the rest of the page.
height

height=”300″>

Specifies the height of the graphic you are inserting into the page. Using this attribute lets the browser quickly make a space for the image, then go on loading the rest of the page.
alternate text (alt)

alt=”photo of redwood trees”>

Text that displays when the graphic is broken, when the reader has graphics turned off, or when the reader uses an alternative viewing device. Ensures that your page is usable without the graphic and is accessible to people who can’t see the graphic.

In addition, the size of the image in the graphic file and the size you use it in your page should always match.

Finally, put your image files together, in some logical and easy-to-find location.

Use Height and Width Attributes
Be sure to include the height and width of your image in the image tag.

The height and width attributes give information to the browser about the size of your graphic. They are part of the image tag:

Height and width attributes are usually automatically inserted in the HTML code by WYSIWYG page editors. In programs like Homesite, you have option of inserting the size when you use the “insert image tag” feature. If you code strictly by hand, you can find the image height and width in your image editing program.

Using height and width attributes means:

  • The browser doesn’t have to calculate the image size because you’ve told it the height and width values already. If the height and width attributes are not included, the browser has to load the entire image, then calculate its size before displaying it.
  • The text can load before the images, giving the viewers something to do while they wait for time-consuming graphics to load. This can happen because the browser uses the height and width to set a place holder for the image.
  • You can do some design tricks, such as using a one-pixel gif as a spacer. You save a graphic at a much smaller size than you will use it on a page, and then resize it using the height and width tags. You don’t want to do this for a graphic whose quality matters because this process creates a poor looking graphic — but there are situations were this approach can be used to your advantage. The following example shows a resized image:

    Original graphic, 16×16 pixels:Resized to 160×160 pixels
    using height and width attributes in the image tag:

    Original graphic
    It is 1×1 pixels; look very closely to see it.
    One-pixel gif
    Resized using height and width tags to create a “bar.”

Don’t use the height and width attributes to make a graphic appear smaller on the page than it’s actual size; this just creates a larger download time plus added computer processing time. Resize the graphic in your image editing software instead and use it in your page at its true size.

Use the Alternative Text Attribute
Be sure to include the alt text attribute in your image tag.

The ALT attribute of the image tag provides the browser with text information to be displayed whenever it is not possible to display the graphic.

This will show up if your image is broken, if your reader has turned off images in his or her browser, of if the reader is using a text-only browser. In addition, this is a simple way to ensure that visually impaired readers using a “text reader” device will have some sense of what the graphic is about.

Using the alt attribute adds value?and it doesn’t increase the load time for the page.

Alt text is part of the image tag:

mac system palette

Always use the alt attribute. Alt text is most helpful to the viewer when it is descriptive of the graphic, but it can be anything you wish the viewer to see if the graphic cannot be displayed.

Don’t Resize the Image
Use the image at its actual size.

Yes, you can use the width and height image tag attributes to shrink or enlarge an image on-the-fly, but all that does is add processing time for your readers.

Instead, use the image at the size you have saved it in your graphics program. And if you need to use it at a different size, resize it with your image editing tool.

Original size = 252 x 144 pixels
IMG attributes width=”252″ height=”144″
File size = 10.1K
Original size = 252 x 144 pixels
IMG attributes width=”121″ height=”69″
File size = 10.1K
Image had to download, then the browser needed to resize it.
Original size = 121 x 69 pixels
IMG attributes width=”121″ height=”69″
File size = 3.3K
Smaller file, faster download and no resizing.

Storing Image Files
Just as you do with .html files, you need to have a logical file structure for saving and calling your image files, as well as a logical naming convention for the files.

The images themselves aren’t physically placed with the Web page that displays them. Instead, the page will call the images by their file name. The images can be called by either a full, exact path, or a relative path.

File Hierarchy
There are no hard-and-fast rules for file structure; HTML is flexible enough to accommodate many different storage schemes.

  • If all of your site’s HTML files reside in one directory, and if you have just a handful of image files, store your HTML files and image files in the same directory:

    www
      home
        index.html
        logo.gif
        photo.jpg

    Referencing image files in the above directory setup is simple. For example, to reference logo.gif from index.html, you would enter: .

  • For any other situation than the above, store all of your image files in a separate image directory:

    www
      home
        index.html
      page1>
        page1.html
        links1.html
      images
        logo.gif
        photo.jpg
        thing.png

    Referencing image files in the above directory setup is just a tad more subtle. To reference logo.gif from page1.html, you would enter: .

    The .. moves you up one level, from page1 to www. Then, the /images/ moves down from www to the images directory.

Image-File Naming Guidelines
There are no etched-in-stone rules for naming image files. But here are some useful guidelines:

  • Use the 8.3 naming convention. That is, limit the first part of your filename to a maximum of 8 characters and append to this a 3-character extension that describes the file type?gif for a GIF, jpg for a JPEG, and png for a PNG. For example: logo.gif, trees.jpg, alleight.png.

    Why? Because some of your users might be on platforms that do not support long filenames (Windows 3.x, for example).

  • Use all lowercase letters.

    Why? Because some servers (UNIX, for example) are filename case-sensitive and it’s all too easy to make an upper/lower-case mistake when entering a filename in your HTML docs.

  • Do not use spaces or punctuation marks, except for underscores _ and dashes – .

    Why? Because some servers might have trouble decoding these special characters.

Share the Post:
Share on facebook
Share on twitter
Share on linkedin

Overview

The Latest

microsoft careers

Top Careers at Microsoft

Microsoft has gained its position as one of the top companies in the world, and Microsoft careers are flourishing. This multinational company is efficiently developing popular software and computers with other consumer electronics. It is a dream come true for so many people to acquire a high paid, high-prestige job

your company's audio

4 Areas of Your Company Where Your Audio Really Matters

Your company probably relies on audio more than you realize. Whether you’re creating a spoken text message to a colleague or giving a speech, you want your audio to shine. Otherwise, you could cause avoidable friction points and potentially hurt your brand reputation. For example, let’s say you create a

chrome os developer mode

How to Turn on Chrome OS Developer Mode

Google’s Chrome OS is a popular operating system that is widely used on Chromebooks and other devices. While it is designed to be simple and user-friendly, there are times when users may want to access additional features and functionality. One way to do this is by turning on Chrome OS