NextJS Image Optimization

[lorenz-reelist8]

🏷️ Discussion Type

Question

Body

How can I reduce LCP (Largest Contentful Paint) when using next/image with an SVG in Next.js?

Here’s my current implementation:

The image is an SVG and is displayed smaller using CSS, but it still seems to affect my LCP.

What is the best practice for handling SVGs in Next.js to improve LCP? Should I still use next/image, or switch to a regular or inline SVG?

Any suggestions on optimizing this would be appreciated.

Guidelines

• I have read and understood this category's guidelines before making this post.

[Uriah08]

To lower the LCP (Largest Contentful Paint) when using next/image with an SVG, you need to prioritize loading and reduce render delay.

Example:

What to improve:

1. Add priority

• This tells Next.js to preload the image
• Important if this image is above-the-fold (visible on first load)

2. Use correct sizing

• Your width/height is 1000 but you display it at ~200–330px
• Set more realistic dimensions to reduce layout cost:

width={330}
height={330}

3. Consider removing next/image for SVG

• SVGs are vector and don’t need optimization
• Using a normal or inline SVG is often faster:

OR inline it directly inside JSX for best performance

4. Avoid large CSS resizing

• You are shrinking 1000px → ~300px via CSS
• This can hurt LCP slightly
• Match intrinsic size to rendered size

5. Preload manually (optional)
   In :

Summary:

• Add priority
• Match actual display size
• Prefer or inline SVG instead of next/image for SVG files
• Avoid oversized dimensions

This should significantly improve your LCP score.