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?
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?
Share Improve this question edited Jun 15, 2020 at 8:21 CommunityBot 1 asked Nov 16, 2018 at 16:32 BensenBensen 112 bronze badges1 Answer
Reset to default 0I 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.