Responsive header_feature_image (optimized for mobile devices)?

[musicmichaelc]

I was wondering whether there is a way to make the header_feature_image display better on mobile devices. As of now, the image (which I sized to 2484x1280px as recommended in the documentation) displays well on a desktop computer, but on a mobile phone, I can only see a small cut out section of the image.

Would it be possible to create several different image sizes—so as to serve the most optimal sizes depending on the device? Or is there already a way to do this that I might have missed?

[sylhare]

I will look into it so that we can have multiple size of image for the header, or at least a better scaling on mobile.

[sylhare]

Then I'll try something either with one image or and array of images for the background image.
Maybe with something like:

<img srcset="
  examples/images/image-384.jpg 1x, 
  examples/images/image-768.jpg 2x
" alt="…">

and

.img {
  background-image: url(examples/images/image-384.jpg); 
}
@media 
  (-webkit-min-device-pixel-ratio: 2), 
  (min-resolution: 192dpi) { 
  .img {
    background-image: url(examples/images/image-768.jpg);
  }
}

[sylhare]

PR is here #333 , you can check it out 👍