Görsellere class / ID atayıp CSS ile mobilde farklı masaüstünde farklı yapabilirsiniz. Örneğin 1.görsel için class="birinci-resim" 2.görsel için class="ikinci-resim" ataması yapıp CSS dosyanıza:



.birinci-resim {
height: 300px!important;
}

.ikinci-resim {
height: 300px!important;
}

@media only screen and (max-width: 600px) {
.birinci-resim {
height: 300px!important;
}

.ikinci-resim {
height: 200px!important;
}
}


Böylece ikinci görseliniz masaüstünde 300px, mobilde 200 px olarak görünür. Bu arada yükseklik ve genişlik verirken px yerine % kullanmanızı tavsiye ederim. % değerler, sayfanın açıldığı cihazın ekranına göre otomatik boyutlanır. Örneğin resim için width: 100%; değeri verirseniz ben hangi cihazdan açarsam açayım o cihazın genişliği kadar görünür. Ama 300 px verirseniz ve ben 100px'lik alana sahip bir cihazdan açarsam görsel yine yarım görünür.