Easily change images WITHOUT any CSS or JS

The picture element is awesome 🙂

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---


---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.


---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[brianmmdev]

I love how you called me out right up front, background & media query is exactly what I would have done. This is neat!

[snailedlt]

This is great! And it also lets you select images based on browser theme by adding:
media="(prefers-color-scheme: dark)"

[cortarelva]

I have this exact situation right now at work and im going to make use of the picture tag so fast it will make my lead dev`s head spin around

[triteraerlangga]

but... (min-width: 600px) still a CSS syntax...
hehe just kidding, you did a great job, Kevin! thanks for sharing new knowledge

[igordasunddas]

Your channel is still absolutely underrated! Thank you!

[BNakato]

I just did this challenge the other day and got the image working with messy media queries. Will try this method.

[soppilif]

omg... picture tag i had used in the past but somehow having forgotten it ever since. So nice to have those shorts to get reminded of useful things!!

[arnelGo-fjqc]

Wow! Short videos that instantly relieve my headache.

[universallyapplied]

you are crazy good at teaching CSS. Thankyou

[gautamjuyal]

frontend mentor has some of the best beginner friendly practice projects. Like if you've solved this challenge.

[BrendanMcGinley]

This is not only exactly what I need, it's a better version than I could have hoped for and what I'd been planning to use. Thank you!

[naimas]

You're literally the God of CSS, unlocking CSS abilities within the HTML tags itself 😭

[ekowanin]

I was contemplating which one to use, I was leaning towards the picture but now I’ve seen you use picture I feel so much better 🤣

[hashone]

Omg! - What a great tip! - Thank you for taking the time to share this with us. :)

[AJman]

This also works for image format fallbacks! Serve an AVIF image with Jpeg as a backup for older browsers.

[sudarrshang]

This is extremely semantic, fulfilling the purpose of semantic html usage.

[_ANDRZ_]

I like the way you explain each concept, pretty easy to follow 😃

[j]

It's wonderful to know this! Thank you!🤩

[arikiri_]

Omg I was literally working on this exact challenge! Thank you for the info!

[hianshul]

nice, this is the project i did few weeks back