Design comparison
Solution retrospective
Still learning the little quirks to dynamically switching image sources. And surprised how complicated it can get.
HTML with the srcset attribute:
<img class="bg-img" id="landing-bg-img" src="images/mobile/image-header.jpg" srcset="images/mobile/image-header.jpg 888w, images/desktop/image-header.jpg" alt="Background image" />
This is the way to go for accessibly. My gripe here is that you're ending up declaring twice (HTML & CSS) your breakpoints. I'm guessing that in most cases there will be a few different breakpoints but it just seems like most format decisions are made in CSS and that changing the src url should be the standard. Tell me why that's not the case? To further emphasize this, adding complexity like a grid format may lend itself to additional use of the size attribute. When doing that it formally ends up being written just like a media query in CSS.
CSS declaring the src:
<img class="bg-img" id="landing-bg-img" src="" alt="Background image" />
Again already likely a part of your CSS.
` #landing-bg-img { content: url(../images/mobile/image-header.jpg); }
@media (min-width: 888px) { #landing-bg-img { content: url(../images/desktop/image-header.jpg); } }
`
To me just the most common sense approach.
Continued development
I used the term gripe cause this could vary a lot in use cases and further in using the picture element correctly as well.
` <picture class="landing__bg-img"> <source srcset="images/mobile/image-header.jpg"> <source media="(min-width: 888px)" srcset="images/desktop/image-header.jpg"> <img class="bg-img" id="landing-bg-img" src="" alt="Background imgage" /> </picture>
`
For now I'll leave this mess and maybe revisit when I understand this on a deeper level.
Community feedback
- @sahand-masolehPosted over 2 years ago
Mate your solution is bang on placement-wise, must've been a lot of work and pain.
I'm not sure if I understand what you said. I guess you're talking about having multiple sources of truth for breakpoints, correct? If so, yeah it's a bit annoying. But for larger applications which have a build phase you can programmatically inject values into your HTML and CSS so this won't be a problem.
And as for the CSS code you posted, you actually got me thinking. I have never seen defining images in the content property of an actual non-pseudo element. This is definitely not standard and I'm struggling to find examples of it on the internet. But in general, images that have meaning should be in the HTML, decorative images should be in the CSS. I will definitely research more.
Edit: Thinking about it more, this way you're trading one problem for another. You're annoyed by having to define breakpoints in multiple places with srcset, but by doing what you suggested you're defining images in multiple places.
Edit2: Oh you're no defining any image in the HTML at all, I thought you meant just defining alternate resolutions in CSS. So yeah, back to my first point, contextual images should be in the HTML. I think a lot of tools won't even see your CSS images this way.
Marked as helpful0@neenrevaPosted over 2 years ago@sahand-masoleh I guess in this case it's debatable whether or not the images have meaning or are placeholder/background. That said, I wouldn't argue too much in favor of the css determining the image source. It just feels right. In the end, accessibility has to be the first consideration, right? lol
Thanks for your comment.
0
Please log in to post a comment
Log in with GitHub
Join 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