Previous
Written by: rJTutorial Team | Last Updated:

HTML Images

In HTML, images are not technically inserted into a web page; instead, they are linked to the page using the <img> element. This creates a holding space for the referenced image file. To make your website visually engaging and accessible, you need to understand how to control these assets effectively.

Developer Tip: The <img> tag is an "empty element," meaning it contains attributes only and does not have a closing tag like </img>.

Here's a breakdown of the core concepts and how to use images in your projects:

  1. Image Source (src): The src attribute is the most critical part of the tag. It specifies the path (URL) to the image file. This can be a local path (e.g., images/logo.png) or a full external URL (e.g., https://example.com/photo.jpg).
    2. Watch Out: If you misspell the file name or have the wrong file path in the src attribute, the browser will display a "broken image" icon. Always double-check your directory structure!
  2. Alternative Text (alt): The alt attribute provides a text description of the image. This is essential for accessibility, as screen readers read this text to visually impaired users. It also helps with SEO (Search Engine Optimization) and appears on the screen if the image fails to load.
    3. Common Mistake: Using vague alt text like "image123.jpg" or "photo." Instead, be descriptive, such as "Golden Retriever playing in the park." If the image is purely decorative (like a background flourish), use an empty alt attribute: alt="".
  3. Width and Height: You can define the size of an image using width and height attributes (values are in pixels by default). Specifying these is a performance best practice because it allows the browser to reserve the correct amount of space for the image before it even downloads.
    4. Best Practice: Always include width and height attributes to prevent "Layout Shift." Without them, the page content might jump around as images pop into view, which creates a frustrating experience for users.
  4. Responsive Images: Modern web development requires images that look great on everything from tiny smartphones to 4K monitors. Use the srcset and sizes attributes to provide the browser with a list of different-sized versions of the same image. The browser will then intelligently download the smallest file possible that still looks crisp on the user's specific screen.
<!DOCTYPE html>
<html>
<head>
   <title>HTML Image Example</title>
   <style>
       /* Modern practice: ensure images don't overflow their containers */
       img { max-width: 100%; height: auto; }
   </style>
</head>
<body>
   <!-- 1. Basic Image: Standard way to display a graphic -->
   <h3>Basic Image</h3>
   <img src="sunset.jpg" alt="Orange sunset over the Pacific Ocean">

   <!-- 2. Image with Fixed Dimensions: Helps prevent layout jumping -->
   <h3>Fixed Dimensions</h3>
   <img src="profile-icon.png" alt="User Profile Placeholder" width="200" height="200">

   <!-- 3. Responsive Image: Best for performance across devices -->
   <h3>Responsive Example</h3>
   <img srcset="photo-small.jpg 480w, photo-medium.jpg 800w, photo-large.jpg 1200w"
        sizes="(max-width: 600px) 480px, 800px"
        src="photo-medium.jpg" 
        alt="A modern office workspace"
        loading="lazy">

   <!-- 4. Image as a Link: Common for logos or call-to-action buttons -->
   <h3>Clickable Image</h3>
   <a href="https://www.rjtutorials.com" target="_blank">
       <img src="home-button.png" alt="Navigate to Home Page">
   </a>
</body>
</html>

In this example:

  • The first <img> tag demonstrates the standard usage. We use a descriptive alt tag to help search engines and screen readers understand that the image is a sunset.
  • The second <img> tag uses explicit width and height. This is common for UI elements like avatars or icons where the size should remain consistent.
  • The third <img> tag uses srcset. This acts like a menu: the browser checks the user's screen resolution and picks the most appropriate file. We also added loading="lazy", which tells the browser to only download the image when the user scrolls near it, significantly improving page speed.
  • The fourth example shows how to wrap an image in an <a> (anchor) tag. This turns the entire image into a clickable link, a standard technique for site logos or navigation banners.
Developer Tip: For modern web development, consider using the .webp format. It provides superior compression and quality compared to older formats like JPEG and PNG, making your website load much faster.

To use these snippets in your own project, simply replace the src attribute values (like sunset.jpg) with the actual file paths or URLs where your images are stored. If you are just starting out, keep your image files in the same folder as your HTML file to make linking them as easy as possible.

Previous