Serve different images per screen size and cache possible?

Question

So my posts have a featured image. This image is large. 1920 x 1281. The max width is set to 960 so my image is 2x as large for retina screens. However this results in a ~200-300kb file. The images are responsive and work fine on mobile yet it is the same large image.

Ive read up on how I can serve different images to different screen sizes using pure php, but I was wondering how this would work if I cache my site? I'm guessing that it wouldn't as it would create a static page with one of the image sizes and use that for every screen size.

Is there a workaround that anyone knows of?

My only thought is to rather disable featured images and just code in the picture as a background property of a div with the dimensions I need and use media queries to serve up different image sizes. My css takes a mobile first approach and that's why this would work. But it would be tedious and I'd rather automate things a little more.

Any ideas?

Answer 1

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

}