⚡ Bolt: Optimize images in Homepage FAQ section#50
Conversation
Replaced unoptimized <img> tags and background image with next/image in Section3 (FAQs) of Home8 layout. - Used <Image fill> for background image with lazy loading. - Used responsive <Image> for FAQ images with proper sizes and aspect ratio. - Verified images load via /_next/image using Playwright script. Co-authored-by: anyulled <100741+anyulled@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Summary of ChangesHello @anyulled, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request focuses on enhancing the performance of the homepage's FAQ section by optimizing image loading. By migrating from standard image handling to Next.js's built-in Highlights
Changelog
Activity
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
|
No actionable comments were generated in the recent review. 🎉 📝 WalkthroughWalkthroughReplaces CSS background-image and plain Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 1 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request effectively optimizes images in the homepage FAQ section by replacing standard <img> tags and CSS background images with the Next.js <Image> component. This is a great improvement for performance, enabling lazy loading and modern image formats. I've added a few suggestions to further enhance performance and accessibility: one regarding the quality prop on the background image, another to improve the alt text for the FAQ images, and a third to refine the sizes attribute for more accurate responsive image loading. Overall, great work on improving the site's performance!
| }} | ||
| > | ||
| <div className="event8-section-area sp1" style={{ position: "relative" }}> | ||
| <Image src="/assets/img/bg/header-bg20.png" alt="" fill style={{ objectFit: "cover", zIndex: -1 }} quality={80} /> |
There was a problem hiding this comment.
The quality prop is set to 80, which is higher than the Next.js default of 75. This will result in a larger image file. Since the goal of this PR is optimization, was this increase in quality intentional? If the default quality is acceptable, you could remove this prop to further reduce the image size.
| <img src="/assets/img/all-images/about/devbcn-1.webp" alt="DevBcn" /> | ||
| <Image | ||
| src="/assets/img/all-images/about/devbcn-1.webp" | ||
| alt="DevBcn" |
There was a problem hiding this comment.
For better accessibility, the alt text should be more descriptive. Instead of the generic "DevBcn", consider describing what is in the image, especially since it's associated with a specific FAQ question. For example, a more descriptive alt text could be "A speaker presenting on stage at the DevBcn conference". This helps users of screen readers understand the image's content. This feedback applies to all similar images in this component (devbcn2.webp, FaqsImage1.webp, FaqsImage0.webp).
| width={500} | ||
| height={300} | ||
| style={{ width: "100%", height: "auto", objectFit: "cover", borderRadius: "4px" }} | ||
| sizes="(max-width: 992px) 100vw, 40vw" |
There was a problem hiding this comment.
The sizes attribute value appears to be significantly overestimated for larger screens. On viewports wider than 992px, the image is within a col-lg-5 nested inside a col-lg-6, making its width roughly 21% of the viewport width (5/12 * 50%). The current 40vw will cause the browser to download a much larger image than necessary, which undermines the performance optimization. A more accurate value would be closer to (max-width: 991px) 90vw, 21vw. Please update this for all similar Image components in this file.
| sizes="(max-width: 992px) 100vw, 40vw" | |
| sizes="(max-width: 991px) 90vw, 21vw" |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
components/sections/home8/section3.tsx (1)
52-52:objectFit: "cover"has no visual effect when paired withheight: "auto"
object-fitonly clips/scales content when both dimensions of the image box are explicitly constrained. Withheight: "auto", the element always expands to the image's intrinsic aspect ratio (driven by the 500 × 300width/heightprops), so there is nothing to cover or clip — the property is dead CSS.♻️ Proposed cleanup for all four images
- style={{ width: "100%", height: "auto", objectFit: "cover", borderRadius: "4px" }} + style={{ width: "100%", height: "auto", borderRadius: "4px" }}Also applies to: 87-87, 133-133, 168-168
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@components/sections/home8/section3.tsx` at line 52, The inline style object on the JSX <img> elements (style={{ width: "100%", height: "auto", objectFit: "cover" }}) is ineffective because objectFit requires an explicit height; either remove objectFit or change the height from "auto" to an explicit/constrained value (e.g., a fixed px, responsive max-height, or use a wrapper with a set height and overflow hidden) so objectFit: "cover" can actually crop the image—apply the same fix to each of the four image occurrences that use this style.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@components/sections/home8/section3.tsx`:
- Around line 47-54: The sizes prop on the Image elements in
components/sections/home8/section3.tsx overestimates rendered width (~40vw) and
causes oversized srcset selection; update each Image's sizes (the four JSX
<Image> instances used for the content images) to reflect the actual rendered
width at lg — e.g. use "(max-width: 992px) 100vw, 20vw" (or an equivalent value
near 20vw) instead of "40vw" for all four Image components so Next.js will pick
appropriately sized sources.
- Line 49: The four img elements currently use the non‑descriptive attribute
alt="DevBcn"; update each img in components/sections/home8/section3.tsx to have
unique, meaningful alt text that describes the visual content or the FAQ topic
it accompanies (replace alt="DevBcn" in each image element with a specific
description such as "illustration of pricing FAQ", "illustration of schedule
FAQ", etc.), ensuring none are left as the generic event name or empty unless
truly decorative.
---
Nitpick comments:
In `@components/sections/home8/section3.tsx`:
- Line 52: The inline style object on the JSX <img> elements (style={{ width:
"100%", height: "auto", objectFit: "cover" }}) is ineffective because objectFit
requires an explicit height; either remove objectFit or change the height from
"auto" to an explicit/constrained value (e.g., a fixed px, responsive
max-height, or use a wrapper with a set height and overflow hidden) so
objectFit: "cover" can actually crop the image—apply the same fix to each of the
four image occurrences that use this style.
| <Image | ||
| src="/assets/img/all-images/about/devbcn-1.webp" | ||
| alt="DevBcn" | ||
| width={500} | ||
| height={300} | ||
| style={{ width: "100%", height: "auto", objectFit: "cover", borderRadius: "4px" }} | ||
| sizes="(max-width: 992px) 100vw, 40vw" | ||
| /> |
There was a problem hiding this comment.
sizes overestimates display width by ~2×, negating the optimization
These images sit inside col-lg-5 (≈41.7%) nested inside col-lg-6 (50%), so their actual rendered width at the lg breakpoint is:
5/12 × 6/12 × 960 px (Bootstrap lg container) ≈ 200 px ≈ 20 vw
The declared 40vw is roughly double the true size, which causes Next.js's srcset selection to fetch an image ~2× larger than necessary on desktop — directly undermining the performance goal of this PR.
🛠️ Proposed fix for `sizes` on all four content images
- sizes="(max-width: 992px) 100vw, 40vw"
+ sizes="(max-width: 992px) 100vw, 21vw"Apply to all four <Image> instances (lines 53, 88, 134, 169).
Also applies to: 82-89, 128-135, 163-170
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@components/sections/home8/section3.tsx` around lines 47 - 54, The sizes prop
on the Image elements in components/sections/home8/section3.tsx overestimates
rendered width (~40vw) and causes oversized srcset selection; update each
Image's sizes (the four JSX <Image> instances used for the content images) to
reflect the actual rendered width at lg — e.g. use "(max-width: 992px) 100vw,
20vw" (or an equivalent value near 20vw) instead of "40vw" for all four Image
components so Next.js will pick appropriately sized sources.
| <img src="/assets/img/all-images/about/devbcn-1.webp" alt="DevBcn" /> | ||
| <Image | ||
| src="/assets/img/all-images/about/devbcn-1.webp" | ||
| alt="DevBcn" |
There was a problem hiding this comment.
Non-descriptive alt="DevBcn" on all four content images
All four FAQ images share the same generic alt text. These images are informative (each accompanies a distinct FAQ topic), so each should have alt text that describes its visual content rather than repeating the event name. Empty alt="" would only be appropriate if the images were purely decorative. As-is, screen readers read "DevBcn" four times in a row without context.
♿ Example fix for each image
- alt="DevBcn" // line 49 — FAQ about the conference
+ alt="Barcelona Developers Conference venue and attendees"
- alt="DevBcn" // line 84 — FAQ about why to participate
+ alt="Attendees at a DevBcn session"
- alt="DevBcn" // line 130 — FAQ about tech tracks
+ alt="DevBcn speakers on stage"
- alt="DevBcn" // line 165 — FAQ about community & networking
+ alt="Networking event at DevBcn"Also applies to: 84-84, 130-130, 165-165
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@components/sections/home8/section3.tsx` at line 49, The four img elements
currently use the non‑descriptive attribute alt="DevBcn"; update each img in
components/sections/home8/section3.tsx to have unique, meaningful alt text that
describes the visual content or the FAQ topic it accompanies (replace
alt="DevBcn" in each image element with a specific description such as
"illustration of pricing FAQ", "illustration of schedule FAQ", etc.), ensuring
none are left as the generic event name or empty unless truly decorative.
The `home-editions.cy.ts` test was failing because it expected an `h5` tag for event details, which is no longer present in `section1.tsx`. The component uses `div` elements with class `hero8-header__event-line`.
This change removes the `cy.get("h5").should("have.length.at.least", 2)` assertion and relies on `cy.contains` to verify the presence of the venue and date text, which is more robust to markup changes.
Co-authored-by: anyulled <100741+anyulled@users.noreply.github.com>
1 participant
💡 What: Optimized images in the FAQ section of the Homepage (Home8 layout).
🎯 Why: The homepage was loading large unoptimized images using
<img>tags andbackground-imagestyle.📊 Impact: Images are now lazy-loaded and optimized by Next.js, reducing initial page load weight and improving LCP/FCP.
🔬 Measurement: Verified that image
srcattributes now point to/_next/imageusing a custom Playwright script.PR created automatically by Jules for task 11555456571338461021 started by @anyulled
Summary by CodeRabbit