Optimizing the HTML Code

Optimizing the HTML Code

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

Attribute:What it does:


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.


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:


    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:


    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:
XDR solutions

The Benefits of Using XDR Solutions

Cybercriminals constantly adapt their strategies, developing newer, more powerful, and intelligent ways to attack your network. Since security professionals must innovate as well, more conventional endpoint detection solutions have evolved

AI is revolutionizing fraud detection

How AI is Revolutionizing Fraud Detection

Artificial intelligence – commonly known as AI – means a form of technology with multiple uses. As a result, it has become extremely valuable to a number of businesses across

AI innovation

Companies Leading AI Innovation in 2023

Artificial intelligence (AI) has been transforming industries and revolutionizing business operations. AI’s potential to enhance efficiency and productivity has become crucial to many businesses. As we move into 2023, several

data fivetran pricing

Fivetran Pricing Explained

One of the biggest trends of the 21st century is the massive surge in analytics. Analytics is the process of utilizing data to drive future decision-making. With so much of

kubernetes logging

Kubernetes Logging: What You Need to Know

Kubernetes from Google is one of the most popular open-source and free container management solutions made to make managing and deploying applications easier. It has a solid architecture that makes

ransomware cyber attack

Why Is Ransomware Such a Major Threat?

One of the most significant cyber threats faced by modern organizations is a ransomware attack. Ransomware attacks have grown in both sophistication and frequency over the past few years, forcing

data dictionary

Tools You Need to Make a Data Dictionary

Data dictionaries are crucial for organizations of all sizes that deal with large amounts of data. they are centralized repositories of all the data in organizations, including metadata such as