HTML Images In-Depth

Images make pages visually engaging. Understanding how to use them correctly matters for performance and accessibility.

Image Formats Compared

Format	Best For
JPG/JPEG	Photographs — small file size, slight quality loss
PNG	Logos, graphics, screenshots — supports transparency
WebP	Modern alternative — smaller than JPG/PNG with similar quality
SVG	Icons, logos — infinitely scalable vector format
GIF	Simple animations

Responsive Images

Use CSS max-width: 100% or the HTML srcset attribute to serve different image sizes for different screens.

Example

<!-- Basic image -->
<img src="photo.jpg" alt="Mountain landscape" width="600">

<!-- Responsive: always fits its container -->
<img src="photo.jpg" alt="Landscape" style="max-width: 100%; height: auto;">

<!-- srcset: serve different sizes to different screens -->
<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 400px, 800px"
  alt="Responsive photo">

HTML

Full Editor

Related Resources

HTML Reference

Complete tag & property list

HTML How-To Guides

Step-by-step practical guides

HTML Exercises

Practice what you've learned