Serving WebP and AVIF Images from a Static HTML Template

WebP and AVIF through the native <picture> element is one of the highest-return optimisations you can make in 2025, and it requires zero build tooling once you understand the markup pattern. This guide shows you exactly how to do it inside a static HTML template, with real code you can copy into any project today.

Why Image Format Choice Has a Direct Impact on Core Web Vitals

Largest Contentful Paint (LCP) is almost always triggered by a hero image or a large product photograph. Google’s Core Web Vitals thresholds require LCP under 2.5 seconds for a “good” score. A 400 KB JPEG hero image can push you over that threshold on a mid-range mobile connection by itself. Converting the same image to AVIF often brings it under 120 KB; WebP typically lands at 180 to 220 KB. The difference shows up in both Lighthouse scores and real user metrics.

Static HTML templates are particularly sensitive to this because there is no server-side processing layer to intercept requests and transcode images on the fly. Every byte you serve is a byte you chose to serve. That makes the image authoring step a deliberate engineering decision, not an afterthought.

WebP vs AVIF: Which Format to Use and When

WebP was introduced by Google in 2010 and is supported in all major browsers including Safari since version 14 (released 2020). It supports lossy compression, lossless compression, transparency, and animation. For most projects, WebP is the safe choice: support is effectively universal and encoding tools are mature.

AVIF is derived from the AV1 video codec. It achieves roughly 20 to 50 percent smaller file sizes than WebP at the same perceived quality, and it supports wide colour gamut (HDR), alpha channels, and film grain encoding. Browser support as of 2025 covers Chrome 85+, Firefox 93+, and Safari 16+. The practical compression advantage over WebP is real, but encoding AVIF is significantly slower. That matters when you are batch-converting hundreds of product images in a build pipeline.

When to skip AVIF: if your audience skews toward older iOS devices (pre-iPhone 14 running iOS 15) or you operate in enterprise environments with locked-down browsers, use WebP as your primary modern format and treat AVIF as an optional top layer rather than a requirement.

The picture Element: Syntax You Can Use Today

The <picture> element is a container. It holds one or more <source> elements followed by a mandatory <img> fallback. Browsers evaluate <source> tags top-to-bottom and use the first one they support. The <img> tag is what non-supporting browsers, screen readers, and crawlers see.

A minimal format-switching example looks like this:

<picture>
  <source type="image/avif" srcset="hero.avif">
  <source type="image/webp" srcset="hero.webp">
  <img
    src="hero.jpg"
    alt="A team collaborating in a modern coworking space"
    width="1200"
    height="630"
    loading="eager"
  >
</picture>

AVIF is listed first because it is the preferred format. WebP is next. JPEG is the fallback. A browser that supports all three picks AVIF. A browser that supports only WebP skips the AVIF source and picks WebP. Internet Explorer (officially retired) falls through to the <img> JPEG.

Adding srcset and sizes for Responsive Images

Format switching alone only solves half the problem. A 1200 px wide AVIF served to a phone with a 390 px viewport is still wasteful. Combine srcset with sizes to give the browser width variants alongside format variants.

<picture>
  <source
    type="image/avif"
    srcset="
      hero-400.avif  400w,
      hero-800.avif  800w,
      hero-1200.avif 1200w
    "
    sizes="(max-width: 576px) 100vw, (max-width: 992px) 80vw, 1200px"
  >
  <source
    type="image/webp"
    srcset="
      hero-400.webp  400w,
      hero-800.webp  800w,
      hero-1200.webp 1200w
    "
    sizes="(max-width: 576px) 100vw, (max-width: 992px) 80vw, 1200px"
  >
  <img
    src="hero-1200.jpg"
    srcset="
      hero-400.jpg  400w,
      hero-800.jpg  800w,
      hero-1200.jpg 1200w
    "
    sizes="(max-width: 576px) 100vw, (max-width: 992px) 80vw, 1200px"
    alt="A team collaborating in a modern coworking space"
    width="1200"
    height="630"
    loading="eager"
  >
</picture>

The breakpoints above (576 px, 992 px) align with Bootstrap 5’s sm and lg breakpoints, making this pattern a natural fit inside any Bootstrap-based static template. If you are already trimming your Bootstrap bundle to reduce CSS payload, pairing that work with proper image sizing delivers compounding performance gains.

Generating WebP and AVIF Files from Your Source Images

Static templates do not generate image variants for you. You need to create the files before referencing them. The three most practical approaches are:

1. Squoosh CLI (free, no server required): npx @squoosh/cli --avif '{}' --webp '{}' images/*.jpg processes an entire folder. Squoosh is maintained by the Google Chrome team and produces good results with sensible defaults.
2. Sharp (Node.js library): Integrate into an existing Gulp or Vite workflow with sharp('input.jpg').avif({ quality: 65 }).toFile('output.avif'). Sharp uses libvips under the hood and is the fastest option for batch processing.
3. ImageMagick or libavif CLI: Suitable for CI/CD pipelines. avifenc --min 30 --max 50 input.jpg output.avif gives you direct control over encoder settings.

For quality settings, start at 75 to 80 for WebP and 60 to 70 for AVIF (on a 0 to 100 scale). That range gives a reasonable balance of visual quality and file size for photographic content. Always do a visual comparison before committing to a quality value in production.

Integrating the Pattern Into a Static HTML Template

Inside a Bootstrap 5 static template, images almost always sit inside a containing column with a maximum width defined by the grid. A hero image in a full-width Bootstrap row needs the 1200 px variant as its largest srcset entry. A card image inside a col-md-4 column rarely needs anything wider than 600 px. Matching your srcset entries to the actual rendered width is where the real savings come from.

If you are using lightbox functionality, such as the pattern covered in the guide to adding GLightbox to Bootstrap 5, point the href attribute on the anchor to the full-size JPEG or WebP. Let the lightbox serve the high-resolution version while the grid thumbnail uses the optimised responsive markup.

Always include explicit width and height attributes on the <img> fallback. Bootstrap 5’s img-fluid class sets max-width: 100% and height: auto, which works correctly alongside these attributes. The browser uses the declared dimensions to reserve space before the image loads, preventing layout shift without any JavaScript.

<!-- Bootstrap 5 card with responsive WebP/AVIF image -->
<div class="card border-0 shadow-sm">
  <picture>
    <source type="image/avif" srcset="card-thumb.avif">
    <source type="image/webp" srcset="card-thumb.webp">
    <img
      src="card-thumb.jpg"
      class="card-img-top img-fluid"
      alt="Project thumbnail"
      width="600"
      height="400"
      loading="lazy"
    >
  </picture>
  <div class="card-body">
    <h3 class="card-title h5">Project Title</h3>
  </div>
</div>

Use loading="eager" on above-the-fold images (hero, first section) and loading="lazy" on everything below. Native lazy loading is reliable in all modern browsers and requires no JavaScript library.

Looking for a production-ready Bootstrap 5 HTML template? Browse Canvas Template demos and find the perfect starting point for your next project.

If you’re building with the Canvas HTML Template and want to ship production-ready Bootstrap 5 layouts faster, try Canvas Builder free — the visual builder that exports clean Canvas-ready markup in minutes.