CODEWITHSUNDEEP
htmlcss
rahul jadhav
rahul jadhav

Reputation: 51

How we can show different images for the mobile device and laptop device using image tag?

Here my requirement is to be displaying one image for mobile devices and another image for the laptop devices, am trying with image tag but it was not working for me.

I want showing different images for mobile and laptop devices using the html 's image tag?

Upvotes: 2

Views: 2550

Answers (2)

Bhavesh Ajani
Bhavesh Ajani

Reputation: 1261

html : <img src="img1.jpg" class="img1"> <img src="img2.jpg" class="img2">

css : `.img1 {display: block;} .img2 {display: none;}

@media only screen and (max-width: 768px) { .img1 { display: none; } .img2 { display: block; } } `

Upvotes: 0

Krzysiek Dr&#243;żdż
Krzysiek Dr&#243;żdż

Reputation: 426

Well, it's not entirely what you need, because it doesn't check the type of device, but only the size of it... But in the RWD world it's enough, I guess.

You can use srcset. So instead of giving only one image, you put more of them and the browser does all the work selecting which one to show:

Here's some example:

<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">

And the logic behind that is pretty smart, because the browser tries to find the image that fits the best.

You can read more on that subject:

Upvotes: 1

Related Questions