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="http://placekitten.com/500/500" /> <h2>with attributes</h2> <img src="http://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.
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
