Serve different images per screen size and cache possible?

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;
     }

}