Images Resources

Specifications & Documentation

Authoritative references for HTML image elements, responsive images, and image file formats.

• MDN: <img> — The Image Embed element Full reference for every <img> attribute including srcset, sizes, loading, fetchpriority, and browser compatibility tables.
• MDN: Responsive images Practical guide to srcset, sizes, and the <picture> element — covers both resolution switching and art direction.
• MDN: <picture> — The Picture element Reference for <picture> and its <source> children, including the type and media attributes used for format fallback and art direction.
• MDN: Image file type and format guide Detailed breakdown of every web image format — GIF, JPEG, PNG, WebP, AVIF, JPEG XL, SVG — with compression characteristics, transparency support, and use-case guidance.

Optimization Tools

Reduce image file sizes before serving them. Smaller images load faster and improve Core Web Vitals scores.

• Squoosh Browser-based tool from the Chrome team. Compress and convert images to WebP, AVIF, or other formats with a side-by-side quality comparison — no installation required.
• ImageOptim macOS app for losslessly compressing JPEG, PNG, and GIF files. Strips unnecessary metadata and runs multiple optimizers in one pass.
• Sharp High-performance Node.js image processing library. Used in build pipelines to resize, convert, and compress images to WebP/AVIF automatically during deployment.
• SVGO — SVG optimization internal For SVG/vector images, see the SVG section which covers SVGO and SVGOMG for stripping bloat from SVG exports.

Data & Browser Support

Check real-world adoption data and cross-browser compatibility before committing to a format.

• HTTP Archive Tracks how the web is built over time. Reports on image format adoption, average image weight by format, and the share of pages using responsive image techniques.
• Can I Use Browser support tables for WebP, AVIF, JPEG XL, APNG, loading="lazy", fetchpriority, and other image-related features. Filter by global usage thresholds.

Related Pages in This Course

Image delivery overlaps with several other areas covered in IWT.

• /media/svg/ — SVG & vector graphics internal When your graphic is a logo, icon, or diagram, SVG is usually the better choice — resolution-independent, CSS-styleable, and text-based.
• /http/ — HTTP headers, caching, and content negotiation internal How the Accept request header and Content-Type response header work, how Cache-Control keeps images cached efficiently, and how CDN caching works.
• /server-side/ — CDNs and dynamic image delivery internal Server-side image resizing, format negotiation via CDN edge workers, and on-the-fly WebP/AVIF conversion without a build step.
• Data URIs (URLs section) internal How to inline small images directly into HTML or CSS as data: URIs — trade-offs between eliminating a network request and increasing document size.
• Images Reference cheatsheet internal Quick lookup for format comparison, <img> attributes, <picture>/<source> syntax, and the format decision tree.