Browse DevX
Sign up for e-mail newsletters from DevX


Optimizing the HTML Code : Page 2

You can do some simple things with your HTML tags to make graphics feel faster and work better for all readers.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

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:

<img src="../images/heightwidth/palette.gif" width="160" height="160">

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, 16x16 pixels: Resized to 160x160 pixels
    using height and width attributes in the image tag:

    Original graphic
    It is 1x1 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.

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date