âš¡IntermediatePerformance and Loading
Image Optimization in HTML
Maximize image performance with fetchpriority, decoding, WebP/AVIF, aspect-ratio, and object-fit.
Overview
Beyond srcset, sizes, and lazy loading, several more HTML attributes and CSS properties further optimize image performance and visual quality:
HTML attributes:
- fetchpriority="high": signals the LCP image to the browser for early fetching
- decoding="async": decodes the image off the main thread to prevent blocking rendering
- elementtiming: marks the image for PerformanceObserver reporting
CSS properties for images:
- aspect-ratio: prevents layout shift without knowing image dimensions
- object-fit: controls how images fill their container
- content-visibility: skips rendering off-screen content
Key Points
- •fetchpriority="high" on the LCP image tells browser it's the most important image
- •fetchpriority="low" on below-fold or decorative images de-prioritizes them
- •decoding="async" browser decodes image off main thread, prevents UI jank
- •CSS aspect-ratio: 16/9 reserves space without hard-coding pixel dimensions
- •object-fit: cover/contain controls how images fill containers without distortion
- •AVIF offers ~50% smaller files than WebP for the same quality use with <picture> fallback
Examples
Hero image with fetchpriority
<!-- LCP image: high priority + eager + explicit dimensions -->
<img
src="hero.webp"
alt="Mountain landscape at sunrise"
width="1200"
height="600"
loading="eager"
fetchpriority="high"
decoding="sync"
>
<!-- Non-critical illustration: low priority -->
<img
src="decorative.webp"
alt=""
width="400"
height="300"
loading="lazy"
fetchpriority="low"
decoding="async"
>AVIF with WebP and JPEG fallback
<picture>
<!-- AVIF: smallest file, modern browsers only -->
<source srcset="photo.avif" type="image/avif">
<!-- WebP: broad modern browser support -->
<source srcset="photo.webp" type="image/webp">
<!-- JPEG: universal fallback -->
<img src="photo.jpg" alt="Mountain lake" width="800" height="450">
</picture>Browser picks the first format it supports. AVIF saves ~50% vs JPEG.
CSS aspect-ratio and object-fit
<style>
/* Reserve 16:9 space before image loads prevents CLS */
.card-image {
aspect-ratio: 16 / 9;
width: 100%;
overflow: hidden;
}
/* Image fills container, cropping to fit */
.card-image img {
width: 100%;
height: 100%;
object-fit: cover; /* cover: fills without distortion */
object-position: center; /* align crop position */
}
</style>
<div class="card-image">
<img src="product.jpg" alt="Product photo" loading="lazy" decoding="async">
</div>aspect-ratio + object-fit together give precise container control without hard-coding pixel heights.
Common Mistakes
- Using fetchpriority="high" on all images it loses meaning when everything is high priority
- Setting object-fit: cover without overflow: hidden on the parent image overflows
- Providing AVIF without JPEG fallback AVIF is not supported in IE or older browsers
Note
For the LCP image: combine fetchpriority="high" + loading="eager" + preload link in <head>. This three-pronged approach achieves near-optimal LCP scores.
Exercises
Write HTML to solve each exercise. Use Preview to see it render in a live iframe, then mark as done.
Loading editor…
Completed: 0 / 5 exercises
Knowledge Check
Question 1 of 4