0

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?

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

}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.