Design comparison
Solution retrospective
had tough time fixing the fixed width issue for image and text area.
Community feedback
- @aeosmanogluPosted 2 months ago
You've done a great job with the design! Managing the image transitions for mobile and desktop using two different
img
tags is a solid approach, but I have a few suggestions to make it even better:One more efficient and modern way to handle this is by using the
srcset
attribute. This allows the browser to automatically select the most appropriate image based on the screen size. With your current solution, you're loading both mobile and desktop images, but only one is visible at any given time. This can negatively impact page performance since you're downloading an extra image unnecessarily. By usingsrcset
, the browser will only load the image it needs, which boosts performance and keeps things running smoothly.Also, using a single
img
tag instead of two helps simplify the HTML and prevents potential accessibility issues. You only need to define onealt
text, which improves both SEO and accessibility. It also means less CSS management with visibility classes likemd:block
andmd:hidden
.In summary,
srcset
will be a more maintainable and performance-optimized solution in the long run. Your design is already looking great—this will just take it to the next level! 🌟<img src="./images/image-product-mobile.jpg" srcset="./images/image-product-mobile.jpg 375w, ./images/image-product-desktop.jpg 768w" sizes="(max-width: 768px) 375px, 768px" alt="Gabrielle Essence Eau De Perfume" class="object-cover w-full max-h-60 md:max-h-none">
Marked as helpful0@UmarMubeeenPosted 2 months agohey @aeosmanoglu. Thank you so much this useful information and help. as a beginner didn't even know this approach. i will apply this to my future challenges for sure. Please checkout my other challenges and provide your valuable feedback. it means a lot.
0
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