Responsive Images for Better Web Performance

#vue #nuxt #performance #tutorial

Images are often the largest assets on a website—and one of the most common performance bottlenecks. Serving the same large image to every device, regardless of screen size or resolution, leads to wasted bandwidth, slower load times, and poor user experience.

This problem becomes even more visible in modern frameworks like Vue and Nuxt, where performance, SEO, and Core Web Vitals matter more than ever.

In this article, we’ll explore:

Why non-responsive images are a performance problem
How responsive images work on the web
How to implement responsive images in plain HTML
How to optimize images in Nuxt using unpic-vue and Nuxt Image

Enjoy!

🤔 What’s the Problem With Non-Responsive Images?

When you serve a single static image like this:

<img src="/hero.jpg" alt="Hero image" />

Every user downloads the same file, whether they are:

on a mobile phone
on a tablet
on a high-resolution desktop display

This leads to several issues:

❌ Mobile users download unnecessarily large images
❌ Slower page load and Time to Interactive
❌ Worse Core Web Vitals (especially LCP)
❌ Higher data usage and costs for users
❌ Poor SEO performance

Modern websites need images that adapt to the device, not the other way around.

🟢 How Responsive Images Work on the Web

Responsive images allow the browser to decide which image variant to download based on:

viewport size
device pixel ratio
layout constraints

This is achieved using:

srcset
sizes
<picture> element
modern image formats (WebP, AVIF)

Example:

<img
  src="image-800.jpg"
  srcset="
    image-400.jpg 400w,
    image-800.jpg 800w,
    image-1600.jpg 1600w
  "
  sizes="(max-width: 600px) 90vw, 800px"
  alt="Responsive example"
/>

The browser automatically selects the best possible image for the current device.

🟢 Using unpic-vue for Responsive Images in Vue

unpic-vue provides a framework-agnostic way to generate optimized, responsive images with a clean API.

Example:

<script setup>
import { Image } from '@unpic/vue'
</script>

<template>
  <Image
    src="https://your-website.com/image.jpeg"
    alt="Amazing Product Image"
    width="800"
    height="600"
    layout="constrained"
  />
</template>

What you get:

automatic srcset
responsive sizing
modern image formats
lazy loading by default

This is a great choice when you want provider-agnostic image optimization in Vue but also other frameworks like React, Angular, Svelte and more.

🟢 Optimizing Images in Nuxt with Nuxt Image

Nuxt offers a first-class solution via Nuxt Image, designed specifically for SSR and performance.

Example using <NuxtImg>:

<template>
  <NuxtImg
    src="/hero.jpg"
    width="1200"
    sizes="(max-width: 768px) 100vw, 1200px"
    format="webp"
    alt="Hero image"
  />
</template>

Nuxt Image automatically:

generates responsive variants
serves modern formats
integrates with CDNs
optimizes for SSR and hydration

It supports providers like:

static
IPX
Cloudinary
ImageKit
and more

For Nuxt applications, this is usually the best default choice.

📖 Learn more

If you would like to learn more about Vue, Nuxt, JavaScript or other useful technologies, checkout VueSchool by clicking this link or by clicking the image below:

It covers most important concepts while building modern Vue or Nuxt applications that can help you in your daily work or side projects 😉

🧪 Advance skills

A certification boosts your skills, builds credibility, and opens doors to new opportunities. Whether you're advancing your career or switching paths, it's a smart step toward success.

Check out Certificates.dev by clicking this link or by clicking the image below: