All TalkersCode Topics

Follow TalkersCode On Social Media - A Social Media Network for developers Join Now ➔

How To Resize Image In HTML

Last Updated : Mar 11, 2024

How To Resize Image In HTML

In this tutorial we will show you how to resize image in HTML, with the help of Images a page looks to be more attractive. It helps to improve the design of a webpage.

For inserting an image in HTML a <img> tag is used. HTML <img> tag will declare particular section to show image data, whereas <img> tag is an empty tag, it contains only attributes and not have any closing tag.

You can insert image in a webpage or in html from internet, directory of your computer, from local drives and from a folder also. Today, we understood how we are able to resize an image in HTML.

Step By Step Guide On How To Resize Image In HTML :-

As we know, HTML <img> tag is a singular tag and have no any closing tag. Also, it can be used anywhere in HTML code but only in <body> tag. Today, we will specify the concept of resizing an image in HTML.

Here, we say about the resizing of images. As, we know all the images that we will use and we had used them have some width and height or dimensions.

But we have to adjust them according to our webpage by giving them width and height. Here we will understand how we resize an image with the help of codes is given here.

<!DOCTYPE html>
          <title> Title of the document<title>
       <img src=”imagepath_is_declared_here” width=”200px” height=”150px” alt=””>
  1. First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
  4. Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here. Here we use <img> tag, (which is a singular tag) with attributes type, src, height, width and alt etc.
  5. Here src specifies the source file with its extensions.
  6. Here, we have to give the name of image file with its extension and it may be an online image or downloaded also, we have already discussed about how to add images in html from internet or from local drive, you can go through those webpages to understand how src works.
  7. Now, at last for its resizing we have to specify the width and height of the images according to our requirements. The size may be in px, percentages and in other formats also.
  8. At last, the <body> and <html> tags are closed with </body> and </html> respectively.

Attributes of embed tag are :-

  • Src - as we already know, src attribute is used to give the image file location in code with its extension like .jpeg, .jpg, .png, etc…
  • alt - here alt stands for alternative text, it means that if due to some error in any case image is not displayed on browser screen, then this alternative tag is used the text written inside in this tag is displayed when image file in not displayed. So, that the user may able to know about what the image is about.
  • Height - the height attribute is used in img tag just to give image dimensions about height and it may be in percent and pixel also, height is only used to give height to image. It helps to resize height of the image.
  • Width - As height, width attribute is used in img tag just to give image dimensions about width and it may be in percent and pixel also as height, width is only used to give width to image. It helps us to resize the width of the image.

Conclusion :-

At last, after reading this article we are able to resize an image with the help of height and width attribute.

The source image may be from anywhere, but can be resized according to user’s choice with the help of height and width. I hope this tutorial on how to resize image in HTML helps you.

Author Image About Riya

A recent graduate with a Bachelor of Technology (B.Tech) in Computer Science from India. She is passionate about leveraging technology to solve real-world problems. With a strong foundation and experience in programming languages such as Python, Django, HTML, CSS, and JavaScript, java, php and have honed her skills through hands-on projects and coursework.

Follow Riya On Linkedin 🡪