HTML Images


In this tutorial, we will learn about HTML Images, how to add images to HTML, and how to implement and use them through examples. Previously, web sites solely included textual material, making them look dull and uninteresting. Fortunately, it wasn't long before users were given the option to embed photos on online pages. In this post, we will learn how to add photos to a web page to make it more visually appealing, as well as numerous techniques for inserting photographs.

There are two methods for inserting photos onto a webpage:

  • By specifying the entire path or address (URL) to an online file.
  • By specifying the file path relative to the current web page's location

We will first describe embedding the image into the webpage, and then we will comprehend both of the preceding techniques.

Including images on a webpage

The element is used to include or embed images on a webpage/website. The "image" element is an empty tag, which implies that it can only contain a list of attributes and has no closing tag. The use of photos increases the quality of the webpage while also improving the design structure and attractiveness. Nowadays, a website does not directly add images to a web page; instead, images are connected to web pages via the tag that stores the image space.

Syntax


src

The src abbreviation stands for source. Each picture includes a src property that informs the browser where to look for the image you wish to display. The specified URL for the picture corresponds to the site where the image is kept.

When a web page is loaded for the first time, the browser retrieves the picture from a web server and inserts it into the page. Users will see a broken link symbol if the picture is not detected by the browser. It's conceivable if the file path is incorrect or the image was erased from that place.

Example

Preview

Alt

If the picture cannot be shown, the alt property serves as an alternate description. The alt attribute's value is user-defined text. It typically occurs when the user is unable to view it for some reason, such as a slow internet connection or an error in the src attribute, or when the user employs a screen reader.

Example

Preview

Width and height of image

The width and height properties are used to specify an image's height and width. By default, attribute values are supplied in pixels. The width and height properties are always specified in pixels.

Example

Preview

Adding titles to image

Along with pictures, titles may be added to photos to offer further information about the embedded image. The title attribute is used to put a title.

Example

Preview

Setting style to the image

The border property is used to adorn the picture in this example. Every image is surrounded by a border by default. The border property allows you to modify the thickness of the border. With a thickness of "0," there will be no border around the image.

Example

Preview

Aligning an image

By default, an image is aligned to the left side of the page, but the align property allows it to be positioned to the center or right of the page. 

Example

Preview

Adding image as a link

A picture with a URL embedded in it can function as a link. It is possible to accomplish this by enclosing a "img" tag within a "a" element. In order to render the picture on the webpage, we must give the file path. File paths are used to connect external resources like photos, movies, style sheets, JavaScript, showing other web pages, and so on. To include a file on a web page, its origin must be known.

There are two kinds of file paths:

  1. Absolute file paths: It always includes the root element as well as the entire directory list necessary to locate the file.
  2. Relative File Paths: A hierarchical path representation that locates a file or folder on a file system starting with the current directory.

Example

Preview

 Common Image Format: This is the most widely used image file format, which is supported by all browsers.

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

Attributes

Attribute Description
src It specifies the path to the picture.
alt It is used to define an image's alternate text. It is useful since it tells the user about what the picture signifies, and if the image cannot be displayed due to a network issue, this alternate text will be displayed.
crossorigin It is used to import pictures from third-party websites that support cross-origin access for usage with canvas.
height It is used to specify the image's height.
width It is used to specify the image's width.
ismap This function specifies an image to be used as a server-side image map.
loading It specifies whether a browser should postpone image loading until certain criteria are satisfied or load an image instantly.
longdesc It specifies a URL to a thorough explanation of a picture.
referrerpolicy It specifies the referrer information to utilize when retrieving an image, such as no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, and unsafe-url.
sizes This property is used to determine picture sizes for various page layouts.
srcset This command is used to supply a list of image files to be used in various situations.
usemap It's used to define a picture as a client-side image map.

FAQs

The alt attribute in the HTML <img> tag is used to provide alternative text for the image. This text is displayed in place of the image if the image fails to load, or if the user is visually impaired and is using a screen reader. It is also used by search engines to understand the context of the image and improve accessibility. The alt text should convey the message of the image accurately. 

Alt text should also be kept short and concise, preferably less than 125 characters.

Yes, the alt text attribute helps in search engine optimization (SEO) as it provides context to the search engine regarding the image. Search engines can't see images and rely on alt text to understand the content.