Skip to main content

Image Attributes in HTML

While the <img> tag is simple, its attributes are powerful. They are the settings you use to define not just what the image is, but how it behaves, how it loads, and how accessible it is.

Mastering these attributes is crucial for creating fast, compliant, and user-friendly web pages.


1. Required Attributes: src and alt​

These two attributes are the absolute minimum for a valid and functional image element.

The src Attribute (Source)​

The src attribute (Source) specifies the file path or URL of the image you want to display. The browser cannot display the image without this attribute.

  • Value: A relative path (e.g., ../images/photo.jpg) or an absolute URL (e.g., https://example.com/images/photo.jpg).

The alt Attribute (Alternative Text)​

The alt attribute is essential for accessibility and error handling. It provides a brief, descriptive replacement for the image.

  • Purpose:
    • Accessibility: Screen readers vocalize this text for users with visual impairments.
    • Fallback: It displays this text if the image file fails to load (due to slow network or broken link).
    • SEO: Search engines use alt text to understand the image content.
Best Practice

The alt text should describe the content and function of the image, not just what it is (e.g., "Company logo linking to homepage," not just "Company logo").

2. Critical Performance Attributes​

These attributes are essential for optimizing your site's speed and preventing visual instability.

The width and height Attributes​

The width and height attributes define the image's dimensions in pixels.

  • Value: Numeric pixel values (e.g., width="400").
Modern Performance Rule

Always specify the width and height directly in the HTML. By setting these dimensions, the browser knows exactly how much space to reserve for the image before the image file downloads. This prevents the content below the image from jumping around as the image loads, a common issue known as Cumulative Layout Shift (CLS).

Example Combining Core and Sizing Attributes​

index.html
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Dog_Breeds.jpg/800px-Dog_Breeds.jpg" 
     alt="A cute dog sitting in a field" 
     width="400" 
     height="300" 
/>
http://.../index.html

  A cute dog sitting in a field

3. Advanced and Optional Attributes​

These attributes offer more control over user experience, loading behavior, and display information.

The loading Attribute​

The loading attribute controls when the browser starts fetching the image resource. This is a major factor in page load speed.

ValueDescriptionWhen to Use
eager(Default) Load the image immediately, regardless of where it is on the page.Use for images that are above the fold (immediately visible upon loading).
lazyWait to load the image until it is close to (or in) the user's viewport.Use for images that are below the fold (require scrolling to see).
<img src="/assets/large-footer-image.jpg" alt="Photo of our office team" loading="lazy" width="800" height="600">

The title Attribute​

The title attribute provides supplementary information that is displayed as a tooltip when the user hovers the mouse over the image.

  • Usage Tip: Use title only for non-essential context. Never put important information in title that should be in the alt attribute.
<img src="icon.png" alt="Search icon" title="Click to start a new search">

The srcset Attribute (Responsive Images)​

The srcset attribute is essential for modern web design. It allows you to provide the browser with a list of different image files at different sizes.

The browser then intelligently chooses the most appropriate image based on the user's screen size, resolution, and pixel density. This saves bandwidth and speeds up the page for mobile users.

<img 
    src="/img/small-dog.jpg" 
    alt="A dog sitting in a field" 
    width="400" 
    height="300"
    srcset="/img/small-dog.jpg 400w, /img/large-dog.jpg 800w" 
/>

Explanation: This tells the browser: "If the viewport needs an image width up to 400 pixels, use small-dog.jpg; if it needs an image width up to 800 pixels, use large-dog.jpg."

4. Image Attributes Summary Table​

AttributeCategoryPurposeMandatory?
srcCoreSpecifies the file path of the image.Yes
altCore/AccessibilityProvides descriptive text for screen readers and errors.Yes
widthPerformance/LayoutSets the image width in pixels.Highly Recommended
heightPerformance/LayoutSets the image height in pixels.Highly Recommended
loadingPerformanceControls when the image file starts downloading (lazy or eager).Recommended
titleOptionalDisplays a tooltip on mouse hover.No
srcsetResponsiveProvides a set of different image files for the browser to choose from.Recommended for large images

Understanding and correctly applying these attributes is fundamental to being a responsible web developer. By focusing on alt for accessibility and width/height/loading for performance, you ensure your images are powerful assets, not site slowdowns.