Автоматические изображения Retina для веб-сайтов

С новым Apple MacBook Pro с дисплеем сетчатки, если вы предоставите "стандартный" образ на своем веб-сайте, он будет немного нечетким. Таким образом, вы должны предоставить изображение сетчатки.

Есть ли способ автоматического переключения на @2x изображения, например iOS (с Objective-C)? Я нашел: CSS для изображений с высоким разрешением на мобильных и сетчатых дисплеях, но я бы хотел найти автоматический процесс для всех моих изображений, без CSS или JavaScript.

Возможно ли это?

UPDATE
Я хотел бы подчеркнуть эту интересную статью, предложенную @Paul D. Waite и интересный обсуждение об этом связанном Sebastian.

Ответ 1

Существует новый атрибут для тега img, который позволяет добавить атрибут sina-retina src, а именно srcset. Нет необходимости в javascript или CSS, без двойной загрузки изображений.

<img src="low-res.jpg" srcset="high-res.jpg 2x">

Поддержка браузера: http://caniuse.com/#search=srcset

Другие ресурсы:

Сообщение о публикации WebKit
Документация W3C для srcset
хорошее объяснение о том, почему и как использовать srcset
Сообщение Chris Coyer для получения более подробной информации

Ответ 2

Существуют разные решения, каждый из которых имеет свои плюсы и минусы. Какой из них лучше всего подходит для вас, зависит от различных факторов, таких как дизайн вашего веб-сайта, какая технология использует ваши типичные посетители и т.д. Обратите внимание, что дисплеи сетчатки не ограничиваются MacBook Pro Retina и предстоящими iMac, но также включают мобильных устройств, которые могут иметь свои собственные потребности.

Проблема также тесно связана с изображениями в отзывчивых проектах в целом. На самом деле, вероятно, лучше всего использовать общие адаптивные методы проектирования, а не конструировать для определенных устройств. В конце концов, технология будет постоянно меняться и в будущем.

Некоторые из рассмотренных мной решений/дискуссий:

Векторы, где это возможно, включая методы CSS (градиенты, закругленные углы и т.д.), шрифты SVG и значков.
Обслуживание изображений с высоким разрешением ( "сетчатка" ), но сжимать их больше (качество JPEG), как было предложено Yoav Weiss, или мобильные сети сжимают их, когда это действительно необходимо (т.е. когда они мобильны), как предложено Paul Boag.
Adaptive Images, (в основном) серверное решение. Он основан на файле cookie, хранящем разрешение экрана, веб-сервере, настроенном на обслуживание изображений с PHP script, и названном script, чтобы прочитать файл cookie и выполнить соответствующее изображение.
Множество возможностей, хорошо описанных и обсуждаемых в Smashing Magazine.
Обслуживание немного более высоких разрешений, чтобы немного сгладить изображение сетчатки, как показано в видео Paul Boag.
Техника @1.5x в List Apart в основном та же самая идея.
В ближайшем будущем тег <picture> может стать решением, поддерживаемым рабочая группа W3C и даже Apple.
A метод JavaScript, предложенный Джейком Аршебалдом.
обширная дискуссия о различных методах в Smashing Magazine и проблемах в целом.

Как показывают другие ответы, есть еще больше методов, но, вероятно, нет лучшей практики.

Интересно, как тестировать и отлаживать некоторые из этих методов без наличия соответствующего устройства (ов)...

Ответ 3

Вот чем меньше mixin я использую для достижения этого для фоновых изображений. retina.js не работает для фоновых изображений, если вы используете dotLess, так как для этого требуется свой собственный mixin, который сам использует оценку script, которая не поддерживается в dotLess.

Трюк со всем этим заключается в том, чтобы получить поддержку IE8. Он не может легко сделать фоновый размер, поэтому базовый случай (не мобильный медиа-запрос) должен быть простым, не масштабированным значком. Затем медиа-запрос обрабатывает случай сетчатки и может свободно использовать класс фона, поскольку сетчатка никогда не будет использоваться в IE8.

.retina-background-image( @path, @filename,@extension, @size )
{
     .background-size( cover );
     background-image: url( "@{path}@{filename}@{extension}" );
         @media only screen and ( -webkit-min-device-pixel-ratio: 2 ),
                only screen and ( -moz-min-device-pixel-ratio: 2 ),
                only screen and ( -o-min-device-pixel-ratio: 2/1 ),
                only screen and ( min-device-pixel-ratio: 2 )
         {
             background-image:url( "@{path}@{filename}@[email protected]{extension}" );
             background-size:@size @size;
         }
}

Пример использования:

.retina-background-image( "../references/Images/", "start_grey-97_12", ".png", 12px );

Для этого требуется, чтобы у вас было два файла:

start_grey-97_12.png
[email protected]

Если файл 2x имеет двойное разрешение для сетчатки.

Ответ 4

Поскольку никто не упомянул об очевидном, я буду плавать там: где это возможно, просто используйте SVG. Они появляются в красивых разрешениях сетчатки без каких-либо усилий.

Поддержка этого хороша тем, что IE8 является основным динозавром, о котором нужно беспокоиться. Размер файлов Gzipped часто лучше, чем растровые (png/jpg) форматы, а изображения более гибкие; вы можете использовать их при разных разрешениях и при необходимости восстанавливать их, что экономит время разработки и скорость загрузки.

Ответ 5

Просто предоставляйте изображения сетчатки всем и сжимайте изображение до половины его собственного размера внутри элемента изображения. Например, пусть ваше изображение 400px широкое и высокое - просто укажите ширину изображения как 200px, чтобы он выглядел так:

<img src="img.jpg" width="200px" height="200px" />

Если ваше изображение фотографируется, вы можете увеличить его сжатие на JPG, не делая его хуже, потому что артефакты сжатия JPG, вероятно, не будут видны, когда изображение будет отображаться в 2x: см. http://blog.netvlies.nl/design-interactie/retina-revolution/

Ответ 6

если его фоновое изображение - простой способ сделать это:

    #image { background: url(image.png); }

@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (-moz-min-device-pixel-ratio: 2),
       only screen and (-o-min-device-pixel-ratio: 2/1),
       only screen and (min-device-pixel-ratio: 2) {
           #image { background: url([email protected]); background-size: 50%; }
}

еще один простой способ - использовать этот метод:

Просто замените:

<img src="image.jpg" alt="" width="200" height="100" />

<img src="[email protected]" alt="" width="200" height="100" />

Ответ 7

Я нашел этот интересный способ для предоставления изображений с несколькими разрешениями.
Он фактически использует CSS, чего я хотел избежать, и работает только в Safari и Chrome.
Я говорю о image-set.

Здесь пример, предоставленный Apple (здесь):

header {
    background: -webkit-image-set( url(images/header.jpg)    1x,
                                   url(images/header_2x.jpg) 2x);
    height: 150px; /* height in CSS pixels */
    width: 800px; /* width in CSS pixels */
}

Я хочу поделиться и этими двумя ссылками:

Ответ 8

Если вы не разочарованы страхом использования java- script, то вот хорошая статья http://www.highrobotics.com/articles/web/ready-for-retina.aspx. Это очень простое решение.

И пример в JSFiddle стоит тысячи слов.

Использование:

<img onload="getImgSrc(this,'image_x1.png')" width="100" height="100" />

JS:

/* RETINA READY IMG SRC */
function getImgSrc(img, src) {
    var srcResult = src;
    // if high-res screen then change _x1 on _x2
    if (window.devicePixelRatio > 1 && 
        src.indexOf("_x1.")>=0) {
          srcResult = src.replace("_x1.", "_x2.");
    }
    img.onload = null; //protect from second rasing
    img.src = srcResult;    
}

$(document).ready(function(){
  // fire onload trigger on IMG tags that have empty SRC attribute
  var images = $('img:not([src=""])');
    images.each(function(i) {
        $(this).trigger('onload');            
    });
});

Ответ 9

Мой фрагмент кода делает именно это. Нет необходимости в jQuery, просто используйте атрибут data-hdimg.

https://github.com/ajkochanowicz/High-Res-Images

document.addEventListener 'DOMContentLoaded', ->
  HDimgs = document.querySelectorAll '[data-hdimg]'
  (
    image = new Image()
    image.onload = ->
      console.info 'Image loaded'
      img.src = image.src
      img.style.width = "#{image.width / 2}px"
      img.removeAttribute 'data-hdimg'
    image.onerror = ->
      console.error 'Could not load image'
    image.src = img.dataset.hdimg
  ) for img in HDimgs

Ответ 10

Эта проблема особенно сложна с чувствительными сайтами, где изображение может иметь разную ширину, зависящую от размера браузера. Также, имея дело с CMS, где несколько редакторов потенциально загружают 1000 изображений, мне показалось нереальным спросить, что люди загружают специально сжатые изображения.

Итак, я написал script, который учитывает это, он запускается в нижней части страницы и заканчивается по размеру. Каждый раз, принимая во внимание плотность пикселей и размер, занимаемый изображением.

http://caracaldigital.com/retina-handling-code/