Адаптивный веб-дизайн — простая техника, пока вы не рассматриваете изображения. Есть ряд вопросов:
- Пропускная способность может быть сохранена, если меньшие изображения отправляются на устройства с меньшим экраном.
- При более низких разрешениях может быть предпочтительным показывать обрезанное изображение с основными деталями, а не с измененным видом всего изображения.
- Устройства с дисплеями более высокой плотности (Retina) могут отправлять изображения с более высоким разрешением.
У меня есть подозрение, что проблема была завышена. Лишь немногие из нас когда-либо будут создавать многочисленные изображения для устройств; Есть слишком много вариантов, и жизнь слишком коротка. Это сказал …
Дисплеи так разные?
Если мы посмотрим на нижнюю часть спектра дисплея, мы найдем мобильные телефоны. Даже самый дешевый смартфон имеет дисплей 800 × 480. Это примерно половина размеров (четверть площади) ноутбука среднего класса, но это все же разумное разрешение. И помните, что браузер работает в полноэкранном режиме, что мало кто делал бы на ПК.
С другой стороны, у нас есть дисплеи с двойной плотностью, широко известные под торговой маркой Apple — Retina . Последние iPad имеют родное разрешение 2048 × 1536 или 264 пикселей на дюйм, где отдельные пиксели могут быть слишком маленькими для невооруженного глаза. Чтобы веб-сайты и приложения оставались работоспособными, устройство возвращается к стандартному разрешению 1024 × 768, но использует дополнительные пиксели для более плавных шрифтов и значков.
Моя точка зрения: характеристики дисплея сходятся . Высококачественные мобильные разрешения уже соответствуют типичным экранам ПК или превышают их, а плотность дисплеев может зайти так далеко; зачем создавать дисплеи с тройной плотностью, когда пиксели с двойной плотностью уже невидимы? Потребность в адаптивных изображениях будет уменьшаться по мере улучшения оборудования.
Мои изображения блочные!
Я еще не уверен, что качество изображения Retina является серьезной проблемой …
- Изображения можно использовать.
- Относительно мало людей (в настоящее время) имеют устройства двойной плотности.
- Большинство устройств Retina — это смартфоны и планшеты. Должны ли мы отправлять изображения с более высоким разрешением на гаджеты с более ограниченной вычислительной мощностью и доступностью сети?
- Наконец, почему мы добавляем фотографии высокого разрешения на наши веб-сайты, когда пропускная способность и скорость отклика остаются такими важными?
Конечно, все это не имеет значения, когда ваш босс требует «менее блочных» изображений на своем iPad. Тем не менее, я бы порекомендовал более прагматичный кросс-браузерный подход в предпочтении к большим изображениям, т. Е. По возможности заменяйте растровые изображения SVG-изображениями, эффектами CSS3 или значками веб-шрифтов (см. 5 способов поддержки дисплеев сетчатки высокой плотности ).
Промышленность решает
Я могу быть немного пренебрежительным, но многие люди заботятся о проблеме адаптивного изображения. Недавняя встреча членов W3C наконец достигла консенсуса, и поставщики, вероятно, поддержат предложение по атрибуту image srcset При реализации вы сможете использовать такой код, как:
<img src="normal.jpg" srcset="midres.jpg 1.5x, highres.jpg 2x" />
Устройства со стандартным разрешением или браузеры, которые не поддерживают srcset Устройства с экранами с 1,5-кратной плотностью покажут midres.jpg, а с экранами с 2-кратной плотностью — highres.jpg.
К сожалению, плотность пикселей не является единственным фактором, и ширина области просмотра (и, возможно, высота) также должны учитываться. Следовательно, srcset
<img src="x.jpg" srcset="y.jpg 800w 1x, y.jpg 400w 2x, z.jpg 1200w 1x, z.jpg 600w 2x" />
В этом примере y.jpg загружается на устройства стандартного разрешения с максимальной шириной 800 пикселей и устройства двойной плотности с максимальной шириной 400 пикселей.
srcset Тем не менее, он был сочтен более совместимым с предыдущими версиями и более легким для реализации, чем другие предложения.
Конечно, предложение все еще может измениться. У меня ужасное чувство, что мы все будем использовать дисплеи двойной плотности и очень большие изображения, прежде чем это станет применимым стандартом!
Вам нравится предложение srcset Вы бы использовали это?