fix: repair broken image urls in blog articles

[AhmadAnzar]

🔍 Description

• Replaced broken and outdated Wikimedia thumbnail URLs with robust Special:FilePath links to resolve 400 Bad Request errors.
• Added the xsmall image size option and applied it where needed for layout consistency.
• Minor title tweaks to keep layouts consistent.

✅ Checklist

Before requesting a review, please ensure that you have:

• Verified that the project builds and runs locally (npm run dev)
• Ensured no ESLint or TypeScript warnings/errors remain
• Updated documentation, comments, or in-code explanations where needed
• Verified responsiveness across devices (desktop, tablet, mobile)
• Followed the CONTRIBUTING.md guidelines

---

🎨 Visual Changes (if UI-related)

• High Res SVGs replacing broken thumbnail routing

---

📂 Type of Change

• 🐛 Bug fix (non-breaking change that fixes an issue)
• ✨ New feature (non-breaking change that adds functionality)
• 💥 Breaking change (fix or feature that would cause existing functionality to change)
• 📝 Documentation update
• ♻️ Refactor / code quality improvement
• 🎨 UI/UX enhancement
• 🔒 Security improvement

---

🧩 Additional Notes for Reviewers

• The previous implementation relied on hardcoded Wikimedia thumbnail dimensions in the URL string (e.g., .../640px-image.jpg). By migrating to the Special:FilePath/Image_Name.ext routing, we allow Wikimedia to handle the file delivery dynamically, ensuring the images load reliably

[mattqdev]

Thank you so much also for this fix!