Изображения

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

Отзывчивые изображения

Отзывчивый веб-дизайн предполагает, что в зависимости от параметров устройства могут меняться не только шаблоны страниц, но и контент. Например, чтобы на экранах с высоким разрешением (2x) не страдала четкость изображения, требуется графика высокого разрешения. Изображение с заданной шириной 50% будет корректно отображаться на экране при ширине браузера не менее 800 пикс. Однако на узком экране смартфона это же изображение будет занимать слишком много полезного пространства. При масштабировании такого изображения количество потребляемых им ресурсов не изменится.

Art direction

Пример

В некоторых случаях вам может понадобится радикально оптимизировать изображение: изменить его пропорции, обрезать по краям или даже заменить целиком. Здесь вам поможет техника art direction. Больше примеров вы найдете на этом сайте: responsiveimages.org/demos/.

Responsive Images

Did you know that images account for more than 60% of the bytes on average needed to load a web page?

In this course you will learn how to work with images on the modern web, so that your images look great and load quickly on any device.

Along the way, you will pick up a range of skills and techniques to smoothly integrate responsive images into your development workflow. By the end of the course, you will be developing with images that adapt and respond to different viewport sizes and usage scenarios.

This is a free course offered through Udacity

Take Course

Изображения в разметке

Элемент img выполняет много функций: он загружает, декодирует и визуализирует контент. Современные браузеры поддерживают несколько форматов изображений. Многие изображения работают на разных устройствах, независимо от параметров экрана. Ниже мы расскажем, как добиться наилучших результатов.

TL;DR

  • Указывайте относительные размеры изображения, чтобы оно оставалось в границах контейнера.
  • Используйте элемент picture, чтобы показывать разные изображения с учетом параметров устройства (эффект art direction).
  • Используйте атрибут srcset и дескриптор x в элементе img: при наличии нескольких вариантов браузеру будет проще выбрать нужное изображение.

Указывайте относительные размеры изображения

Указывая размеры изображения, применяйте относительные величины, чтобы оно не выходило за пределы области просмотра. Например, при параметре width: 50%; изображение в ширину будет занимать 50% вмещаемого элемента (а не области просмотра или актуального размера в пикселях).

Технология CSS допускает выход контента за пределы контейнеров. Избежать этого поможет параметр max-width: 100%. Например:

img, embed, object, video {
  max-width: 100%;
}

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

Устройства с экранами высокого разрешения: добавьте к элементу img атрибут srcset

Атрибут srcset расширяет функциональные возможности элемента img. Благодаря ему вам будет проще назначать изображения с учетом параметров устройства. Как и в случае с image-set (функция CSS), атрибут srcset позволяет браузеру выбирать наиболее подходящее изображение в зависимости от характеристик устройства. Например, использовать изображения 2x на экране 2x и, потенциально, изображения 1x на устройстве 2x при ограниченной пропускной способности сети.

<img src="photo.png" srcset="photo@2x.png 2x" ...>

Если браузер не поддерживает атрибут srcset, по умолчанию файл с изображением импортируется с помощью атрибута src. Вот почему так важно включать изображение 1x, которое может отображаться на любых устройствах, независимо от их свойств. Если браузер поддерживает атрибут srcset, вы можете определять список источников изображений и условий (через запятую) до поступления запроса. В результате загружаются и выводятся на экран только те изображения, которые соответствуют параметрам устройства.

Вы можете задать любые условия, от плотности пикселей до ширины и высоты изображения, однако в настоящий момент хорошо поддерживается только параметр плотности пикселей. Чтобы текущие функциональные возможности не вошли в противоречие с будущими разработками, продолжайте назначать этому атрибуту изображение 2x.

Эффект art direction в отзывчивых изображениях с элементом picture

Если вы хотите, чтобы изображения менялись в зависимости от характеристик устройства (эффект art direction), воспользуйтесь элементом picture. Элемент picture задает декларативное решение для обеспечения нескольких версий одного изображения в зависимости от различных характеристик устройства: размера, разрешения, назначения и т. д.

Пример эффекта art direction

Используйте элемент picture, если у источника изображения несколько вариантов плотности пикселей, а также если в рамках отзывчивого веб-дизайна для некоторых типов экранов назначаются изображения с различающимися характеристиками. Как и в случае с video, вы можете указать несколько элементов source и назначать разные файлы изображений для разных медиазапросов или форматов изображений.

<picture>
  <source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">
  <source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x">
  <img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood">
</picture>

В приведенном выше примере при ширине браузера не менее 800 пикселей будет использован формат head.jpg или head-2x.jpg (в зависимости от разрешения экрана устройства). Если ширина браузера от 450 до 800 пикселей, применяются форматы head-small.jpg или head-small-2x.jpg (также в зависимости от разрешения экрана устройства). Если речь идет о ширине экрана менее 450 пикселей и устройстве с нисходящей совместимостью, элемент picture поддерживаться не будет. В этом случае для вывода изображения на экран браузер использует элемент img (он должен быть включен).

Изображения с относительными размерами

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

Мы советуем не указывать фиксированные размеры изображения и плотность пикселей. Вместо этого вы можете определять размер обрабатываемого изображения, добавив дескриптор width. Это позволит браузеру автоматически вычислить оптимальную плотность пикселей и выбрать корректное изображение для загрузки.

<img src="lighthouse-200.jpg" sizes="50vw"
     srcset="lighthouse-100.jpg 100w, lighthouse-200.jpg 200w,
             lighthouse-400.jpg 400w, lighthouse-800.jpg 800w,
             lighthouse-1000.jpg 1000w, lighthouse-1400.jpg 1400w,
             lighthouse-1800.jpg 1800w" alt="a lighthouse">

Выше приведено изображение, которое занимает половину ширины области просмотра (sizes="50vw") и зависит от ширины браузера и его соотношения логических и физических пикселей. В результате браузер может выбрать изображение, которое будет корректно отображаться в окне любого размера. В приведенной ниже таблице показано, каким может быть этот выбор.

Ширина браузера Соотношение логических и физических пикселей на устройстве Использованное изображение Эффективная разрешающая способность
400 пикселей 1 200.png 1x
400 пикселей 2 400.png 2x
320 пикселей 2 400.png 2,5x
600 пикселей 2 800.png 2,67x
640 пикселей 3 1000.png 3,125x
1100 пикселей 1 1,27x

Создание точек останова в отзывчивых изображениях

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

<img src="400.png" 
     sizes="(min-width: 600px) 25vw, (min-width: 500px) 50vw, 100vw"
     srcset="100.png 100w, 200.png 200w, 400.png 400w,
             800.png 800w, 1600.png 1600w, 2000.png 2000w" alt="an example image">

В приведенном выше примере атрибут sizes определяет размеры изображения с помощью различных медиазапросов. Если размер окна браузера превышает 600 пикселей, изображение будет занимать 25% области просмотра. При размере браузера от 500 до 600 пикселей это значение увеличивается до 50%, а при размере меньше 500 пикселей изображение становится полноэкранным.

Используйте масштабируемое изображение товара

Люди хотят видеть, что они покупают. Им важно, чтобы на сайтах онлайн-магазинов были представлены крупные изображения товаров в высоком разрешении, чтобы можно было рассмотреть их в деталях. Согласно [проведенным исследованиям] (/web/fundamentals/getting-started/principles/), отсутствие такой возможности снижает лояльность покупателей.

Веб-сайт марки J.Crew с масштабируемым изображением товара
Веб-сайт марки J.Crew с масштабируемым изображением товара

Хороший пример изображения, которое увеличивается при нажатии на него, представлен на сайте марки J.Crew. Окно с подсказкой сообщает пользователю, что он может рассмотреть товар во всех деталях, просто нажав на изображение.

Другие способы публикации изображений

Сжатые изображения

Техника сжатия изображений предназначена для высокого сжатия изображений 2x при передаче на любые устройства, независимо от их параметров. В зависимости от типа изображения и степени сжатия качество изображения может не претерпеть заметных изменений, однако размер файла значительно уменьшится.

Пример

Замена текста изображением в JavaScript

Техника замещения текста изображением в JavaScript выявляет характеристики устройства и предлагает оптимальное решение. Вы можете определить соотношение логических и физических пикселей через величину window.devicePixelRatio, задать ширину и высоту экрана и, потенциально, установить проверку сетевого соединения через navigator.connection или с помощью поддельного запроса. Когда вся необходимая информация будет собрана, вы сможете выбрать изображение для загрузки.

Основной недостаток этой техники в том, что загрузка изображения приостанавливается до окончания работы анализатора предпросмотра. Это значит, что загрузка изображений начнется только после завершения события pageload. Кроме того, браузер с большой вероятностью загрузит изображение обоих видов, 1x и 2x, и в результате вес страницы увеличится.

Изображения в CSS

Группа свойств CSS background позволяет добавлять в элементы комплексные изображения, облегчает добавление сразу нескольких изображений, обеспечивает их повторяемость их и т. д. В сочетании с медиазапросами background обеспечивает условную загрузку изображений с учетом разрешения экрана, размеров области просмотра и т. д.

TL;DR

  • Используйте изображение, которое оптимально подходит под парамеры устройства: размер экрана, разрешение и шаблон страниц.
  • Замените свойство CSS background-image для экранов с высоким разрешением и применением медиазапросов на min-resolution и -webkit-min-device-pixel-ratio.
  • Для изображений в высоком разрешении используйте атрибут srcset (наряду с изображениями 1x в разметке).
  • Учитывайте эффективность затрат при использовании техники замещения текста изображением в JavaScript или сжатии изображений высокого разрешения для устройств с низким разрешением экрана.

Используйте медиазапросы для условной загрузки изображений и art direction

Медиазапросы оказывают влияние не только на шаблон страницы, их также можно использовать для условной загрузки изображений и создания эффекта art direction в соответствии с размером области просмотра.

В приведенном ниже примере видно, что на экранах небольшого размера загружен только элемент small.png, он же применен к div. На более крупных экранах свойство background-image: url(body.png) применено к элементу body, а атрибут background-image: url(large.png) применен к div.

.example {
  height: 400px;
  background-image: url(small.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: center;
}

@media (min-width: 500px) {
  body {
    background-image: url(body.png);
  }
  .example {
    background-image: url(large.png);
  }
}

Используйте функцию image-set для изображений с высоким разрешением

Функция image-set технологии CSS дополняет группу свойств background: с ее помощью вам будет проще задать несколько изображений для устройств с разными параметрами. Браузер выберет тот файл, который больше всего подходит для данного устройства с учетом его характеристик. Например, применит 2x изображение для экрана 2x и 1x изображение для экрана 2x, если пропускная способность сети ограничена.

background-image: image-set(
  url(icon1x.jpg) 1x,
  url(icon2x.jpg) 2x
);

Но это ещё не все. Браузер не только загрузит наиболее подходящее изображение, но и пропорционально изменит его размер с учетом всех требований. Иными словами, браузер поймет, что изображение 2x в два раза тяжелее изображения 1x, и пропорционально уменьшит первое изображение в 2 раза, чтобы сохранить его размер на странице.

Свойство image-set() было введено недавно и поддерживается только в браузерах Chrome и Safari с префиксом -webkit. Необходимо также предусмотреть резервное изображение на случай, если image-set() не поддерживается. Например:

.sample {
  width: 128px;
  height: 128px;
  background-image: url(icon1x.png);
  background-image: -webkit-image-set(  
    url(icon1x.png) 1x,  
    url(icon2x.png) 2x  
  );  
  background-image: image-set(  
    url(icon1x.png) 1x,  
    url(icon2x.png) 2x  
  );
}

В приведенном выше примере соответствующий цифровой объект будет загружен в браузерах, поддерживающих image-set. В остальных случаях будет использован объект 1x. В настоящее время только немногие браузеры поддерживают image-set(), поэтому, как правило, используются объекты с разрешением 1x.

Используйте медиазапросы для назначения изображений с высоким разрешением и эффекта art direction

Медиазапросы могут создавать правила на базе соотношения логических и физических пикселей на устройстве. Таким образом для экранов 2x и 1x можно применить разные изображения.

@media (min-resolution: 2dppx),
(-webkit-min-device-pixel-ratio: 2)
{
  /* High dpi styles & resources here */
}

Браузеры Chrome, Firefox и Opera поддерживают стандарт (min-resolution: 2dppx). Для браузеров Safari и Android требуются более старые варианты синтаксиса, а которых отсутствует единица dppx. Обратите внимание, что загрузка стилей возможна только в том случае, если параметры устройства соответствуют медиазапросу. В остальных случаях вам потребуется также назначить стили. Таким образом вы сможете задать изображение, которое будет выводиться на экран, если браузер не поддерживает медиазапросы, касающиеся разрешения устройства.

.sample {
  width: 128px;
  height: 128px;
  background-image: url(icon1x.png);
}

@media (min-resolution: 2dppx), /* Standard syntax */ 
(-webkit-min-device-pixel-ratio: 2)  /* Safari & Android Browser */ 
{
  .sample {
    background-size: contain;
    background-image: url(icon2x.png);
  }
}

Вы также можете использовать синтаксис min-width для отображения альтернативных вариантов изображения в соответствии с размером области просмотра. Преимущество этой техники в том, что при несоответствующем медиазапросе изображение не загружается. Например, элемент bg.png загружается и применяется к элементу body, только если ширина браузера 500 или более пикселей:

@media (min-width: 500px) {
  body {
    background-image: url(bg.png);
  }
}

Используйте SVG-графику для создания значков

Чтобы добавить значки на веб-страницу, воспользуйтесь SVG-графикой или символами Unicode.

TL;DR

  • Для создания значков вместо растровых изображений используйте SVG-графику или символы Unicode.

Символы Unicode вместо простых значков

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

Кроме классического буквенного набора, в Unicode предусмотрены символы для обозначения числовых диаграмм (⅐), стрелок (←), математических символов (√), геометрических фигур (★), кнопок управления (▶), символов шрифта Брайля (⠏), нот (♬), букв греческого алфавита (Ω) и даже шахманых фигур (♞).

Как и именованные объекты, символы Unicode имеют следующий вид: &#XXXX;, где XXXX - это номер символа в Unicode. Например:

Ты - супер &#9733;

Ты - супер ★

SVG-графика вместо комплексных значков

Как правило, значки SVG мало весят и просты в использовании. Им также можно задавать стили с помощью CSS. У этих значков есть ряд преимуществ перед растровыми изображениями:

  • Они относятся к векторной графике, что дает бесконечные возможности для масштабирования.
  • Простота в применении эффектов CSS (цвет, тени, прозрачность и анимация).
  • Изображения SVG можно встроить прямо в документ.
  • Они семантичны.
  • Пользователям проще найти страницу при соответствующих атрибутах.

 

With SVG icons, you can either add icons using inline SVG, like 
this checkmark:
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
       xmlns:xlink="http://www.w3.org/1999/xlink" 
       width="32" height="32" viewBox="0 0 32 32">
    <path d="M27 4l-15 15-7-7-5 5 12 12 20-20z" fill="#000000"></path>
  </svg>
or by using an image tag, like this credit card icon:
<img src="credit.svg">.

Осторожнее с иконочными шрифтами

Иконочные шрифты очень популярны и удобны в использовании. Однако они во многом проигрывают SVG-графике:

  • Также относятся к векторной графике и могут масштабироваться без ограничений. Однако в результате сглаживания значки могут оказаться недостаточно четкими.
  • Ограниченные возможности для применения стилей CSS. *Оптимальное расположение пикселей может быть нарушено высотой строки, интервалом между знаками и т. д.
  • Иконочные шифты не семантичны, поэтому плохо подходят для устройств для чтения с экрана и других подобных технологий.
  • Могут привести к тому, что в файлах большого размера будут применяться только уменьшенные варианты значков (кроме ситуаций непосредственного просмотра).

Пример веб-страницы с использованием иконочного шрифта FontAwesome.

With Font Awesome, you can either add icons by using a unicode
entity, like this HTML5 logo (<span class="awesome">&#xf13b;</span>)
or by adding special classes to an &lt;i&gt; element like the CSS3
logo (<i class="fa fa-css3"></i>).

Существует множество иконочных шрифтов (как платных, так и бесплатных), например Font Awesome, Pictos или Glyphicons.

Объем дополнительных HTTP-запросов и размер файла должны соответствовать поставленной задаче. Например, если вам достаточно небольшого количества значков, возможно, рациональнее будет использовать отдельные изображения или спрайт.

Оптимизация изображений для эффективной работы сайта

Изображения часто добавляют вес загруженным файлам, а также занимают значительную площадь визуального пространства страницы. Оптимизировав изображения, вы сможете сэкономить байты и повысить производительность вашего веб-сайта. Чем меньше байтов требуется загрузить браузеру, тем меньше нагрузка на пропускную способность сети клиента и тем быстрее браузер скачивает и отображает все цифровые объекты.

TL;DR

  • Внимательно отнеситесь к формату изображения. Изучите доступные вам форматы и выберите наиболее подходящий.
  • Чтобы уменьшить размер файла, воспользуйтесь инструментами для оптимизации и сжатия изображений.
  • Сократите число HTTP-запросов. Для этого объедините часто запрашиваемые изображения в спрайты.
  • Загрузка изображений должна начинаться, когда они попадают в область просмотра. Так вы ускорите загрузку базовой страницы и уменьшите ее вес.

Выбирайте подходящий формат

Мы имеем дело с изображениями двух типов: векторными и растровыми. При работе с растровой графикой вам потребуется выбрать корректный формат сжатия, например GIF, PNG или JPG.

Растровые изображения - это, как правило, фотографии и другие изображения, которые представляют собой сетку пикселей или точек. Обычно они создаются с помощью фотоаппаратов, сканеров, а также в браузере (элемент canvas). Поскольку размер изображения становится больше, размер файла также увеличивается. Если размер масштабированного изображения больше исходного, растровые изображения становятся размытыми, так как браузер не может правильно заполнить недостающие пиксели.

Векторная графика - это, как правило, логотипы и штриховые рисунки. Представляет собой серию кривых, линий, фигур и цветов закраски. Векторные изображения создаются с помощью таких программ, как Adobe Illustrator или Inkscape, и сохраняются в формате SVG. Они состоят из простых элементов, поэтому их можно масштабировать без потери качества. Размер файла также остается прежним.

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

Ниже мы расскажем о том, как выбрать наиболее подходящий формат в каждом конкретном случае.

  • Для фото используйте формат JPG.
  • Для создания векторной графики и сплошной заливки (например, логотипов и штриховых рисунков) подходит SVG. Если векторные изображения недоступны, попробуйте WebP или PNG.
  • Чтобы отобразить больше цветов и добиться лучшего коэффициента сжатия, выбирайте PNG вместо GIF.
  • Для роликов используйте тег <video>. В результате вы получите более качественное изображение, а пользователь сможет управлять воспроизведением.

Уменьшите размер файла

Вы можете значительно уменьшить размер файла, если обработаете его после сохранения. Существует множество инструментов сжатия изображений: для форматов lossy и lossless, веб-страниц, графических интерфейсов, командной строки и т. д. По возможности применяйте автоматическую оптимизацию изображений, это очень поможет вам в работе.

Некоторые инструменты преобразуют файлы JPG и PNG в формат lossless без потери качества изображения. Для работы с файлами JPG мы рекомендуем утилиты jpegtran и jpegoptim (только для Linux, запускается с функцией --strip-all). Для оптимизации файлов PNG воспользуйтесь OptiPNG или PNGOUT.

Используйте CSS-спрайты

CSS-спрайтинг представляет собой технику объединения нескольких изображений в одно - так называемый лист спрайта. Вот как отдельные изображения выводятся на экран: фоновое изображение настраивается только для одного элемента (листа спрайта), а затем корректируется таким образом, чтобы на экране отображалась только нужная часть фона.

Пример листа спрайта

.sprite-sheet {
  background-image: url(sprite-sheet.png);
  width: 40px;
  height: 25px;
}

.google-logo {
  width: 125px;
  height: 45px;
  background-position: -190px -170px;
}

.gmail {
  background-position: -150px -210px; 
}

.maps {
  height: 40px;
  background-position: -120px -165px;
}

Благодаря спрайтингу сокращается число загрузок изображений при включенном сохранении в кеше.

Применяйте отложенную загрузку

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

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

Старайтесь не использовать изображения

Картинка совсем не обязательно должна быть именно изображением. Иногда нужного эффекта можно добиться с помощью встроенных параметров браузера. Браузер создает визуальный ряд там, где раньше требовались изображения. Таким образом, ему больше не нужно скачивать отдельные файлы изображений и корректировать ошибки масштабирования. Чтобы добавить на страницу значки, воспользуйтесь символами Unicode или специальными иконочными шрифтами.

Не размещайте текстовую информацию внутри картинок

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

Используйте CSS для замещения изображений

Современные браузеры используют стили CSS в тех случаях, для которых ранее требовались изображения. Например, комплексный градиент можно создать с помощью группы свойств background, тени - с помощью box-shadow, а для скругленных углов есть свойство border-radius.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet augue eu magna scelerisque porta ut ut dolor. Nullam placerat egestas nisl sed sollicitudin. Fusce placerat, ipsum ac vestibulum porta, purus dolor mollis nunc, pharetra vehicula nulla nunc quis elit. Duis ornare fringilla dui non vehicula. In hac habitasse platea dictumst. Donec ipsum lectus, hendrerit malesuada sapien eget, venenatis tempus purus.

<style>
  div#noImage {
    color: white;
    border-radius: 5px;
    box-shadow: 5px 5px 4px 0 rgba(9,130,154,0.2);
    background: linear-gradient(rgba(9, 130, 154, 1), rgba(9, 130, 154, 0.5));
  }
</style>

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