Использование webp для конвейера изображений и рельсов

Question

Я использую Modernizr, чтобы определить, поддерживается ли webp, и затем решить, показывать ли изображение webp или изображение jpg. Мой код прекрасно работает в разработке, но в производстве жестко закодированные пути недопустимы, так как мне нужен какой-то способ обработки изменения имени образа конвейера ресурсов рельсов.

Мой HTML:

    <div class="col-sm-4">
      <a data-jpg1="assets/landing/screenshots/1.jpg" data-webp1="assets/landing/screenshots/1.webp" class="thumb preview-thumb image-popup" href="" id="landing_screenshot1_thumb" >
        <img data-jpg="assets/landing/screenshots/1.jpg" data-webp="assets/landing/screenshots/1.webp" id="landing_screenshot1" alt="Screenshot 1" class="thumb-img">
      </a>
    </div>

Мой Javascript (успешно определяет, поддерживает ли браузер webp или нет и отображает соответствующий тип):

Modernizr.on('webp', function (result) {
  // `result == Modernizr.webp`
  var img  = document.getElementById('landing_screenshot1')
  var img2 = document.getElementById('landing_screenshot1_thumb')
  console.log(result);  // either `true` or `false`
  if (result) {
    // Has WebP support
    var a =1
    img.src   = img.getAttribute('data-webp')
    img2.href = img2.getAttribute('data-webp1')
  }
  else {
    // No WebP support
    var b=2
    img.src = img.getAttribute('data-jpg')
    img2.href = img2.getAttribute('data-jpg1')
  }
});    

Это способ обработки других изображений на странице для конвейера:

.bg-one {
  background-image: url(image-path('image1.jpg'));
}

Но я не могу разобраться, как справиться с подходом конвейера активов и с подходом webp / jpg.