feat: replace article banner Image component to regular img html element

[calebephrem]

No description provided.

[vercel]

@calebephrem is attempting to deploy a commit to the aditya ojha's projects Team on Vercel.

A member of the Team first needs to authorize it.

[beetle-ai]

Summary by Beetle

This PR simplifies the article banner rendering by replacing Next.js's Image component with a standard HTML img element. This change removes the complexity of Next.js image optimization features (fill layout, unoptimized flag) in favor of a straightforward implementation using CSS for sizing and object-fit control.

📁 File Changes Summary (Consolidated across all commits):

File	Status	Changes	Description
app/articles/[slug]/ArticleClient.tsx	Modified	+2/-4	Replaced Next.js Image component with native HTML img element for article banner rendering. Removed fill prop, unoptimized conditional logic, and simplified styling to use w-full h-full object-cover classes instead of px-6 padding.

Total Changes: 1 file changed, +2 additions, -4 deletions

🎯 Key Changes:

• Component Simplification: Removed dependency on Next.js Image component for article banners, eliminating the need for image optimization configuration
• Styling Refactor: Changed from fill layout with px-6 padding to explicit w-full h-full dimensions with object-cover for consistent aspect ratio handling
• Conditional Logic Removal: Eliminated the unoptimized={article.banner.startsWith("http")} check, suggesting all banners will now be served without Next.js optimization
• Maintained Constraints: Preserved the maxHeight: "260px" constraint and rounded corners for consistent visual presentation

📊 Impact Assessment:

• Security: ✅ Neutral impact. Removing the Image component doesn't introduce security vulnerabilities. However, ensure that article.banner URLs are still validated and sanitized elsewhere in the codebase to prevent XSS attacks through malicious image sources.
• Performance: ⚠️ Potential regression. Next.js Image component provides automatic optimization (WebP/AVIF conversion, responsive sizing, lazy loading). Switching to native img means:
• Loss of automatic format optimization
• Loss of automatic responsive image generation
• Loss of built-in lazy loading (unless added manually)
• Potential increase in bandwidth usage for users
• Recommendation: Consider adding loading="lazy" attribute and evaluate if the performance trade-off is acceptable for your use case
• Maintainability: ✅ Improved. The code is now simpler and more straightforward:
• Fewer props to manage
• No conditional logic for external URLs
• Standard HTML/CSS approach is more universally understood
• Reduced dependency on Next.js-specific APIs
• However, the removal of px-6 padding changes the visual layout—ensure this is intentional
• Testing: ⚠️ Requires attention. Changes needed:
• Visual regression tests should verify the banner still renders correctly without padding
• Verify that object-cover behavior matches previous fill layout expectations
• Test with various image aspect ratios to ensure no layout breaks
• Confirm that external HTTP images still load correctly without the unoptimized flag
• Consider adding performance benchmarks to measure the impact of removing image optimization

⚙️ Settings

Severity Threshold: Medium — Balanced feedback — medium and high severity issues only. — Change in Settings
Custom Rules: Define your own review rules — Set Custom Rules
PR Summary: Configure PR summary — Change in Settings

📖 User Guide

• Once repos are connected, PR analysis is automatically enabled. You can disable analysis for this repo from beetleai.dev/analysis
• Comment @beetle on any PR to start analysis manually
• Comment @beetle stop to stop any ongoing analysis

---

Follow us: Beetle · X · LinkedIn

[beetle-ai]

✅ You're good to merge this PR! No issues found. Great job!

Settings

⚙️ Settings

Severity Threshold: Medium — Balanced feedback — medium and high severity issues only. — Change in Settings
Custom Rules: Define your own review rules — Set Custom Rules
PR Summary: Configure PR summary — Change in Settings

📖 User Guide

• Once repos are connected, PR analysis is automatically enabled. You can disable analysis for this repo from beetleai.dev/analysis
• Comment @beetle on any PR to start analysis manually
• Comment @beetle stop to stop any ongoing analysis

[devhub-bot]

Note

Linting checks passed successfully 🎉

All formatting and code quality checks are clean.

You're good to merge 🚀