Serving a custom featured image for mobile

Question

is it a good approach to serve multiple featured images to have a proper scaling?

Right now the featured image size on "Desktop" is up to 1140x250. Pretty wide and will shrink way too far on "Mobile 1", until you can't really recognize the image anymore.

My idea was to just serve a second featured image for mobile phones up to like 500px. The size of this "Mobile 2" featured image would be something like 500x250.

Pro: Ability to serve different images on mobile/desktop and crop/scale ourselves.
Con: Every image needs to be uploaded and edited twice.

Is there a WordPress native way to do this I completely missed?

Answer 1

I would do this with Advanced Custom Fields and a Sass mixin:

@mixin image-2x($image, $width, $height) {
  @media (min--moz-device-pixel-ratio: 1.3),
         (-o-min-device-pixel-ratio: 2.6/2),
         (-webkit-min-device-pixel-ratio: 1.3),
         (min-device-pixel-ratio: 1.3),
         (min-resolution: 1.3dppx) {
    background-image: url($image);
    background-size: $width $height;
  }
}
//Usage
div.logo {
  background: url("logo.png") no-repeat;
  @include image-2x("logo2x.png", 100px, 25px);
}

Featured images or native custom fields could also be used instead of ACF. For an automatic solution that removes the need to upload multiple image versions you can use a retina plugin - WP Retina 2x.