Optimize images for responsiveness and performance #114

Description:

Optimize all images across the project for improved performance and responsiveness. Use popular image optimization tools such as Squoosh, TinyPNG, or ImageOptim to reduce file sizes while maintaining visual quality. Implement responsive image loading using modern HTML elements like <picture> and the srcset attribute to serve appropriate image sizes for mobile, tablet, and desktop devices.

Requirements:

• Optimize all images to reduce file size without noticeable quality loss.
• Prepare multiple image resolutions (e.g., small, medium, large) suited for various screen sizes.
• Implement responsive image loading with <picture> and srcset.
• Include a fallback image format (e.g., JPEG or PNG) for browsers that do not support WebP.
• Use the loading="lazy" attribute where applicable, except Hero section, to improve performance.
• Verify that images display correctly across devices and maintain high visual fidelity.
• Test performance improvements using Lighthouse or similar tools.

Acceptance Criteria:

• Images load correctly on mobile, tablet, and desktop.
• Noticeable reduction in page load time and total image payload.
• Lighthouse performance score shows measurable improvement.
• No broken image links or layout shifts.
• Consistent styling and responsive behavior across all sections.