Восемь рекомендаций и одно правило для адаптивных изображений
1. Где можете, используйте векторные изображения или шрифтовые иконки
По возможности, избегайте проблем пиксельных изображений, используя их векторные альтернативы.
SVG обладает достойной браузерной поддержкой. У Filament Group есть проект под названием Grunticon, который генерирует SVG и альтернативные PNG’и наряду с необходимым вам CSS.
Шрифтовые иконки – тоже отличное решение с довольно обширной поддержкой. Можно создавать собственные шрифты лишь с необходимыми вам иконками. Группа изображений может содержаться в единственном HTTP-запросе, и это означает, что иконки со шрифтом гарантируют те же преимущества, что и спрайты CSS.
Только удостоверьтесь, что используете для своих иконок концепцию прогрессивного улучшения и применяете их в понятном виде.
РЕСУРСЫ
2. Поощряйте выгрузку самых качественных исходников
Так как стоимость HD-экранов снижается, они начинают появляться в большем количестве устройств и в больших размерах. Нетрудно в недалеком будущем представить себе Apple выпускающим дисплеи Retina Cinema.
Если авторы контента станут выгружать изображения самого по возможности высокого качества в любую систему, применяемую вами для управления контентом, это значит, что вы будете подготовлены к любым разрешениям экранов, какие только понадобятся в будущем. Организация и слежение за этими вещами облегчит жизнь, если в будущем вы станете переделывать дизайн сайта.
Хранение исходных файлов высочайшего качества наверняка будет означать увеличение требований, но в наши дни хранение стоит дешево.
3. Обеспечьте автоматическое изменение размера изображений и сервис сжатия
Если на вашем сайте много изображений, менять их размер и делать их оптимизацию к вебу вручную не будет иметь смысла.
Например, если клиент, с которым я советовался, решил, что им нужно три контрольных точки с адаптивными изображениями, которые означали бы в три раза большее количество текущих 800 000 изображений. И это – обычное задание. Умножьте количество изображений на два, если хотите поддерживать дисплеи Retina. Окончательный результат составит 4,8 миллиона изображений.
Сейчас им не понадобится обработка всех изображения сразу, но все равно это большой объем работы. Так что вместо этого компаниям требуется создать или купить централизованные системы, которые станут изменять размер и сжимать изображения.
4. Изображения можно менять до любого размера с помощью параметров URL’а
Сервис изменения размеров изображений должен уметь считать информацию, которая идентифицирует исходное изображение, а также те размеры, которые нужны изображению, и на лету изменить его.
Хороший пример подобного сервиса – это Sencha SRC. Посмотрите, как можно объявить в URL’е всего лишь ширину или высоту, и сервис пропорционально изменит размер изображения. Как раз то, что вам нужно.
<img
src="http://src.sencha.io/320/http://sencha.com/files/u.jpg"
alt="My constrained image"
/>
Если вы являетесь клиентом Akamai, вам мог бы пригодиться сервис Akamai Edge Image Manipulation. Он сейчас находится в эксплуатационном тестировании и предлагает огромное количество полезной функциональности.
Что бы вы ни делали, нужно убедиться, что вы обеспечиваете правильное кэширование и не разрушаете внешний кэш.
5. Обеспечьте автоматический выпуск разметки изображений
Не имеет большого значения, на каком решении вы остановитесь для своей разметки адаптивных изображений. Я лично предпочитаю PictureFill, а вы можете выбрать из множества опций.
Но вне зависимости от принятого решения вам следует централизовать разметку так, чтобы в будущем ее было легко поменять.
Например в своих шаблонах вы могли бы не применять прямого HTML, а вместо того определить серию исходных изображений и контрольные точки, как здесь:
{
"source":"/source.jpg",
"breakpoints": [
{ "max-width":"30em","pixel-density":1,"width":360px},
{ "max-width":"30em","pixel-density":2,"width":720px},
{ "max-width":"30em","pixel-density":1,"width":800px},
{ "max-width":"30em","pixel-density":2,"width":1600px},
{ "pixel-density":1,"width":800px},
{ "pixel-density":2,"width":1600px},
]
}
А затем передать это основной функции, которая будет производить правильную разметку PictureFill или ту разметку, которую вы собираетесь применять.
Не зацикливайтесь на синтаксисе или данных, содержащихся в примере. Главное – то, что, централизовав в функции разметку изображений, вы сможете быстро менять ее по мере развития стандартов.
6. Обеспечьте способ замены масштабированных изображений в художественных целях
Для большинства сайтов важнейшее применение адаптивных изображений состоит в обеспечении разного разрешения в зависимости от размера отдельного окна просмотра, в котором на странице используется изображение. Это то, что мы зовем случаем переключения разрешения.
Подчас вы обнаружите, что простого изменения размера недостаточно. Более мелкая версия того же изображения становится нераспознаваемой.
В маленьком размере изображение нелегко рассмотреть.
Если в уменьшенном формате сделать изменения в исходнике, то изображение будет легче видеть.
Это то, что зовется случаем художественной редактуры.
Другой пример, где может понадобиться художественное редактирование – для изображений, сочетающих текст и фотографию. В идеале можно отделить фото от текста, но иногда невозможно добиться над этим нужного контроля, и когда изображение уменьшается, текст становится нечитаемым.
Для данного проекта мы смогли установить некоторое количество шаблонов, где могла бы понадобиться художественная редактура. Под эти шаблоны CMS будет модифицирована, чтобы дать возможность авторам выгружать разные исходники и определять, в каких контрольных точках они должны использоваться.
7. Объедините лучшее из опыта сжатия изображений
Если собираетесь централизовать изменение размеров изображений в качестве сервиса, то это идеальная возможность объединить лучшие инструменты сжатия.
В Google’е имеется отличная информация по методам оптимизации изображений. И, само собой разумеется, что вам следует установить для своих изображений долгосрочные заголовки.
8. Бонус: Отслеживайте поддержку формата изображений WebP и пользуйтесь им
Поскольку вы централизуете передачу изображений, почему бы не рассмотреть поддержку WebP?
В среднем размер файла WebP на 25% – 34% меньше в сравнении с файлом JPEG. WebP сжимает на 34% лучше, чем libpng, и на 26% — чем pngout для сжатия изображений без потерь.
Недавно Google писал о том, как при запросе изображений у них проверяется наличие поддержки WebP и автоматически предоставляется альтернатива в формате WebP, если браузер способен такое изображение отобразить.
В идеале браузеры просто поддерживали бы WebP, но сейчас можно получить некоторые выгоды производительности, а его поддержка может ничего не добавить к имиджу вашего сервиса по изменению размеров изображения.
Одно-единственное правило адаптивных изображений:
Имейте ввиду, то, что вы делаете сейчас, в будущем будет запрещено к использованию
Никто не знает, что уготовит будущее адаптивных изображений. Через несколько лет мы, возможно, оглянетесь на применяющиеся сейчас хаки и посмеетесь над своей наивностью.
Единственное, в чем можно быть уверенным – что, когда стандарты приблизятся к адаптивным изображениям, нам придется изменить то, что мы делаем сейчас.
Поэтому что бы вы ни делали, убедитесь, что это гибкое и легко изменяемое решение в расчете на то время, когда прояснится окончательное решение проблемы адаптивных изображений.
Автор: Jason Grigsby
