Resizing of images in HTML
Here you will get to know more about resizing the images in HTML language format. Your website will look more appropriate and efficient after you provide a perfect alignment to the images involved in your webpage. Reducing the file size leads to the reduction of download time of the image.
Attributes used to resize an image in HTML
<img>: This tag defines the image in your document and includes the following attributes for linking the images to the HTML pages.
And the <img> tag includes the following attributes:
<src>: This attribute specifies the URL of the image included in your document. It extracts the image from the web server and inserts it into the webpage. You can also put the path of your file here.
<height>: This attribute is used to add the height size to the image. Mostly include the values in Pixels or %.
<width>: This attribute is used to add the width size to the image. Mostly include the values in Pixels or %.
<alt>: This attribute provides an alternative text message to an image included in your webpage. (Not necessary)
The following code looks as follows:
First of all, write the proper HTML syntax to start your code to describe the title of your document.
<html> <head> <title> resizing the images </title> </head>
Then the body tag includes the content with one heading and an image for the demo.
<body> <h1> THE BELOW IMAGE IS RESIZED BY THE ATTRIBUTES</h1> <img src="C:\Users\Jayshree\Desktop\codespeedy\CODE.png" width="250" height="400" alt="ERROR"> </body> </html>
Here, the <img> tag includes the required attributes that are needed to resize the image like height and width. The values are in “%”, which can be modified according to your requirements directly from the raw code.
The output looks as follows:
This was the simple way of resizing an image, there are few advanced ways of doing the same objective by using attributes like “sizes” and “srcset”.