perf: improve blog and homepage image performance (lazy-loading, responsive, docs) #264

[Shivampal157]

Summary

Improves image performance on the blog and homepage by adding lazy-loading, responsive sizing, and documentation for authors.

Closes #264

Changes

• Lazy-loading: Added loading="lazy" and decoding="async" to partner logos (partners page + homepage), event thumbnails, team member photos, project badge images, blog related-posts thumbnails, footer CC image, and blog content images (via JS for markdown-rendered images in .post_body).

• Responsive images: Blog content images (.post_body img) now use max-width: 100%, height: auto, and a small min-height to reduce layout shift when dimensions are unknown.

• Documentation: New "Authoring images (performance and accessibility)" section in CONTRIBUTING.md (alt text, recommended dimensions, optional WebP).

Acceptance criteria (from issue)

• Lazy-loading and explicit dimensions where applicable for better Lighthouse scores (e.g. "Defer offscreen images", "Image elements have explicit width and height").
• Responsive behavior for blog content images.
• No intentional visual regressions on desktop and mobile.

[review-notebook-app]

Check out this pull request on 

See visual diffs & provide feedback on Jupyter Notebooks.

---

Powered by ReviewNB

[Shivampal157]

Hi @xmnlab,

This PR now only addresses issue #264 (image performance). I rebased the branch on upstream/main so it has a single commit:

• Lazy-loading (loading="lazy", decoding="async") on blog, partners, home, events, team, projects, and footer images
• Responsive CSS for blog content images (max-width: 100%, height: auto)
• "Authoring images" section in CONTRIBUTING.md

Please review when you have time.

[Shivampal157]

@xmnlab plz review

[xmnlab]

@Shivampal157
I just added netlify here, could you please rebase your branch on top of the upstream main?
so I will be able to check the results on line
thanks

[Shivampal157]

Hi @xmnlab , I rebased this PR on top of the latest upstream/main and force-pushed. The PR head now matches the latest base (origin/main is included in the history). Could you please re-check?

[xmnlab]

@Shivampal157

it seems it is not updated yet:

This branch is out-of-date with the base branch
Merge the latest changes from main into this branch. This merge commit will be associated with xmnlab.

[netlify]

✅ Deploy Preview for opensciencelabsweb ready!

Name	Link
🔨 Latest commit	d3c033d
🔍 Latest deploy log	https://app.netlify.com/projects/opensciencelabsweb/deploys/69bccc1f0c9f15000871a45d
😎 Deploy Preview	https://deploy-preview-268--opensciencelabsweb.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[Shivampal157]

Hi @xmnlab, I rebased this branch on top of the latest upstream/main and force-pushed. Could you please re-check?

[xmnlab]

Thanks @Shivampal157
Appreciate it

[Shivampal157]

Thanks for the review and merge 🙌
Will keep contributing!