I don't know how do cache handle this. But You can use different image as per screen size in anywhere you would, like below:

Assume you have 3 different screen size -

1. Tablet,
2. Wide Screen Mobile,
3. Small Screen Mobile

So, just add a background image to your desire location (i.e feature image) for all the screen size with , like so with different width and height -

/* Tablet Layout: 768px. */

@media only screen and (min-width: 768px) and (max-width: 991px) {

 #feature-img{
     background-image: url(images/image.png) no-repeat;
     background-size: cover;
     width: 200px;
     height: 200px;
 }

}

/* Mobile Layout: 320px. */

@media only screen and (max-width: 767px) {

 #feature-img{
     background-image: url(images/image.png) no-repeat;
     background-size: cover;
     width: 100px;
     height: 100px;
 }

}

/* Wide Mobile Layout: 480px. */

@media only screen and (min-width: 480px) and (max-width: 767px) {

 #feature-img{
     background-image: url(images/image.png) no-repeat;
     background-size: cover;
     width: 120px;
     height: 120px;
 }

}

I don't know how do cache handle this. But You can use different image as per screen size in anywhere you would, like below:

Assume you have 3 different screen sizes -

1. Tablet,
2. Wide Screen Mobile,
3. Small Screen Mobile

So, just add a background image to your desire location (i.e feature image) for all the screen size with , like so with different width and height -

/* Tablet Layout: 768px. */

@media only screen and (min-width: 768px) and (max-width: 991px) {

     #feature-img{
         background-image: url(images/image.png) no-repeat;
         background-size: cover;
         width: 200px;
         height: 200px;
     }
 
}



/* Mobile Layout: 320px.  */

@media only screen and (max-width: 767px) {

     #feature-img{
         background-image: url(images/image.png) no-repeat;
         background-size: cover;
         width: 100px;
         height: 100px;
     }

}


/* Wide Mobile Layout: 480px. */

@media only screen and (min-width: 480px) and (max-width: 767px) {

     #feature-img{
         background-image: url(images/image.png) no-repeat;
         background-size: cover;
         width: 120px;
         height: 120px;
     }

}