В настоящее время мы создаем веб-сайт для мобильных устройств. Поддерживаемые операционные системы и браузеры должны быть:
- Android 4.x (стандартный браузер, Google Chrome)
- iOS6 + (Safari, Google Chrome)
Чтобы также поддерживать дисплеи с высоким разрешением, мы оценили различные методы и библиотеки для автоматической замены изображений их подвесками с высоким разрешением:
Попытка 1: retina.js http://retinajs.com/
Первая попытка заключалась в использовании обычного тега <img> типа этого: <img src="foo.png"> и использования retina.js, чтобы он автоматически заменял атрибут src именем изображения сетчатки ([email protected]). Это работает, но имеет два недостатка: во-первых, это создаст нежелательные накладные расходы, потому что будут загружены как исходное, так и изображение сетчатки глаза, а во-вторых, если изображение сетчатки недоступно, это вызовет множество ошибок 404 в журнале сервера, что мы не хотим.
Попытка 2: picturefill.js https://github.com/scottjehl/picturefill
Этот фреймворк использует странную HTML-разметку на основе <span> элементов. Мне кажется, что автор попытался имитировать предложенный элемент <picture>, который (пока что) не является стандартом, см. http://picture.responsiveimages.org - мне не нравится такой подход из-за странной разметки. Для меня не имеет смысла семантически описывать изображения с промежутками.
Попытка 3. Заменить изображения с помощью свойства CSS background-image
Иногда я вижу, как люди используют медиа-запросы CSS для обнаружения дисплеев сетчатки, а затем устанавливают фоновое изображение в div (или подобном элементе) с изображением более высокого или низкого разрешения. Мне лично не нравится этот подход, потому что он полностью препятствует созданию семантически хорошей разметки à la <img src="foo.png">. Я не могу представить, как создать веб-сайт только с помощью div, а затем установить все изображения в качестве фоновых - это очень странно.
Попытка 4. Установить изображения с помощью CSS-свойства content: url (...)
Как предлагается здесь, Is Можно ли установить эквивалент атрибута src тега img в CSS? кажется возможным перезаписать атрибут src в тегах img через CSS, используя свойство content:url(). Вот план: мы устанавливаем теги img для каждого изображения с прозрачным пустым размером 1x1 png, указанным в его атрибуте src, например: <img id="img56456" src="transp_1x1.png" alt="img description">. Теперь это семантически нормально, а также применимо к валидатору W3C. Затем мы загружаем таблицу стилей CSS, которая устанавливает все изображения на веб-сайте с помощью Media Queries.
Пример:
#img56456{content:url(foo.png)}
@media (-webkit-min-device-pixel-ratio: 2){
#img56456{content:url([email protected])}
}
Теперь этот подход работает довольно хорошо:
- Без накладных расходов
- Сплошная разметка
- Работает на необходимых устройствах / браузерах
- SEO для изображений здесь не требуется
Теперь, может ли этот подход вызвать какие-либо побочные эффекты, о которых мы не думали? Я просто спрашиваю, потому что знаю, что это работает, но "кажется" странным устанавливать все изображения через CSS, и я также нашел этот комментарий к этому подходу на SO Можно ли установить эквивалент атрибута src тега img в CSS? :
«Стоит добавить, что даже в браузерах, поддерживающих назначение содержимого для img, он меняет свое поведение. Изображение начинает игнорировать атрибуты размера, а в Chrome / Safari оно теряет такие параметры контекстного меню, как« Сохранить изображение ». Это связано с тем, что присвоение content эффективно преобразует img из пустого замененного элемента во что-то вроде
<span><img></span>"
Могло ли это быть проблемой? (Я не заметил никаких проблем с размером, и контекстное меню не является обязательным)
<img srcset="normal.jpg, retina.jpg 2x" height="50" width="50">. Напомним, что в Chrome теперь есть встроенная поддержка элемента изображения и атрибута srcset. - person Deniz schedule 29.10.2014