html
/

HTML Images: Displaying Images in Web Pages

Last Sync: Today

On this page

14
0%
5 min read
Remaining
5 minleft

Click any section to jump — progress syncs automatically

html

HTML Images: Displaying Images in Web Pages

What are HTML Images?

HTML images allow you to display pictures, graphics, icons, and illustrations on web pages using the <img> tag. Images make websites more engaging, help explain concepts visually, and improve user experience.

Basic Syntax

Here's the simplest way to add an image to your webpage:

HTMLRead-only
1
<img src="image.jpg" alt="Description of image">

The browser reads this tag, fetches the image from the specified location, and displays it in your page.

Essential Image Attributes

AttributePurposeExampleRequired?
`src`Image source path (URL or file path)`src="images/photo.jpg"`✅ Yes
`alt`Alternative text for accessibility & broken images`alt="Sunset over mountains"`✅ Yes (recommended)
`width`Image width in pixels or percentage`width="300"`❌ No
`height`Image height in pixels`height="200"`❌ No
`title`Tooltip text shown on hover`title="Click to enlarge"`❌ No
`loading`Lazy loading strategy`loading="lazy"`❌ No

Complete Example

Here's a well-structured image tag with multiple attributes:

HTMLRead-only
1
<img 
  src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4" 
  alt="Mountain landscape with snow-capped peaks" 
  width="600" 
  height="400" 
  title="Beautiful Mountains" 
  loading="lazy"
>

Understanding Image Paths

The src attribute accepts two types of paths:

Path TypeExampleWhen to Use
**Absolute Path** (External URL)`https://example.com/images/cat.jpg`Images hosted on another website or CDN
**Relative Path** (Local file)`./images/cat.jpg` or `../assets/photo.png`Images stored in your own project folder
HTMLRead-only
1
<!-- Absolute path (external image) -->
<img src="https://via.placeholder.com/300" alt="Placeholder">

<!-- Relative path (local image in same folder) -->
<img src="logo.png" alt="Company Logo">

<!-- Relative path (image in subfolder) -->
<img src="images/banner.jpg" alt="Website Banner">

Supported Image Formats

FormatBest ForProsCons
**JPEG/JPG**Photographs, complex imagesSmall file size, millions of colorsNo transparency, loses quality when compressed
**PNG**Logos, icons, screenshotsLossless, supports transparencyLarger file size
**WebP**Modern websites (all types)Smaller than JPEG/PNG, supports transparencyOlder browser support (but 96%+ covered)
**SVG**Logos, icons, illustrationsScalable without quality loss, small sizeNot suitable for complex photos
**GIF**Simple animationsSupports animationLimited colors (256), large file size

Responsive Images (Mobile-Friendly)

Websites must look good on all devices — from smartphones to 4K monitors. Here's how to make images responsive:

HTMLRead-only
1
<img src="image.jpg" alt="Responsive image" style="max-width: 100%; height: auto;">

This ensures the image never exceeds its container's width while maintaining aspect ratio.

HTMLRead-only
1
<img 
  src="image-small.jpg" 
  srcset="image-small.jpg 480w, image-medium.jpg 800w, image-large.jpg 1200w"
  sizes="(max-width: 600px) 480px, (max-width: 1200px) 800px, 1200px"
  alt="Responsive mountain view"
>

The browser automatically picks the most appropriate image based on screen size and resolution.

Advanced: The Picture Element

Use <picture> when you need different crops or entirely different images for different screen sizes (e.g., mobile vs desktop layouts).

HTMLRead-only
1
<picture>
  <!-- Mobile: landscape crop -->
  <source media="(max-width: 600px)" srcset="landscape-mobile.jpg">
  
  <!-- Tablet: standard crop -->
  <source media="(max-width: 1200px)" srcset="landscape-tablet.jpg">
  
  <!-- Desktop: wide panoramic crop -->
  <img src="landscape-desktop.jpg" alt="Scenic landscape">
</picture>

Making Images Clickable (Image Links)

Wrap an <img> inside an <a> tag to turn it into a clickable link:

HTMLRead-only
1
<!-- Link to another webpage -->
<a href="https://example.com/product">
  <img src="product.jpg" alt="Our best-selling product">
</a>

<!-- Link to full-size image (lightbox effect) -->
<a href="high-res-image.jpg" target="_blank">
  <img src="thumbnail.jpg" alt="Click to view full size">
</a>

Image Optimization Best Practices

  • ✅ Always include alt text – Critical for accessibility (screen readers) and SEO. Describe the image's content or purpose.
  • ✅ Compress your images – Use tools like TinyPNG, Squoosh, or ImageOptim to reduce file size without visible quality loss.
  • ✅ Choose the right format – JPEG for photos, PNG for logos/transparency, WebP for everything modern.
  • ✅ Enable lazy loading – Add loading="lazy" to images below the fold to speed up initial page load.
  • ✅ Specify dimensions – Always set width and height to prevent layout shifts (Cumulative Layout Shift optimization).
  • ✅ Use responsive images – Serve smaller images on mobile devices to save bandwidth.

Common Mistakes to Avoid

  • ❌ Missing alt attribute – Screen reader users won't know what the image shows. Also hurts SEO.
  • ❌ Using huge unoptimized images – A 5MB image will make your page slow and frustrate mobile users.
  • ❌ Incorrect file paths – Double-check relative paths; ./images/photo.jpg is different from images/photo.jpg.
  • ❌ Scaling with width/height only – Downloading a 2000px image and displaying it at 200px wastes bandwidth. Use srcset instead.
  • ❌ Text inside images – Screen readers can't read text inside JPEGs. Use real HTML text whenever possible.
  • ❌ Forgetting to set dimensions – Causes layout shifts (CLS) and poor user experience.

Accessibility Tips

Making images accessible ensures everyone can understand your content, including people using screen readers:

  • Descriptive alt text – alt="Golden retriever playing in snow" not alt="dog".
  • Empty alt for decorative images – Use alt="" for purely visual images (backgrounds, spacers).
  • Longdesc for complex images – For charts or diagrams, provide a longer description nearby.
  • Good contrast – Ensure text overlaying images has sufficient contrast.

Real-World Example

Here's a complete, production-ready image implementation:

HTMLRead-only
1
<figure>
  <picture>
    <source media="(max-width: 600px)" srcset="product-mobile.webp" type="image/webp">
    <source srcset="product-desktop.webp" type="image/webp">
    <img 
      src="product-desktop.jpg" 
      alt="Ergonomic wireless mouse with USB-C charging"
      width="600"
      height="400"
      loading="lazy"
      decoding="async"
    >
  </picture>
  <figcaption>Our best-selling ergonomic mouse – now with USB-C</figcaption>
</figure>

This example includes modern formats (WebP with fallbacks), responsive sizing, accessibility, and performance optimizations.

Conclusion

Images bring your websites to life, but they must be implemented thoughtfully. By following these best practices — proper alt text, responsive techniques, format selection, and optimization — you'll create fast, accessible, and visually appealing web pages that work beautifully on any device.

Remember: A well-optimized image loads instantly and looks great. A poorly implemented image frustrates users and hurts your SEO. Choose wisely!

Try it yourself

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: Arial, sans-serif; padding: 20px; }
    img { border-radius: 8px; margin: 10px 0; }
    .container { max-width: 600px; margin: 0 auto; }
  </style>
</head>
<body>
  <div class="container">
    <h1>🖼️ Try HTML Images</h1>
    
    <!-- Basic image -->
    <img src="https://picsum.photos/id/1015/400/300" alt="Mountain landscape" width="400" height="300">
    
    <!-- Responsive image -->
    <img src="https://picsum.photos/id/104/400/300" alt="Lake view" style="max-width: 100%; height: auto;">
    
    <!-- Image as link -->
    <a href="https://picsum.photos/id/10/800/600" target="_blank">
      <img src="https://picsum.photos/id/10/400/300" alt="Click to enlarge">
    </a>
    
    <p>✨ Try editing the src, alt, width, or height attributes above!</p>
  </div>
</body>
</html>

Test Your Knowledge

Q1
of 5

Which HTML tag is used to display images?

A
<image>
B
<img>
C
<pic>
D
<src>
Q2
of 5

Which attribute specifies the image source (path or URL)?

A
alt
B
src
C
href
D
source
Q3
of 5

Which attribute is most important for accessibility and SEO?

A
title
B
alt
C
width
D
loading
Q4
of 5

What does loading="lazy" do?

A
Loads images slowly on purpose
B
Delays loading images until they're about to appear on screen
C
Prevents images from loading entirely
D
Loads all images at once but with lower quality
Q5
of 5

Which image format supports transparency and animation?

A
JPEG
B
PNG
C
GIF
D
WebP

Frequently Asked Questions

What is the difference between JPEG, PNG, and WebP?

JPEG is best for photos (small file size, no transparency). PNG supports transparency but has larger files. WebP is modern — smaller than both JPEG and PNG while supporting transparency, but older browsers may not support it (though 96%+ do).

Why is the alt attribute so important?

Alt text serves three purposes: 1) Accessibility — screen readers describe images to visually impaired users. 2) SEO — search engines understand image content. 3) Fallback — text appears when images fail to load.

What is lazy loading and when should I use it?

Lazy loading delays loading images until they're about to appear on screen. Use it for images below the fold (not visible when page first loads). Don't use it for above-the-fold images (hero images, logos) — they should load immediately.

How do I make images responsive on mobile devices?

Use style="max-width: 100%; height: auto;" for simple scaling, or srcset with multiple image sizes. For different crops (art direction), use the <picture> element with media queries.

What happens if I don't specify width and height?

The browser doesn't know how much space to reserve, causing layout shifts as images load (Cumulative Layout Shift). This hurts user experience and Google's Core Web Vitals ranking. Always specify dimensions!

Previous

html lists

Next

html audio

Related Content

Need help?

Explore our comprehensive docs or start a chat with our tech experts.