Topics

HTML Images

A web page's design and appearance can be improved with images.

Example :

<!DOCTYPE html>
<html>
<body>

<h2>HTML Image</h2>
 <img src="https://developerstutorial.com/example-image/html.png" alt="HTML Logo">

</body>
</html>

Try with example

Output:

HTML Images Syntax

An image is embedded on a web page using the HTML tag.

Images are linked to web pages rather than being physically put into them. The tag serves as a placeholder for the picture that is being referenced. The tag is empty, includes only attributes, and lacks a closing tag. Two attributes are required for the tag check syntax below:

Syntax

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

The src Attribute

Note: When a web page loads, the browser gets the picture from a web server and inserts it into the page at that time. As a result, ensure that the image remains in the same location on the web page; otherwise, your visitors will see a broken link indicator. If the browser cannot find the image, the broken link icon and alt text are displayed.

Example:

 <!DOCTYPE html>
<html>
<body>

<h2>Alternative text</h2>

<p>The src attribute should reflect the image path</p>

<img src="https://developerstutorial.com/example-image/html.png" alt="HTML Logo" width="500" height="333">

</body>
</html>

Try with example

The alt Attribute

If a user is unable to view an image for some reason, the necessary alt attribute gives an alternative text (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

The alt attribute's value should explain the image:

Example:

 <!DOCTYPE html>
<html>
<body>

<h2>Alternative text</h2>

<p>The src attribute should reflect the image path</p>

<img src="https://developerstutorial.com/example-image/html.png" alt="HTML Logo" width="500" height="333">

</body>
</html>

Try with example

Note: If a browser is unable to locate an image, the value of the alt attribute will be displayed.

Image Size - Width and Height

The width and height of an image can be specified using the style attribute.

Example:

 <img src="https://developerstutorial.com/example-image/html.png" alt="HTML LOGO" style="width:500px;height:600px;">

Try with example

You might also employ the width and height attributes:

Example:

 <img src="https://developerstutorial.com/example-image/html.png" alt="HTML LOGO" width="500" height="600">

Try with example

The width and height attributes always define the width and height of the image in pixels.

Width and Height, or Style?

HTML accepts the width, height, and style attributes.

However, we recommend that you use the style attribute. It prohibits styles sheets from altering picture sizes:

Example :

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

<img src="https://developerstutorial.com/example-image/html.png" alt="HTML5 Logo" width="128" height="128">

<img src="https://developerstutorial.com/example-image/html.png" alt="HTML5 Logo" style="width:128px;height:128px;">

</body>
</html>

Try with example

Images in Another Folder

If your photos are in a subfolder, the src attribute must include the folder name:

Syntax :

<img src="/images/YOUR IMAGE NAME.EXTENSION" alt="ALT TEXT" style="width:128px;height:128px;">

Images on Another Server/Website

Some websites link to an image hosted on a different server. You must use an absolute (full) URL in the src property to point to a picture on another server:

Example:

<img src="FULL SERVER NAME WITH PATH" alt="ALT TEXT">

Image as a Link

Put the tag within the tag to use an image as a link:

Example:

<a href="/introduction-of-css">
  <img src="https://developerstutorial.com/example-image/html.png" alt="CSS tutorial" style="width:42px;height:42px;">
</a>

Try with example

Image Floating

To make an image float to the right or left of a word, use the CSS float property:
Example:

<p><img src="https://developerstutorial.com/example-image/html.png" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>

<p><img src="https://developerstutorial.com/example-image/html.png" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>

Try with example

Common Image Formats

The most common picture file types are listed below, and they are all supported by all browsers (Chrome, Edge, Firefox, Safari, and Opera):

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