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.
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.
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.
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.
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.
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.
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:
- Absolute file paths: It always includes the root element as well as the entire directory list necessary to locate the file.
- Relative File Paths: A hierarchical path representation that locates a file or folder on a file system starting with the current directory.
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.