Skip to main content
Skip to video
Skip to article

How to swap images at mobile breakpoints with custom tags and attributes

Oxygen, tips

Learn how to swap images at different screen width using custom Picture Tags and Attributes. This can be used to serve different image sizes, formats etc. to different screen sizes or browser preferences. Good thing is, only one image is loaded in the browser per time thereby reducing enormous network payload.

E.g code

<source media = "(min-width:650px)" srcset = "img_one.jpg">
<source media = "(min-width:465px)" srcset = "img_two.jpg">
<img src = "img_three.jpg">

In the above code example, img_one.jpg will only show at a screen size above 650px, and img_two.jpg will show at a screen size above 465px but not beyond 650px. If any of these conditions are not met, then img_three.jpg will show.

See more details in video:

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how Design with Cracka is funded, why it matters, and how you can support us.
Join the Community
Join over 7000 learners and contributors on Design with Cracka community. Don't miss out on the conversations!
0 0 votes
Article Rating
Notify of
Inline Feedbacks
View all comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Would love your thoughts, please comment.x