html - <img> with media query, how to get it work?

Question

Could someone help me out with following code (not working)

.image2{ display: none; } 
@media only screen and (max-width: 500px){ 
.image1{ display: none; } 
.image2{ display: block; } } 

<img src="images/slider/4.gif" class="image1" title="#slider-direction-1"/> 
<img src="images/slider/4_m.gif" class="image2" title="#slider-direction-1"/> 

Answer 1

Try this instead:

<picture>
    <source media="(max-width:500px)" srcset="images/slider/4_m.gif"> <!-- img2 (mobile) -->
    <img src="images/slider/4.gif"> <!--img1 -->
</picture>