Computer >> Computer tutorials >  >> Programming >> HTML

HTML Image Size

The HTML image size refers to the height and width of an image. They are listed as HTML attributes on the <img> element. Here’s how to set them.

Syntax

The syntax for setting the width and height attributes of an <img> tag is:

<img src="<name of website>" alt="<alt tag>" height="<in px>" width="<in px>" />

Here’s a code snippet showing how it works: 

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title>repl.it</title>
   <link href="style.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
   <h1>Image Size in HTML</h1>
   <h2>without attributes</h2>
   <img src="https://placekitten.com/500/500" />
   <h2>with attributes</h2>
   <img src="https://placekitten.com/500/500" width="300" height="300" />
   <script src="script.js"></script>
 </body>
</html>

The height and the width of the <img> element is a number in pixels (in between quotes). It is a good idea to indicate both height and width attributes so that the space is allocated for the image before the web page loads. If the size of the image is not indicated prior to page render, the page will adjust it’s layout as the image loads. 

Browser Support

The width and height attributes of an <img> element is supported on all web browsers.