Image Performance & Inline SVG

HTML provides three attributes that tune image loading without any JavaScript. loading="lazy" defers the fetch until the image is close to the viewport. decoding="async" lets the browser decode the image off the main thread. fetchpriority="high" tells the browser to promote this image in the fetch queue, useful for the largest image on the page.

SVG is a special case: an SVG file brought in as inline markup becomes part of the DOM, so CSS can color its paths and JavaScript can animate them. The same SVG loaded via <img src="logo.svg"> is opaque, isolated from the page's styles, and treated just like a JPEG. Same file, two completely different capabilities.

The single biggest image performance mistake is putting loading="lazy" on the hero image. The browser discovers lazy images only when they are about to enter the viewport, which delays the fetch by the time it takes to parse and render everything above the fold. For the above-fold image, that delay hurts Largest Contentful Paint directly. Lazy loading is a win for images below the fold and a penalty for the one the user sees first.

Format choice quietly affects every page load. WebP images are typically 25-35% smaller than JPEG at equivalent quality. AVIF goes further but has older browser gaps. The <picture> element lets you offer the modern format to browsers that support it and fall back to JPEG for those that do not, without any JavaScript.

For the primary above-fold image, add fetchpriority="high" and omit loading. For every image below the fold, add loading="lazy". decoding="async" is safe to add to any image; it is a hint that lets the browser handle decode scheduling more flexibly. None of these attributes change what the image looks like, only when and how the browser fetches and processes it.

For format switching, use <picture> with <source> elements. List AVIF first, then WebP, then JPEG as the <img> fallback. The browser picks the first source whose type it supports: <source srcset="photo.avif" type="image/avif"> then <source srcset="photo.webp" type="image/webp"> then <img src="photo.jpg" alt="...">. You still need width, height, and alt on the <img> regardless of which format is served.

For inline SVG, paste the SVG markup directly into the HTML. Target shapes with CSS using class names or the SVG element selectors (circle, path, rect). If you only need the SVG as a static image and do not need to style it, <img src="icon.svg" alt="..."> is simpler and avoids bloating the HTML. The rule: use inline SVG when you need CSS or JS control, and <img> when you do not.