Как я могу заставить адаптивные изображения отправлять правильный размер файла для адаптивных изображений BootStrap?

Question

У меня есть замечательные адаптивные изображения Мэтта Уилкокса, работающие на моем сайте. Это работает так:

• Сервер доставляет изображение 800px.
• Adaptive-images перенаправляет изображение, которое не превышает ширину вашего разрешения

Проблема в том, что BootStrap отображает изображения в столбцах для рабочего стола и во всю ширину для планшета и мобильного телефона. С технической точки зрения, Adaptive должен предоставлять меньшие изображения для рабочего стола, чем меньшие области просмотра. Google PageSpeed ​​хлопает меня за это. У меня есть изображения размером 800px, уменьшенные до 150px или около того.

Я провел много исследований, но, похоже, не могу найти подходящее решение. Стоит ли взламывать адаптивные изображения, чтобы посмотреть на функцию, отличную от ширины разрешения, чтобы получить правильное изображение? Есть ли другая библиотека для решения этой проблемы?

Answer 1

Если вы используете корзину S3 для загрузки изображений, вы можете попробовать лямбда-выражения AWS для выполнения работы по изменению размера. Вы можете обратиться к статье ниже https://medium.com/@vinay.humberi/image-compression-and-optimisation-with-aws-lambda-deb766fac2fe

Или, если вы не хотите использовать сервисы Amazon, тогда доступно супер дешевое приложение saas под названием gumlethttps://www.gumlet.com/

Проверить это! надеюсь, это поможет вам.

Answer 2

Так как разрешение в файлах cookie устанавливается через JS, вы можете попытаться переопределить код, предоставленный на шаге 3 установки.

Куки должны иметь более высокий приоритет в соответствии с этим:

Он обрабатывает случаи, когда нет набора файлов cookie; мобильные устройства получат самое маленькое изображение, а настольные устройства получат самое большое

РЕДАКТИРОВАТЬ Также я рекомендую обратить внимание на тег, как он описан на странице проектов GitHub. Однако все еще есть проблемы с поддержкой браузером этих функций, надеюсь, они будут исправлены в ближайшем будущем.