Question 1

How do I configure next-img for custom breakpoints?

Accepted Answer

You can set custom breakpoints in the next.config.js plugin configuration or override them per image using query parameters. For example, in next.config.js, add breakpoints: [375, 768] to define global settings, or use ?sizes=100,400,800 in imports for specific sizes.

Question 2

next-img vs Next.js built-in image component: which is better?

Accepted Answer

next-img excels for static exports and build-time optimization without a CDN, while Next.js image component requires a server or external CDN for optimization. Choose next-img for fully static sites; use Next.js image for dynamic runtime resizing or if you're already using a CDN.

Question 3

Does next-img support lazy loading?

Accepted Answer

Yes, next-img forwards the loading='lazy' attribute to the img tag, enabling efficient lazy loading in modern browsers. You can add it as a prop to the Picture component, like <Picture src={image} loading='lazy' />.

Question 4

What image formats does next-img output?

Accepted Answer

next-img outputs WebP format by default with optimized JPEG or PNG fallbacks. It supports source images in JPEG and PNG, but not yet GIF or WebP as sources, as mentioned in the Ideas section for future updates.

Question 5

How to clear the cache in next-img?

Accepted Answer

Run npx next-img to rebuild the persistent cache and remove unused images. This command processes the resources directory, ensuring only necessary images are stored, which you can then commit to version control for faster builds.

Question 6

Is next-img compatible with Turbopack?

Accepted Answer

No, next-img is not compatible with Turbopack because it relies on webpack's emitFile API. For Next.js 16+, you must use webpack mode by running next dev --webpack or next build --webpack, as stated in the README's Turbopack Compatibility section.

Question 7

Can I use next-img without the Picture component?

Accepted Answer

Yes, the Picture component is optional. You can import images directly and handle the image object manually, allowing for custom HTML or integration with other components, as confirmed in the FAQ section of the README.

next-img

What is next-img?

Overview

Use Cases

Best For

Related Projects

Found a gem we're missing?

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions