Oliver's Notesblog.mrakovics.com

Next.js Blog Posts - Building with Next.js

Optimize CMS Images in Next.js with getImageProps

Next.js

When you render content from a CMS like WordPress, the images might arrive as bare <img src="..." alt="..."> tags - no srcset, no lazy loading, no WebP. Next.js cannot touch them automatically because they live inside a raw HTML string, not a React component tree. This post shows how to use Next.js's getImageProps to inject proper srcset, WebP conversion, lazy loading, and responsive sizing into every image before it ever reaches the browser.

Optimize CMS Images in Next.js with getImageProps