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

З новим Apple MacBook Pro з дисплеєм сітківки, якщо ви надасте "стандартне" зображення на своєму веб-сайті, це буде трохи нечітко. Отже, ви повинні надати зображення сітківки.

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

Це можливо?

ОНОВЛЕННЯ
Я наголошу на цій цікавій статті, запропонованій @Paul D. Waite, і цікавій дискусії про неї, пов’язаній Себастьяном .

Існує новий атрибут для тега img, який дозволяє додати атрибут retina src, а саме srcset. Не потрібні JavaScript або CSS, подвійне завантаження зображень.

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

Підтримка браузера: http://caniuse.com/#search=srcset

Інші ресурси:

• Пост випуску WebKit
• Документація W3C для srcset
• гарне пояснення, чому і як користуватися srcset
• Повідомлення Кріса Койєра для отримання більш корисної інформації

Є різні рішення, у кожного свої плюси і мінуси. Який із вас найкращий, залежить від різних факторів, таких як те, як створений ваш веб-сайт, яку технологію використовують ваші типові відвідувачі тощо. Зверніть увагу, що дисплеї сітківки не обмежуються Macbook Pro Retina та майбутніми iMacs, але також включають мобільні пристрої, які можуть мати власні потреби.

Проблема також тісно пов'язана із зображеннями в чуйних дизайнах загалом. Насправді, мабуть, найкраще використовувати загальні методи чуйного дизайну, а не розробляти для конкретних пристроїв. Зрештою, технологія буде постійно змінюватися і в майбутньому.

Деякі з рішень / дискусій, які я зазначив:

• Вектори, де це можливо, включаючи методи CSS (градієнти, закруглені кути тощо), SVG та шрифти значків.
• Подають зображення з високою роздільною здатністю ("сітківку"), але стискають їх більше (якість JPEG), як це запропонував Йоав Вайс , або дозволяйте мобільним мережам стискати їх, коли це дійсно потрібно (тобто, коли вони мобільні), як запропонував Пол Боаг .
• Адаптивні зображення , (в основному) серверне рішення. Він заснований на файлі cookie, що зберігає роздільну здатність екрана, веб-сервері, налаштованому на подання зображень із сценарію PHP, та названому скрипті для читання файлу cookie та подання відповідного зображення.
• Купа можливостей, які добре описані та обговорені на сайті Smashing Magazine .
• Подають лише трохи більшу роздільну здатність, щоб трохи згладити сітківку, як це запропоновано у відео Пола Бога .
• Техніка @ 1.5x на A List Apart - це в основному та сама ідея.
• Найближчим часом <picture>тег може стати рішенням, підтримуваним робочою групою W3C і навіть Apple.
• Метод JavaScript , запропонований Jake Archebald .
• Широке обговорення різних методів на Smashing Magazine і проблема в цілому.

Як показують інші відповіді, прийомів є ще більше - але, мабуть, немає найкращої практики, поки що.

Цікаво, як тестувати та налагоджувати деякі з цих методів, не маючи відповідних пристроїв.

Оскільки очевидного ще ніхто не згадав, я пройду його там: де можливо, просто використовуйте SVG. Вони з'являються при прекрасній роздільній здатності сітківки, без жодних зусиль.

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

Ось менше міксину, який я використовую для досягнення цього для фонових зображень. retina.js не працює для фонових зображень, якщо ви використовуєте dotLess, оскільки для цього потрібен власний mixin, який сам використовує оцінку сценарію, яка не підтримується в 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}@x2@{extension}" );
             background-size:@size @size;
         }
}

Зразок використання:

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

Для цього потрібно мати два файли:

• start_grey-97_12.png
• start_grey-97_12@2x.png

Де 2xфайл подвійного дозволу для сітківки.

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

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

Якщо ваше зображення є фотографічним, ви, ймовірно, можете збільшити стиснення JPG на ньому, не роблячи його гіршим, тому що артефакти стиснення JPG, ймовірно, не будуть видимі, коли зображення відображається за адресою 2x: див. Http://blog.netvlies.nl/ дизайн-інтеракція / сітківка-революція /

якщо його фонові зображення є простим способом зробити це:

    #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(image@2x.png); background-size: 50%; }
}

Ще один простий спосіб - це використовувати цей метод:

Просто замініть:

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

з

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

Я знайшов цей цікавий спосіб надання зображень з декількома роздільними можливостями.
Він фактично використовує 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 */
}

Я хочу поділитися також цими двома посиланнями:

• Safari 6 та Chrome 21 додають набір зображень для підтримки зображень сітківки
• image-set()Позначення @ W3C

За допомогою JSF ви можете створити спеціальний тег Facelets, щоб зберегти нечіткість необхідності додавати srcsetдо кожного зображення.

У вашому taglib.xmlможе бути щось на кшталт:

<tag>
  <tag-name>img</tag-name>
  <source>tags/img.xhtml</source>
  <attribute>
    <name>src2x</name>
    <required>true</required>
    <type>java.lang.String</type>
  </attribute>
</tag>

І ваш тег може виглядати приблизно так:

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:fn="http://xmlns.jcp.org/jsp/jstl/functions"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets">

  <img src="#{fn:replace(src2x, '@2x', '')}"
       srcset="#{src2x} 2x"/>

</ui:composition>

Які можна використовувати:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:myTag="http://your.com/namespace-of-taglib">
  <myTag:src2x="image@2x.jpg"/>
</html>

І надасть:

<img src="image.jpg"
     srcset="image@2x.jpg 2x"/>

Ця проблема особливо складна з чуйними веб-сайтами, де зображення можуть бути різної ширини залежно від розміру браузера. Також у роботі з CMS, де кілька редакторів потенційно завантажують 1000 зображень, мені здалося нереальним просити людей завантажувати спеціально стислі зображення.

Тому я написав сценарій, який враховує це, він запускається внизу сторінки та закінчує розмір. Кожен раз з урахуванням щільності пікселів та розміру зображення, яке займає зображення.

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

Якщо вас не розчарує страх використовувати Java-скрипт, ось добра стаття 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');            
    });
});