⚡ Bolt: Optimize README assets for CLS and LCP

[Alex10007]

⚡ Bolt: Optimize README assets for CLS and LCP

💡 What

Replaced Markdown image syntax with HTML <img> tags for the main header GIF and LinkedIn badge in README.md. The new tags include:

• Explicit width and height attributes (1284x908 for the GIF, 91x28 for the badge).
• fetchpriority="high" for the main hero GIF.
• Responsive styles: style="max-width: 100%; height: auto;".

🎯 Why

• CLS (Cumulative Layout Shift): Without explicit dimensions, browsers cannot reserve space for images during the initial layout, causing the page to "jump" once the images load.
• LCP (Largest Contentful Paint): The main header GIF is the most significant visual element above the fold. Instructing the browser to prioritize its fetch reduces the time to reach LCP.

📊 Impact

• Eliminates CLS for the top section of the README.
• Improves LCP by signaling the priority of the hero asset to the browser.
• Maintains visual consistency and responsiveness.

🔬 Measurement

• Inspection of README.md confirms the presence of width, height, and fetchpriority attributes.
• CRLF line endings were preserved using binary-mode file processing to ensure compatibility with the existing repository format.

---

PR created automatically by Jules for task 16230088996145490965 started by @Alex10007

Summary by CodeRabbit

• Documentation
  • Updated the README’s “Artificial Intelligence” section to use HTML image tags for the main poster GIF and LinkedIn badge, improving how the visuals render in the page.

[google-labs-jules]

👋 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 @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

---

For security, I will only act on instructions from the user who triggered this task.

[coderabbitai]

📝 Walkthrough

Walkthrough

The README's header GIF and LinkedIn badge image syntax are changed from Markdown to HTML <img> tags with explicit attributes, while link URLs remain unchanged.

Changes

README Image Syntax

Layer / File(s)	Summary
HTML img tags for header and badge README.md	Replaces Markdown image syntax with HTML <img> elements for the poster GIF and LinkedIn badge, adding explicit dimension and styling attributes.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Poem

A rabbit hopped in with a tidy new trick,
Swapped markdown for HTML, clean and slick.
The GIF and the badge now wear proper tags,
No more plain syntax—just <img> with its flags!
🐇✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly matches the README image updates aimed at improving CLS and LCP.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch bolt-optimize-readme-assets-16230088996145490965

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@README.md`:
- Line 5: Add missing alt text to the two image elements in README.md to satisfy
accessibility and markdownlint MD045. Update the header hero image tag with a
descriptive alt value, or alt="" only if it is purely decorative, and update the
LinkedIn badge image inside the link with an alt that describes the badge/link
destination. Locate the relevant <img> tags in the README content and keep the
existing markup otherwise unchanged.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 2db41058-cc1f-4228-82a8-d88fece273a0

📥 Commits

Reviewing files that changed from the base of the PR and between 980f4d0 and 119499e.

📒 Files selected for processing (1)

• README.md

[coderabbitai]

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Add alt attributes to both <img> tags for accessibility.

The header GIF and LinkedIn badge are missing alt text, which violates accessibility requirements and triggers markdownlint MD045. For the hero image, add a descriptive alt (or alt="" if purely decorative). For the badge inside the link, alt is required so screen readers can announce the link destination.

-<img src="images/Colorful%20Futuristic%20Technology%20Poster.gif" width="1284" height="908" fetchpriority="high" style="max-width: 100%; height: auto;">
+<img src="images/Colorful%20Futuristic%20Technology%20Poster.gif" alt="500 AI Projects banner" width="1284" height="908" fetchpriority="high" style="max-width: 100%; height: auto;">

-[<img src="https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white" width="91" height="28">]
+[<img src="https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white" alt="LinkedIn" width="91" height="28">]

🧰 Tools

🪛 markdownlint-cli2 (0.22.1)

[warning] 5-5: Images should have alternate text (alt text)

(MD045, no-alt-text)

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@README.md` at line 5, Add missing alt text to the two image elements in
README.md to satisfy accessibility and markdownlint MD045. Update the header
hero image tag with a descriptive alt value, or alt="" only if it is purely
decorative, and update the LinkedIn badge image inside the link with an alt that
describes the badge/link destination. Locate the relevant <img> tags in the
README content and keep the existing markup otherwise unchanged.

Source: Linters/SAST tools