HTML Images: Images can improve the design and the appearance of a page.

Images are vital to enhance just as to portray numerous complex ideas in straightforward manner on your website page. This tutorial will take you through straightforward ways to use images in your web pages.


Example

<img src="pic_islamabad.jpg" alt="Pakistan Islamabad">

Example

<img src="img_girl.jpg" alt="Girl in a jacket">

Example

<img src="img_islamabad.jpg" alt="Flowers in Islamabad">

HTML Images Syntax

The HTML <img> tag is used to embed a picture in a website page.

Pictures are not technically embedded into a website page; pictures are linked to site pages. The <img> tag creates a holding space for the referenced to image.

The <img> tag is vacant, it contains attributes just, and doesn’t have a closing tag.

The <img> tag has two required attributes:

src – Specifies the path to the picture

alt – Specifies a substitute book for the picture

Syntax

<img src="url" alt="alternatetext">

The src Attribute

The required src attribute indicates the path (URL) to the picture.

Note: When a site page loads; it is the browser, at that point, that gets the picture from a web server and inserts it into the page. In this manner, ensure that the picture actually remains in a similar spot according to the website page, in any case, your visitors will get a messed up link icon. The messed up link icon and the alt text appear if the browser can’t discover the picture.

Example

<img src="img_islamabad.jpg" alt="Flowers in Islamabad">

The alt Attribute

The necessary alt attribute gives an alternate text to a picture if the user for reasons unknown can’t see it (as a result of moderate connection, an error in the src attribute, or if the user uses a screen reader).

The worth of the alt characteristic ought to portray the picture:

Example

<img src="img_islamabad.jpg" alt="Flowers in Islamabad">

On the off chance that a browser can’t discover a picture, it will show the worth of the alt attribute:

Example

<img src="wrongname.gif" alt="Flowers in Islamabad">

Tip: A screen reader is a software program that reads the HTML code, and allows the user to “listen” to the substance. Screen readers are valuable for individuals who are outwardly impaired or learning disabled.


Picture Size – Width and Height

You can use the style attribute to determine the width and stature of a picture.

Example

<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">

Alternatively, you can use the width and height attributes:

Example

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

The width and height attribute consistently define the width and tallness of the picture in pixels.

Note: Always indicate the width and height of a picture. On the off chance that width and height are not indicated, the site page might flicker while the picture loads.


Width and Height, or Style?

The width, height, and style attributes are all valid in HTML.

In any case, we suggest using the style attribute. It prevents styles sheets from changing the size of pictures:

Example

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 100%;
}
</style>
</head>
<body>

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

</body>
</html>

Images in Another Folder

In the event that you have your pictures in a sub-folder, you should incorporate the folder name in the src attribute:

Example

<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

Images on Another Server/Website

Some sites highlight a picture on another server.

To highlight a picture on another server, you should determine an absolute (full) URL in the src attribute:

Example

<img src="https://www.worldofitech.com/images/worldofitech_green.jpg" alt="worldofitech.com">

Notes on outside pictures: External pictures may be under copyright. In the event that you don’t get permission to use it, you might be in violation of copyright laws. Likewise, you can’t handle outer pictures; it can suddenly be eliminated or changed.


Animated Images

HTML allows animated GIFs:

Example

<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">

Image as a Link

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

Example

<a href="default.asp">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>

Image Floating

Use the CSS float property to allow the picture to float to the right or to the left of a text:

Example

<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>

<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>

Common Image Formats

Here are the most common image file types, which are supported in all browsers (Chrome, Edge, Firefox, Safari, Opera):

AbbreviationFile FormatFile Extension
APNGAnimated Portable Network Graphics.apng
GIFGraphics Interchange Format.gif
ICOMicrosoft Icon.ico, .cur
JPEGJoint Photographic Expert Group image.jpg, .jpeg, .jfif, .pjpeg, .pjp
PNGPortable Network Graphics.png
SVGScalable Vector Graphics.svg

Chapter Summary

  • Use the HTML <img> element to define an image
  • Use the HTML src attribute to define the URL of the image
  • Use the HTML alt attribute to define an alternate text for an image, if it cannot be displayed
  • Use the HTML width and height attributes or the CSS width and height properties to define the size of the image
  • Use the CSS float property to let the image float to the left or to the right

Note: Loading enormous pictures takes time and can show down your site page. Use pictures cautiously.

HTML Image Tags
Tag         Description
<img>   Defines an image
<map>  Defines an image map
<area>  Defines a clickable area inside an image map
<picture>            Defines a container for multiple image resources

Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your photos and creative projects with us.