Image Optimization in Vue with Unpic

Optimizing images is one of the most impactful ways to improve web performance. In Vue applications, large or improperly loaded images can slow down rendering, degrade the user experience, and hurt SEO. Thankfully, tools like Unpic make modern image optimization easy.

In this article, you'll learn how to use the @unpic/vue package to serve fast, responsive, lazy-loaded images in your Vue app with minimal effort.

Enjoy!

🤔 What is Unpic?

Unpic is a high-performance image component that works with various image CDNs and providers. It provides:

• Responsive image support via srcset
• Lazy loading by default
• Automatic format selection (e.g., WebP, AVIF)
• Compatibility with services like Cloudinary, Imgix, Vercel, Sanity, and more

With the @unpic/vue package, you can use this modern solution directly in your Vue 3 apps.

Performance tips:

• Use Unpic-compatible CDNs (like Vercel, Imgix, Cloudinary) for best results
• Always provide width and height to reserve space and avoid layout shifts
• Avoid using unoptimized third-party image URLs

🟢 How to use Unpic in Vue?

Start by installing the package:

npm install @unpic/vue

The UnpicImage component works similarly to a native <img>, but with powerful optimizations built-in.

<template>
  <UnpicImage
    src="https://images.unsplash.com/photo-1609943248669-8ec1e1ce6c35"
    width="800"
    height="600"
    alt="Beautiful landscape"
  />
</template>

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

Key Benefits:

• Automatically lazy loads
• Auto-generates srcset for responsiveness
• Serves WebP/AVIF when supported
• CDN-agnostic—just use the right URL

You can easily make images responsive using the layout prop:

<UnpicImage
  src="https://cdn.example.com/image.jpg"
  layout="constrained"
  width="1200"
  height="800"
  alt="Responsive image"
/>

Supported layout modes:

• constrained: Scales down but not up
• fixed: Fixed dimensions
• fullWidth: Stretches to container width

For cleaner reuse, you can create a custom wrapper:

<!-- components/OptimizedImage.vue -->
<template>
  <UnpicImage
    :src="src"
    :width="width"
    :height="height"
    :alt="alt"
    layout="constrained"
    class="rounded-lg"
  />
</template>

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

defineProps({
  src: String,
  alt: String,
  width: Number,
  height: Number
})
</script>

Use it like this:

<OptimizedImage
  src="https://cdn.example.com/hero.jpg"
  alt="Hero banner"
  width="1200"
  height="600"
/>

📖 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 😉

✅ Summary

The @unpic/vue package brings powerful, modern image optimization features to your Vue applications with minimal configuration. With built-in lazy loading, responsive support, and automatic format switching, it saves development time while improving performance across the board.

Take care and see you next time!

And happy coding as always 🖥️