Fix: image rendering issue on GSoC 2025 blog post (#441)

[Narendra9793]

---

name: Pull Request
about: Submit changes to the project for review and inclusion

Description

This pull request fixes the image rendering issue on the GSoC 2025 blog post.
Previously, .png images were being rendered directly, which caused slower load times and larger file sizes.
The fix ensures that PNG images are automatically converted and served as .webp for better performance.

Related Issue

Fixes #441

Changes Made

• Added logic to detect .png images and render them as .webp.
• Updated the blog post rendering component to use the optimized image format.
• Added fallback to the original PNG in case the WebP format is not supported.

Testing Performed

• Verified that images in the GSoC 2025 blog post now render as WebP.
• Confirmed that fallback to PNG works when WebP is not available.
• Tested locally on Chrome and Firefox, both showed correct rendering.

Checklist

• I have tested these changes locally and they work as expected.
• I have added/updated tests that prove the effectiveness of these changes.
• I have updated the documentation to reflect these changes, if applicable.
• I have followed the project's coding style guidelines.

Additional Notes for Reviewers

Please confirm that this solution aligns with the team’s preferred image optimization approach.
If required, I can extend the logic to handle .jpg images as well.

---

[github-actions]

❌ Checks Failed

Status: 🚫 Not ready to merge

Please fix the following issues before merging:

📝 Code Linting Failed

Issue: Code formatting or style violations detected.

Specific problems:

• Code formatting issues detected

How to fix:

Platform	Command	Description
🐧 Unix/macOS/Linux	npm run format	Auto-fix all formatting issues
🪟 Windows	npm run format:file <filename>	Fix specific files
🔍 Check Only	npm run format:check	Check formatting without fixing

Need help with linting? Check out the Linting Guide for Windows Users for detailed instructions.

---

🛠️ Next Steps

1. Fix the issues mentioned above
2. Test locally to ensure everything works
3. Push your fixes to this branch
4. Wait for re-check - This bot will automatically run again

🤖 This comment will be updated automatically when you push new commits

[github-actions]

🎉 All Checks Passed!

Status: ✅ Ready to merge

✅ Completed Workflows

Workflow	Status	Details
🔨 Continuous Integration	✅ Passed	Build completed successfully
📝 Code Linting	✅ Passed	All formatting and style checks passed

---

🚀 This PR is ready for review and can be safely merged to main branch!

Great work! Your code meets all quality standards. 👏

[sa-fw-an]

There is no need to change the tsx files. All you need to do is change the particular .md file under src/constants/MarkdownFiles/posts. Always push only the changed files and package-lock.json is not one of em :)