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.