Как сделать изображение, готовое для сетчатки, которое можно использовать на устройствах с сетчаткой и без нее

Это продолжение по ссылке ниже

Подготовка изображений для retina-ready (Интернет)

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

если изображение на экране должно иметь максимальную ширину 400 и максимальную высоту 300, то само изображение должно быть 800 x 600 с ppi 144. Затем файл должен быть сильно сжат, чтобы минимизировать время его загрузки.

Когда вы отображаете изображение, вы принудительно устанавливаете его максимальную ширину и максимальную высоту, используя код css/html следующим образом:

<img src:"imagethatis800x600.jpg" style="width:400px; height:300px;" width="400" height="300" />

Это правильно? (Я уже решил, что наша компания не будет использовать responsive.js или cdn.)


html css retina-display retina
person Paeon    schedule 20.06.2014    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Более простым подходом было бы использование атрибута srcset для img. Затем вы можете иметь изображения в разных пикселях устройства на пиксель CSS.

Попробуйте открыть эту страницу как в настольном браузере, так и в телефоне с поддерживаемым браузером: http://www.webkit.org/demos/srcset/

Поддержка по-прежнему ограничена, но, вероятно, скоро будет улучшена: http://caniuse.com/srcset

person Emil    schedule 20.06.2014
comment
Спасибо, но поскольку поддержка srcset невелика (особенно в IE), это пока не работает. - person Paeon; 02.07.2014

arrow_upward
0
arrow_downward

Появился новый адаптивный стандарт HTML5. . По состоянию на июль 2014 года это пока только в бета-версиях браузеров. Но полифил Picturefill уже доступен.

В этой статье объясняются различные варианты использования довольно хорошо. Но то, что вы хотите здесь, это просто предоставить альтернативное изображение для дисплеев с высоким разрешением (например, «сетчатка»):

<img srcset="small.jpg 1x, large.jpg 2x"
   src="small.jpg"
   alt="A rad wolf" />
person mb21    schedule 09.07.2014

arrow_upward
0
arrow_downward

Для широкой совместимости браузера вы также можете использовать фоновые изображения CSS для элементов контейнера и управлять фоновым файлом (с сетчаткой или без нее) с помощью медиазапросы/запросы dpi

Взгляните на эту скрипту.

#container {
    background-image: url(http://placehold.it/200x200);
    width: 200px;
    height: 200px;

    @media 
      only screen and (-webkit-min-device-pixel-ratio: 2), 
      only screen and (min-resolution: 192dpi) { 
          background-image: url(http://placehold.it/400x400);
    }
}
person riccardolardi    schedule 09.07.2014
comment
Извините, я не могу использовать фоны css для этого. - person Paeon; 28.08.2014