Это проблема с турболинками.По умолчанию в турболинках XMLHttpRequest отправляются только заголовки «text / html, application / xhtml + xml», но вы можете отправить заголовок «image / webp», захватив событие start-start следующим образом:
document.addEventListener("turbolinks:request-start", function(event) {
var xhr = event.data.xhr
xhr.setRequestHeader("Accept", "image/webp")
})
Вопрос в том, как узнать из javascript, принимает ли браузер изображения webp для отправки заголовка «image / webp» на сервер.
Вы можете использовать библиотеку Modernize или пользовательскую функцию, котораяугадайте, доступен ли webp при попытке декодировать небольшое изображение webp, как описано здесь: https://developers.google.com/speed/webp/faq. Однако эти решения добавляют определенные накладные расходы, которые исключают преимущество быстрого времени загрузки изображений webp.
Возможно, наиболее эффективным решением является создание логического файла cookie на стороне сервера для хранения информации о том, принимаются ли изображения webp.Файл cookie сохраняется при первом вызове GET браузера на сервер.При последующих вызовах turbolinks вы можете проверить этот файл cookie в своем коде JavaScript:
document.addEventListener("turbolinks:request-start", function(event) {
browserAcceptsWebp = document.cookie.includes('webp_available=true');
if (browserAcceptsWebp) {
var xhr = event.data.xhr;
xhr.setRequestHeader("Accept", "image/webp");
}
});