Оптимизация изображений сайта для Retina Display

Question

Я пытался найти хороший подход для решения очень распространенной проблемы в эпоху сетчатки.

Допустим, дано следующее:

• Создать сайт с адаптивными изображениями
• Нет CSS фоновых изображений
• Основной функционал сайтов должен работать без JS
• Изображения на сайтах должны быть оптимизированы для отображения на сетчатке.

Простой способ решить это может быть что-то вроде этого:

<img src="img.jpg" data-highres="[e-mail]" />

и напишите какой-нибудь js, чтобы поменять img.jpg с [e-mail], если устройство сетчатки обнаружено. Это будет работать, но если я зайду на сайт на устройстве с сетчаткой, загрузятся и img.jpg, и [e-mail]. Не очень дружелюбный к пропускной способности:(

Можно ли как-то перехватить и изменить src изображения перед загрузкой исходного src?

Или у кого-нибудь из вас есть другой подход к решению проблемы?

Answer 1

В будущем вы можете использовать элемент изображения. В то же время, единственный подход, который я видел, может работать:

1. Поместите div или span, где вы хотите изображение. Стиль это, чтобы иметь размеры и расположение изображения. Добавьте к нему какой-нибудь идентификационный знак, чтобы вы могли его найти (например, class="retina-image")
2. Храните информацию о различных размерах изображений на вашем элементе или в нем (например, используя data-something атрибуты)
3. Положить <noscript><img src="..." alt="..."></script> внутри див
4. На DOM готов:
   1. используйте JS, чтобы найти все элементы с идентификатором из шага 1
   2. определить тип изображения, которое вы хотите
   3. найдите атрибут, который говорит вам, какой URL использовать для этого изображения
   4. добавьте изображение в DOM внутри контейнера с шага 1

Это подход, используемый библиотекой picturefill.

Answer 2

Вероятно, это будет пламенная приманка, но вот мои два цента:

Забота о пропускной способности - это в основном проблема мобильной платформы. Учитывая, что большинство современных мобильных платформ в настоящее время используют дисплеи с высокой плотностью пикселей, спрос на изображения с высоким разрешением с этих устройств будет довольно высоким. Зачем в 3 раза превышать разрешение изображения в 90% случаев (изображение с низким и высоким разрешением), если можно в 2 раза увеличить разрешение сервера в 100% случаев?

Следовательно, в некоторых сценариях может быть проще просто подавать изображения с более высоким разрешением (вдвое уменьшая их стили ширины / высоты) и оставить это в таком положении - тем самым экономя (дорогое) время и энергию в других местах. В отрасли, где все кажется компромиссом, иногда это имеет смысл как подход.

Answer 3

Я думаю, что Квентин по существу ответил на ваш вопрос.

Что я могу добавить, так это то, что хотя элемент img без src технически не соответствует спецификациям, его отсутствие не нарушит ваш код и позволит избежать предварительной загрузки. Тогда вы можете просто иметь <img data-src="" data-src2=""> и меняйте изображения в / из JavaScript. <noscript> Элемент, вероятно, является "правильным" способом сделать это, но он делает код действительно многословным, и я слышал, что некоторые браузеры будут предварительно загружаться <noscript> изображения также.

Pixtulate- один из сервисов, с которыми я сталкиваюсь и которые делают изображения отзывчивыми (включая дисплеи Retina). Они также предоставляют JavaScript для правильного определения размера и замены URL-адреса img.src до завершения загрузки страницы. Должно быть довольно просто заскочить.

Answer 4

Если вы делаете что-то с window.devicePixelRatio и перебирать изображения, которые имеют data-highres приписывать.

Это довольно грубо, но вы меня поняли.

 $(document).ready(function() {
     if (window.devicePixelRatio > 1) {
         // retina
     } else {
         // default
     }
 });

Используйте пустой / прозрачный 1px GIF

<img src="clear.gif" data-basesrc="img1" />

Тогда используйте basesrc приписать и добавить соответствующее имя файла в вашем JS.