Image size in HTML

Image size in HTML
Image size in HTML
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.

To change the size of an image in HTML you can use attributes width and height of img tag.

The image's original dimensions are 100 by 111 pixels.

Example 1

The HTML code to locate this picture is:

<img src="sample.gif" width="100" height="111"> 

Always specify the location of every image on a web page. This makes the loading of the page a bit faster, because the browser doesn't need to calculate the size of each image. This is especially important for images placed inside a table. The table will not be displayed until all the images will be fully loaded.

Width and height can be either increased or decreased. However, this doesn't affect load speed of the image, because the file size is actually the same. Therefore be cautious to reduce the size of a high-resolution image, as this may cause a confusion among readers, as to why it take so long to boot for such a small picture. But increasing the size has an opposite effect - the size of the image is huge, but a file of similar size is loaded faster.

Below is an image with twice the width and height (200 x 222).

Example 2

And the corresponding HTML code is:

<img src="sample.gif" width="200" height="222">

The algorithm used by browsers to resample (resize) the image, can not compete with graphical editors. That is why changing the size of the image is recommended only in some cases, because this leads to poor picture quality. It's better to use graphics program. Exceptions are images containing rectangular areas. The pattern below has only 54 bytes and it's original size is 8 by 8 pixels, increased to 150.

Example 3

The image has no distortions, not surprisingly, because all the lines are vertical and horizontal.


Read also

Font size in HTML

Font size in HTML

Graphics formats in HTML

Graphics formats in HTML

Inserting images in HTML

Inserting images in HTML

Aligning images in HTML

Aligning images in HTML

Post comment

Quick navigation

General navigation