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

Question

У меня есть Matt Willcox's great adaptive-images, работающий на моем сайте. Он работает следующим образом:

• Сервер обеспечивает изображение 800 пикселей.
• Адаптивные-изображения перенаправляет к изображению, которое не больше, чем ширина вашей резолюции

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

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

Answer 1

Как разрешение в печенье устанавливается с помощью JS, вы можете попытаться переопределить код, который предоставляется в installation step 3

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

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

EDIT Также рекомендую обратить внимание на тег, как это described on the projects github page Однако, есть еще problems с поддержкой браузера для этой функции, надеюсь, они будут установлены в ближайшее время