chore(frontend): add unoptimized flag to images #81
Conversation
WalkthroughThis pull request updates multiple Hero components across the frontend by adding the Changes
Possibly related PRs
Suggested reviewers
Poem
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
✅ Deploy Preview for kleros-website-v2 ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🔭 Outside diff range comments (1)
frontend/src/components/BrandAssets/Hero.tsx (1)
30-37: 💡 Verification agent🧩 Analysis chain
Verify performance impact of disabling image optimization.
The
unoptimizedprop disables Next.js's automatic image optimization. For background images, this might be intentional, but we should verify:
- The rationale behind disabling optimization
- Whether this impacts Core Web Vitals (LCP)
🌐 Web query:
What are the implications of using unoptimized prop in Next.js Image component?💡 Result:
Using the
unoptimizedprop in Next.js Image component bypasses key optimization features with several implications:Core Functionality Changes
- Disables automatic compression/resizing: Images retain original file size and dimensions[3][10]
- No format conversion: Modern formats like WebP/AVIF won't be generated[3][8]
- Bypasses Vercel's CDN cache: Serves images directly from source without edge caching[3]
Performance Trade-offs
- Increased bandwidth usage: Uncompressed images consume more data (e.g., 603kb vs optimized 80kb)[1]
- Slower LCP metrics: Large images take longer to load critical content[2][5]
- Potential layout shifts: Loses automatic CLS prevention features[4][6]
Appropriate Use Cases
Use
unoptimizedonly when:<Image src="/logo.svg" unoptimized width={100} height={50} alt="SVG logo" />
- Serving vector graphics (SVG)[3][9]
- Animated images (GIF)[3][10]
- Tiny assets <10KB (icons/thumbnails)[3]
- Dynamic content requiring fresh updates[3]
Configuration Options
Set globally via
next.config.js:module.exports = { images: { unoptimized: true // Disables for all images } }This overrides individual component props[10]. Teams using external CDNs like ImageKit would configure this while setting up custom loaders[2].
Key Considerations
- SEO impact: Unoptimized images may hurt page speed rankings[2][5]
- Accessibility loss: Manual handling required for lazy loading/CLS prevention[4][6]
- Cost implications: External image services might charge more for origin traffic[3]
For most production use cases, keep
unoptimized={false}(default) to leverage Next.js' automatic optimizations[1][4][8]. Reserve this prop only for special scenarios where optimization provides no tangible benefits[3][9].Citations:
- 1: https://prismic.io/blog/nextjs-image-component-optimization
- 2: https://imagekit.io/blog/nextjs-image-optimization/
- 3: https://vercel.com/docs/image-optimization
- 4: https://nextjs.org/learn/seo/images
- 5: https://global.moneyforward-dev.jp/2024/04/22/image-optimization-in-next-js/
- 6: https://uploadcare.com/blog/image-optimization-in-nextjs/
- 7: https://www.habilelabs.io/blog/next-js-automatic-image-optimization-with-next-image-component
- 8: https://www.contentful.com/blog/nextjs-image-component/
- 9: https://www.dhiwise.com/post/nextjs-image-the-ultimate-solution-for-optimized-web-images
- 10: https://nextjs.org/docs/pages/api-reference/components/image
Performance impact of disabling optimization on this above-the-fold background image should be carefully considered.
Based on the gathered information, using the
unoptimizedprop means that the Next.js Image component will bypass automatic compression, resizing, and format conversion. For a full-screen, priority background image, this could lead to:
- Increased bandwidth usage if the original image file is large.
- Slower LCP (Largest Contentful Paint) metrics due to the image not being resized or compressed.
- A loss of automatic optimizations that help prevent layout shifts (CLS) and improve SEO.
It’s important to verify that the background image file is either already optimized manually or small enough to mitigate these potential issues. If the intention is to use a fallback for images that don’t benefit from Next.js’ optimization (e.g., SVGs or very small assets), please ensure that these conditions are documented.
🧹 Nitpick comments (1)
frontend/src/components/ForBuilders/Hero.tsx (1)
30-37: Consider documenting the image optimization strategy.The consistent use of
unoptimizedfor hero background images across components suggests an intentional optimization strategy. Consider:
- Documenting this pattern in your frontend guidelines
- Creating a wrapper component like
HeroBackgroundthat encapsulates this behavior- Adding comments explaining why background images are left unoptimized
This will help maintain consistency and clarify the optimization strategy for future developers.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
frontend/src/app/for-lawyers/components/Hero.tsx(1 hunks)frontend/src/app/home/components/Hero.tsx(1 hunks)frontend/src/components/BrandAssets/Hero.tsx(1 hunks)frontend/src/components/Community/hero.tsx(1 hunks)frontend/src/components/Cooperative/hero.tsx(1 hunks)frontend/src/components/Earn/Hero.tsx(1 hunks)frontend/src/components/ForBuilders/Hero.tsx(1 hunks)frontend/src/components/PNKToken/Hero.tsx(1 hunks)frontend/src/components/ResearchDevelopment/Hero.tsx(1 hunks)
✅ Files skipped from review due to trivial changes (4)
- frontend/src/components/Earn/Hero.tsx
- frontend/src/components/Community/hero.tsx
- frontend/src/app/for-lawyers/components/Hero.tsx
- frontend/src/components/PNKToken/Hero.tsx
🔇 Additional comments (4)
frontend/src/components/Cooperative/hero.tsx (1)
41-48: LGTM - Maintains consistency with other Hero components.The addition of the
unoptimizedprop is consistent with the pattern applied across other Hero components.frontend/src/components/ResearchDevelopment/Hero.tsx (1)
47-54: LGTM - Consistent with the established pattern.The addition of the
unoptimizedprop maintains consistency with other Hero components.frontend/src/components/ForBuilders/Hero.tsx (1)
45-52: LGTM - Good selective application of optimization.The
unoptimizedprop is correctly applied only to the background image while keeping the LinkArrow image optimized. This selective approach demonstrates good judgment in optimization strategy.frontend/src/app/home/components/Hero.tsx (1)
52-59: Consider performance implications of disabling image optimization.Adding the
unoptimizedprop disables Next.js automatic image optimization, which could impact performance, especially for background images that need to adapt to different viewport sizes.Let's check the current Next.js documentation for image optimization best practices:
✅ Verification successful
🌐 Web query:
When should the unoptimized prop be used in Next.js Image component?💡 Result:
The
unoptimizedprop in Next.js' Image component should be used in these key scenarios:For specific image types
- Animated images (GIF/APNG/WebP) where optimization would break animation[1][3]
- SVG vector graphics since they scale losslessly[1][4]
- Images <1KB where optimization provides negligible benefits[1][3]
When optimization isn't beneficial
- Pre-optimized content from image CDNs like Imgix or Cloudinary[3][10]
- Frequently changing images where caching causes stale content[3]
- Testing/development environments to reduce build times[2]
Cost control measures
- Reducing Vercel's Image Optimization usage costs by minimizing unique source images[2][3]
- When using third-party CDNs that handle optimization separately[2][5]
Implementation methods
- Per-image basis:
<Image src="/logo.svg" unoptimized width={100} height={100} alt="Logo" />
- Global configuration in
next.config.js:module.exports = { images: { unoptimized: true } }Key considerations
- Animated images are auto-detected but explicit
unoptimizedis recommended[1]- SVG requires either
unoptimizedordangerouslyAllowSVGconfig[1][4]- Disabling optimization affects Core Web Vitals metrics - use only when necessary[8]
- Combines with
contentDispositionTypefor SVG security[1]For most production sites, reserve
unoptimizedfor special cases while letting Next.js handle optimization for standard JPEG/PNG/WebP images.[3][7]Citations:
- 1: https://nextjs.org/docs/pages/api-reference/components/image-legacy
- 2: https://vercel.com/docs/image-optimization/managing-image-optimization-costs
- 3: https://vercel.com/docs/image-optimization
- 4: https://nextjs.org/docs/pages/api-reference/components/image
- 5: https://community.prismic.io/t/custom-next-js-image-loader-problem-with-prismic-image-optimization-for-svg/10281
- 6: https://www.fullstackfoundations.com/blog/nextjs-image-component-tutorial
- 7: https://nextjs.org/docs/pages/building-your-application/optimizing/images
- 8: https://global.moneyforward-dev.jp/2024/04/22/image-optimization-in-next-js/
- 9: [Image] Loader config is ignored when using the unoptimized prop vercel/next.js#50764
- 10: https://prismic.io/blog/nextjs-image-component-optimization
Performance Impact: Validate Use of
unoptimizedFlagThe current change correctly adds the
unoptimizedprop to the background image; however, please ensure that this usage is justified. Disabling Next.js image optimization can lead to larger image sizes and slower loads if the image isn’t already optimized or served by an external CDN. Review the scenarios from Next.js documentation and confirm that the background image meets one of the recommended conditions (such as being pre-optimized or belonging to a specific image type).
- File:
frontend/src/app/home/components/Hero.tsx(Lines 52–59)- Action: Assess if the background image is pre-optimized or if an external service is used to optimize it. If not, consider alternative approaches that leverage Next.js image optimization.
Summary by CodeRabbit