Product Card

Community feedback

• 

  P

  Abuzer Emre Osmanoğlu•190

  @aeosmanogluPosted about 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 using srcset, 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 one alt text, which improves both SEO and accessibility. It also means less CSS management with visibility classes like md:block and md: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 helpful

  0

  ---

  

  Umar Mubeen•80

  @UmarMubeeenPosted about 2 months ago

  hey @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