Images in HTML

  • Last updated Apr 25, 2024

Images make a website looks appealing and interesting, catching the visit's eye. They help convey information quickly and clearly, making the content easy to understand. Images also contribute to the website's identity, reinforcing its brand. A website with well-placed images is more user-friendly and enjoyable to navigate. Additionally, search engines consider images, so using them wisely can improve the website's visibility in search results.

In HTML, the <img> tag is used to display images. The <img> tag is an empty tag, meaning it has only an opening tag and no closing tag.

The <img> tag comes with various attributes that control the image's appearance and behavior. For example:

<img src="some-image.jpg" alt="Description of the image">

The src attribute represents the source of an image, specifying the URL or file path of the image. On the other hand, the alt attribute represents alternative text, providing a descriptive text of the image for both accessibility and SEO purposes.

Lazy Loading and Performance

Lazy loading is a technique employed in web development to enhance the loading performance of web pages, particularly those containing a large number of images. The underlying concept of lazy loading is to postpone the loading of specific images until they are genuinely required, namely, until they are about to be displayed on the user's screen. This approach helps in prioritizing the loading of essential content initially and results in a reduction in the overall page load time.

Lazy loading is implemented using the loading attribute in the <img> tag. The attribute can take the value "lazy" and it looks like this:

<img src="some-image.jpg" alt="Description of the image" loading="lazy">

Here's a complete example:

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Paragraph Example</title>
    <h1>This is a header</h1>
    <p>This is a simple HTML paragraph.</p>
    <img src="some-image.jpg" alt="Description of the image" loading="lazy">