С новым Apple MacBook Pro с дисплеем Retina, если вы разместите на своем веб-сайте «стандартное» изображение, оно будет немного нечетким. Итак, вы должны предоставить изображение сетчатки.
Есть ли способ автоматически переключаться на @2x
изображения, как это делает iOS (с Objective-C)? Я обнаружил: CSS для изображений с высоким разрешением на мобильных устройствах и дисплеях Retina , но я хотел бы найти автоматический процесс для всех моих изображений без CSS или JavaScript .
Является ли это возможным?
ОБНОВЛЕНИЕ
Я хотел бы выделить эту интересную статью, предложенную @Paul D. Waite, и интересную дискуссию об этом, связанную с Себастьяном .
html
image
retina-display
янв267
источник
источник
Ответы:
Для тега img появился новый атрибут, который позволяет добавлять атрибут src retina, а именно srcset. Никакого javascript или CSS, никакой двойной загрузки изображений.
<img src="low-res.jpg" srcset="high-res.jpg 2x">
Поддержка браузера: http://caniuse.com/#search=srcset
Другие источники:
источник
src
поэтому IE / Opera всегда будет запрашивать более высокую версию DPI.Существуют разные решения, каждое из которых имеет свои плюсы и минусы. Какой из них лучше всего подходит для вас, зависит от различных факторов, таких как дизайн вашего веб-сайта, какие технологии используют ваши типичные посетители и т. Д. Обратите внимание, что дисплеи Retina не ограничиваются Macbook Pro Retina и грядущими iMac, но также включают мобильные устройства, у которых могут быть свои потребности.
Проблема также тесно связана с изображениями в адаптивном дизайне в целом. Фактически, вероятно, лучше использовать общие методы адаптивного дизайна, а не проектировать для конкретных устройств. В конце концов, и в будущем технологии будут постоянно меняться.
Некоторые из решений / обсуждений, которые я отметил:
<picture>
тег может стать решением, поддерживаемым рабочей группой W3C и даже Apple.Как показывают другие ответы, есть еще больше методов, но, вероятно, пока нет лучшей практики.
Мне интересно, как тестировать и отлаживать некоторые из этих методов, не имея соответствующих устройств ...
источник
Поскольку никто еще не упомянул очевидное, я напомню об этом: где возможно, просто используйте SVG. Они появляются в прекрасном разрешении сетчатки без каких-либо усилий.
Поддержка его хороша, поскольку IE8 - главный динозавр, о котором нужно беспокоиться. Размеры файлов в формате Gzip часто лучше, чем в растровых форматах (png / jpg), а изображения более гибкие; вы можете повторно использовать их в разных разрешениях и при необходимости изменить их стиль, что сэкономит время на разработку и загрузку.
источник
svg
связана с более старыми браузерами.Вот меньшее количество миксинов, которые я использую для этого для фоновых изображений. retina.js не работает с фоновыми изображениями, если вы используете dotLess, поскольку для этого требуется собственный миксин, который сам использует оценку скрипта, которая не поддерживается в dotLess.
Уловка со всем этим заключается в том, чтобы получить поддержку IE8. Он не может легко сделать background-size, поэтому базовым случаем (немобильный медиа-запрос) должен быть простой немасштабируемый значок. Затем медиа-запрос обрабатывает случай сетчатки и может свободно использовать класс размера фона, поскольку сетчатка никогда не будет использоваться в IE8.
Пример использования:
Для этого у вас должно быть два файла:
start_grey-97_12.png
start_grey-97_12@2x.png
Где
2x
файл двойного разрешения для сетчатки.источник
Просто предоставьте всем изображения сетчатки и уменьшите изображение до половины его исходного размера внутри элемента изображения. Например, ваше изображение
400px
широкое и высокое - просто укажите ширину изображения,200px
чтобы оно выглядело резким, как это:Если ваше изображение является фотографическим, вы, вероятно, можете увеличить сжатие JPG на нем, не делая его хуже, потому что артефакты сжатия JPG, вероятно, не будут видны, когда изображение отображается по адресу
2x
: см. Http://blog.netvlies.nl/ дизайн-взаимодействие / сетчатка-революция /источник
если его фоновые изображения, простой способ сделать это:
еще один простой способ - использовать этот метод:
Просто замените:
с участием
источник
Я нашел этот интересный способ предоставления изображений с несколькими разрешениями.
На самом деле он использует CSS, чего я хотел избежать, и работает только в Safari и Chrome.
Я о чём
image-set
.Вот пример , предоставленный Apple ( здесь ):
Я также хочу поделиться этими двумя ссылками:
image-set()
Обозначения @ W3Cисточник
С помощью JSF вы можете создать собственный тег Facelets, чтобы избавиться от ненужных добавлений
srcset
к каждому изображению.В вашем
taglib.xml
может быть что-то вроде:И ваш тег может выглядеть примерно так:
Что можно использовать как:
И отобразит:
источник
Эта проблема особенно сложна с адаптивными сайтами, где и изображение может иметь разную ширину в зависимости от размера браузера. Также при работе с CMS, где несколько редакторов потенциально загружают тысячи изображений, мне казалось нереалистичным просить людей загружать специально сжатые изображения.
Итак, я написал сценарий, который учитывает это, он запускается внизу страницы и при завершении изменения размера. Каждый раз с учетом плотности пикселей и размера изображения.
http://caracaldigital.com/retina-handling-code/
источник
Если вас не расстраивает боязнь использования java-скрипта, то вот хорошая статья http://www.highrobotics.com/articles/web/ready-for-retina.aspx . Имеет очень простое решение.
А пример на JSFiddle стоит тысячи слов.
С помощью:
JS:
источник