Design comparison
SolutionDesign
Community feedback
- @Mohamedkabba444Posted 2 months ago
Great job on completing this project! Your coding skills and attention to detail are impressive.
One suggestion I have is to consider using the <picture> element and <source> tags for images, especially when providing multiple image sizes for different screen sizes. This approach allows for:
- Better image optimization
- Improved performance
- Enhanced responsiveness
For example:
<picture> <source srcset="image-small.jpg" media="(max-width: 768px)"> <source srcset="image-medium.jpg" media="(max-width: 1200px)"> <img src="image-large.jpg" alt="Image description"> </picture>This technique ensures that the browser loads the most suitable image size based on the user's screen size, reducing unnecessary downloads and improving page load times.
Keep up the fantastic work, and looking forward to seeing more projects from you!
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord