Mahmood• 1,070
@MahmoodHashem
Posted
Hello there 👋. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
- You can use the
<picture>tag when you have different versions of the same image . Using the<picture>tag will help you to load the correct image for the user's device saving bandwidth and improving performance. You can read more about this here. Example:
<picture>
<source media="(max-width: 460px)" srcset="./images/image-product-mobile.jpg">
<img src="./images/image-product-desktop.jpg" alt="{your alt text goes here}">
</picture>
Explain:
- The
<picture>element is used to define a container for multiple sources of an image and its <source> elements specify different images for different media conditions. In this case, if the maximum width of the screen is 460 pixels, the image "image-product-mobile.jpg" will be displayed. Otherwise, the image "image-product-desktop.jpg" will be displayed.
Hope that's helpful!
Keep up the great work!
0
