HTML Images

Last Updated On
Tuesday 24th May 2022

html images

Images can improve the design and the appearance of a web page.If we want to use images in our html files, we can simply do this by using the <img> tag.

The src Attribute

The required src attribute specifies the path (URL) to the image.

  • The first attribute for the <img> tag is called the src or source attribute.
  • If you compare both <img> and anchor <a> tag then the src attribute acts like the href attribute we used in the links.
  • The src attribute is where we specify the image file.
  • For this section, the files are in the folder called images.
  • The image file can be loaded using relative and absolute paths, just like the anchor tags

insert image in html

	<img src="./two.png" />
	

This is relative path because we are telling the browser to find the image with the name ./two.png../ means we are telling the browser to look in the same or current directory/folder.

The alt Attribute

  • The required alt attribute provides an alternate text for an image
  • Another important attribute for the images is called alt which stands for alternative text.
  • This text will be used to describe what the image we are using is about.
  • When the browser cannot load the image then the alternative text will appear on the browser.
	<img
  src="./img/2.png"
  width="300"
  height="300"
  alt="Some Alternative Text"
  title="Some Wonderful Title for Image"
/>
	

The Image title Attribute

You can also add title attributes to images, to provide further supporting information if needed.

	<img src="./img/2.png" width="300" height="300" alt="Some Alternative Text" />
	

Image Size – Width and Height

You can use the style attribute to specify the width and height of an image.

	<img
  src="./img/2.png"
  alt="Some Alternative Text"
  style="width:300px;height:300px;"
/>
/>
	

html insert image

You can use the width and height attributes.

	<img src="./img/2.png" width="300" height="300" alt="Some Alternative Text" />
	

Note: It Always define the width and height of the image in pixels.

Use an Image as a Link

To use an image as a link, just put the <img> tag inside the <a> tag.

	<a href="url">
  <img src="/2.png" alt="CJ" />
</a>
	

Some Common Used Image Formats

Abbreviation File Format File Extension
APNG Animated Portable Network Graphics .apng
GIF Graphics Interchange Format .gif
ICO Microsoft Icon .ico, .cur
JPEG Joint Photographic Expert Group image .jpg, .jpeg, .jfif, .pjpeg, .pjp
PNG Portable Network Graphics .png
SVG Scalable Vector Graphics .svg

Warning: Most images are copyrighted. Do not display an image on your webpage unless

  • You own the image.
  • You have permission from the image owner.
embed images in html
embedded images in html
html images
how to add an image in html
add image html
add image in html
html add image
how to add image in html
how to insert an image into html
html insert image
insert an image in html
how to insert an image in html
html img size
img html size
img size html
insert image in html
how to insert image in html
html image size
html size image
image size html
html jpg