Next.js Image Optimization Cache Not Working
Next.js Image component caching isn't working properly. Updated images still show old versions, or image optimization isn't triggered when source images change. Users see stale content.
Image caching issues occur when cache headers aren't properly configured, image paths change unexpectedly, or Vercel's Image Optimization API cache isn't invalidated.
Error Messages You Might See
Common Causes
- Using query parameters in image URLs without stable naming (changing URLs prevent caching)
- Cache-Control headers set to no-cache or very short expiry for optimized images
- Image filename/path changes but URL remains same, serving stale cached version
- Dynamic image URLs (different URL for same image) preventing cache hit
- Vercel Image Optimization cache not automatically invalidating on deployment
How to Fix It
Use stable URLs: Keep image URLs consistent. If image content changes, include hash in filename: avatar-abc123.jpg
Configure cache headers: In next.config.js, set long cache for optimized images:headers: async () => [{ source: '/assets/**', headers: [{ key: 'Cache-Control', value: 'public, max-age=31536000, immutable' }] }]
Use Image version parameter: In development, append query string: <Image src={url + '?v=' + Date.now()} /> to bust cache.
Deploy to invalidate: Vercel automatically invalidates image cache on new deployment.
Real developers can help you.
Anthony Akpan
Developer with 8 years of experience building softwares fro startups
prajwalfullstack
Hi Im a full stack developer, a vibe coded MVP to Market ready product, I'm here to help
Tejas Chokhawala
Full-stack engineer with 5 years experience building production web apps using React, Next.js and TypeScript.
Focused on performance, clean architecture and shipping fast.
Experienced with Supabase/Postgres backends, Stripe billing, and building AI-assisted developer tools.
Omar Faruk
As a Product Engineer at Klasio, I contributed to end-to-end product development, focusing on scalability, performance, and user experience.
My work spanned building and refining core features, developing dynamic website templates, integrating secure and reliable payment gateways, and optimizing the overall system architecture.
I played a key role in creating a scalable and maintainable platform to support educators and learners globally.
I'm enthusiastic about embracing new challenges and making meaningful contributions.
Meïr Ankri
Full-stack developer specializing in React / Next.js / Node.js with 6+ years of experience. I've worked across various sectors including automotive (Reezocar/Société Générale), healthcare (Medical Link SaaS), and e-commerce (Glasman). I build web apps end-to-end, from architecture to production, with a focus on scalability, performance, and code quality. I also mentor junior developers and contribute to technical decisions and code reviews.
Sage Fulcher
Hey I'm Sage! Im a Boston area software engineer who grew up in South Florida. Ive worked at a ton of cool places like a telehealth kidney care startup that took part in a billion dollar merger (Cricket health/Interwell health), a boutique design agency where I got to work on a ton of exciting startups including a photography education app, a collegiate Esports league and more (Philosophie), a data analytics as a service startup in Cambridge (MA) as well as at Phillips and MIT Lincoln Lab where I designed and developed novel network security visualizations and analytics. I've been writing code and furiously devoted to using computers to make people’s lives easier for about 17 years. My degree is in making computers make pretty lights and sounds. Outside of work I love hip hop, the Celtics, professional wrestling, magic the gathering, photography, drumming, and guitars (both making and playing them)
Alvin Voo
I’ve watched the tech landscape evolve over the last decade—from the structured days of Java Server Pages to the current "wild west" of Agentic-driven development. While AI can "vibe" a frontend into existence, I specialize in the architecture that keeps it from collapsing.
My expertise lies in the critical backend infrastructure: the parts that must be fast, secure, and scalable. I thrive on high-pressure environments, such as when I had only three weeks to architect and launch an Ethereum redemption system with minimal prior crypto knowledge, turning it into a major revenue stream.
What I bring to your project:
Forensic Debugging: I don't just "patch" bugs; I use tools like Datadog and Explain Analyzers to map out bottlenecks and resolve root causes—like significantly reducing memory usage by optimizing complex DB joins.
Full-Stack Context: Deep experience in Node.js and React, ensuring backends play perfectly with mobile and web teams.
Sanity in the Age of AI: I bridge the gap between "best practices" and modern speed, ensuring your project isn't just built fast, but built to last.
Daniel Vázquez
Software Engineer with over 10 years of experience on Startups, Government, big tech industry & consulting.
BurnHavoc
Been around fixing other peoples code for 20 years.
Luca Liberati
I work on monoliths and microservices, backends and frontends, manage K8s clusters and love to design apps architecture
You don't need to be technical. Just describe what's wrong and a verified developer will handle the rest.
Get HelpFrequently Asked Questions
How long should images be cached?
For static images: max-age=1 year (31536000 seconds). For dynamic avatars: max-age=1 day or use version query param.
Why is my updated image still showing old version?
URL is cached. Change filename or add ?v=timestamp to force cache bust. Next.js Image caches based on URL.
Does Vercel Image Optimization cost extra?
Free tier: 1000 optimizations/month. Paid: $0.15 per 10,000 additional. Caching reduces cost.