8 min read
Building Type-Safe APIs with Nuxt 3 and Prisma
Learn how to build end-to-end type-safe APIs using Nuxt 3 server routes and Prisma ORM for a seamless developer experience.
Mbeah Essilfie 1.9K
Web DevelopmentTutorials
Optimizing Images for the Modern Web
Reduce page weight by 60% with modern image formats, responsive sizing, lazy loading, and CDN-based optimization strategies.
Mbeah Essilfie
June 1, 2026 at 06:03 AM
7 min read 2086 views
Images Are the Biggest Offenders
On average, images account for 50% of page weight. Optimizing them is the single highest-impact performance improvement you can make.
Modern Formats
| Format | Use Case | Size vs JPEG |
|---|---|---|
| WebP | General purpose | 25-35% smaller |
| AVIF | Photos, rich imagery | 40-50% smaller |
| SVG | Icons, illustrations | Infinitely scalable |
<picture>
<source srcset="hero.avif" type="image/avif" />
<source srcset="hero.webp" type="image/webp" />
<img src="hero.jpg" alt="Hero image" width="1200" height="600" />
</picture>
Responsive Images
Don't serve a 2400px image to a 375px phone:
<img
srcset="
hero-400.webp 400w,
hero-800.webp 800w,
hero-1200.webp 1200w,
hero-2400.webp 2400w
"
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 1200px"
src="hero-1200.webp"
alt="Descriptive alt text"
width="1200"
height="600"
loading="lazy"
decoding="async"
/>
With Nuxt Image
<template>
<NuxtImg
src="/images/hero.jpg"
width="1200"
height="600"
format="webp"
quality="80"
sizes="100vw md:50vw lg:1200px"
loading="lazy"
placeholder
/>
</template>
Nuxt Image automatically generates responsive sizes, converts formats, and adds blur-up placeholders. It's the easiest path to optimized images.
Lazy Loading Strategy
- Above the fold:
loading="eager"+ preload - Below the fold:
loading="lazy"+ blur placeholder - LCP image: Never lazy load! Preload it.
<!-- Preload the LCP image in your head -->
<link
rel="preload"
as="image"
href="/hero.avif"
type="image/avif"
fetchpriority="high"
/>
CDN Optimization
Most CDNs (Cloudflare, Vercel, Imgix) can transform images on the fly:
https://cdn.example.com/image.jpg?w=800&h=400&fit=cover&format=auto&quality=75
Benefits:
- Store one high-res original
- Serve optimized variants per device
- Auto-format detection (AVIF for Chrome, WebP for Safari)
Quick Checklist
- Use WebP/AVIF with JPEG fallback
- Set explicit width/height (prevents CLS)
- Serve responsive sizes
- Lazy load below-the-fold images
- Preload LCP image
- Use a CDN with auto-optimization
- Compress with quality 75-85 (imperceptible to humans)
CSSPerformance
Written by Mbeah Essilfie
Fullstack Software Developer
Read next
Mbeah Essilfie
10 min read
Mastering Tailwind CSS: From Utility Classes to Design Systems
Go beyond basic utility classes and learn how to build cohesive, maintainable design systems with Tailwind CSS.
Mbeah Essilfie 257
12 min read
The Complete Guide to Vue 3 Composables
Understand the power of Vue 3's Composition API through practical, real-world composable patterns that you can use today.
Mbeah Essilfie 990
