Design comparison
Solution retrospective
I welcome any constructive feedback. This is my first time using .webp images, just trying it out. Is my way of changing the images using <picture> tag correct?
Thank you in advance.
Community feedback
- @afrusselPosted 12 months ago
Hi @hadreemustaffa
Your code appears to use the
<picture>
element correctly for responsive images by utilizing<source>
tags with different media queries to provide different image sources based on screen sizes. However, without specific details about the problem you're facing, it's challenging to pinpoint the issue accurately.Here are a few general pointers to check:
-
File Paths: Verify that the paths to your images are correct (
src
andsrcset
attributes). Ensure the images are in the specified locations relative to your HTML file. -
Media Queries: Double-check your media queries in
<source>
tags to confirm they match the intended screen sizes. This ensures the correct image is loaded based on the device's resolution. -
Fallback
<img>
Tag: Confirm that the<img>
tag inside each<picture>
element provides a default image (src
) for browsers that don't support the<picture>
tag or media queries.
If images are not displaying as expected, check your browser's developer tools for any console errors or warnings that might provide insights into the issue.
By addressing these points, you might identify and resolve the problem with your
<picture>
tags. If you have specific errors or unexpected behaviors, providing that information would help in giving more precise assistance.Marked as helpful1@hadreemustaffaPosted 12 months ago@afrussel
I faced no issues with the images. I was wondering whether I did it correctly or not as I'm still a beginner, so your feedback is much appreciated.
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