Адаптивные изображения

Изображения – неотъемлемая часть любой страницы. но и занимают больше всего места. Адаптивный дизайн позволяет менять не только макеты, но и изображения в зависимости от характеристик устройства.

Pete LePage

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

Художественное руководство

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

Адаптивные изображения

Знаете ли вы, что на изображения приходится в среднем более 60% байтов, необходимых для загрузки веб-страницы?

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

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

Это бесплатный курс, предлагаемый через Udacity

Пройти курс

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

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

Сводка

• Используйте относительные размеры изображений, чтобы они не выходили за пределы контейнера.
• Элемент picture позволяет задавать разные изображения в зависимости от характеристик устройства.
• Используйте атрибут srcset и дескриптор x в элементе img, чтобы браузер мог выбрать наиболее подходящее изображение для экрана с определенной плотностью пикселей.
• Если на странице всего одно или два изображения, которые больше нигде не используются, попробуйте встроить их в код страницы, чтобы сократить количество запросов файлов.

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

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

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

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

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

Улучшение img с помощью srcset для устройств с высоким разрешением

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

<img src="photo.png" srcset="[e-mail] 2x" ...>

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

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

Художественное оформление адаптивных изображений с помощью picture

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

Примечание. Элемент picture начинает поддерживаться в браузерах. Хотя этот элемент пока поддерживается не всеми браузерами, мы рекомендуем использовать его, поскольку он обеспечивает обратную совместимость и позволяет применять полифил Picturefill. Подробную информацию можно найти на сайте ResponsiveImages.org.

Используйте элемент 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, который всегда должен быть включен.

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

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

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

<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.jpg	1x
400 пикс.	2	400.jpg	2x
320 пикс.	2	400.jpg	2,5x
600 пикс.	2	800.jpg	2,67x
640 пикс.	3	1000.jpg	3,125x
1100px	1	800.png	1,45x

Учитывайте контрольные точки в адаптивных изображениях

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

<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 пикселей, изображение занимает всю ширину области просмотра.

Добавьте возможность увеличивать изображения товаров

J. Сайт Crew с разворачивающимся изображением товара.

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

Хороший пример изображений, которые можно развернуть нажатием, – сайт J. Сайт команды. Исчезающий оверлей указывает на то, что на изображение можно нажать, чтобы увеличить его и рассмотреть детали.

Другие техники работы с изображениями

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

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

Попробовать

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

Замена изображений с помощью JavaScript

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

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

Встраивание изображений: растровые и векторные

Существует два принципиально разных способа создания и хранения изображений, и это влияет на то, как вы развертываете изображения в адаптивном режиме.

Растровые изображения, такие как фотографии и другие изображения, представлены в виде сетки отдельных цветных точек. Растровые изображения могут быть получены с камеры или сканера или созданы с помощью элемента холста HTML. Для хранения растровых изображений используются такие форматы, как PNG, JPEG и WebP.

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

SVG

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

Ниже показаны две версии одного и того же изображения: PNG слева и SVG справа. SVG-изображение выглядит отлично в любом размере, тогда как PNG-изображение рядом с ним начинает выглядеть размытым при больших размерах дисплея.

Если вы хотите уменьшить количество запросов файлов, которые делает ваша страница, вы можете закодировать изображения в формате SVG или Data URI. Если вы посмотрите исходный код этой страницы, то увидите, что оба логотипа ниже объявлены как встроенные: URI данных и SVG.

Формат SVG хорошо поддерживается на мобильных устройствах и компьютерах, а инструменты оптимизации позволяют значительно уменьшить размер файлов. Два встроенных SVG-логотипа ниже выглядят одинаково, но один из них весит около 3 КБ, а другой – всего 2 КБ.

URI данных

Для этого укажите в качестве значения атрибута src элемента img строку следующего формата (в кодировке Base64):

<img src="data:image/svg+xml;base64,[data]">

Начало кода для логотипа HTML5, показанного выше, выглядит так:

<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiB
BZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW ...">

(Полная версия содержит более 5000 символов!)

Чтобы преобразовать двоичные файлы, например изображения, в URI с данными, можно использовать инструменты с поддержкой перетаскивания, такие как jpillora.com/base64-encoder. Как и SVG, URI данных хорошо поддерживаются мобильными и десктопными браузерами.

Встраивание в CSS

URI с данными и SVG-файлы также можно встраивать в CSS. Это поддерживается как на мобильных устройствах, так и на компьютерах. Вот два одинаковых изображения, реализованных в виде фоновых изображений в CSS: одно – Data URI, другое – SVG.

Плюсы и минусы встраивания

Встроенный код для изображений может быть очень длинным, особенно если это URI с данными. Зачем же его использовать? Чтобы уменьшить количество HTTP-запросов SVG и URI с данными позволяют получить всю веб-страницу, включая изображения, CSS и JavaScript, за один запрос.

Недостатки:

• На мобильных устройствах URI с данными могут загружаться значительно медленнее, чем изображения из внешнего файла src.
• URI данных могут значительно увеличить размер HTML-запроса.
• Они усложняют разметку и рабочий процесс.
• Формат URI данных значительно больше двоичного (до 30%), поэтому он не уменьшает общий размер скачиваемых файлов.
• URI данных не кешируются, поэтому их нужно скачивать для каждой страницы, на которой они используются.
• Они не поддерживаются в IE 6 и 7 и не полностью поддерживаются в IE 8.
• При использовании HTTP/2 сокращение количества запросов объектов станет менее приоритетной задачей.

Как и в случае с другими адаптивными объявлениями, вам нужно протестировать, что работает лучше всего. Используйте инструменты разработчика, чтобы измерить размер скачиваемого файла, количество запросов и общую задержку. Иногда URI данных могут быть полезны для растровых изображений, например на главной странице, где есть только одна или две фотографии, которые больше нигде не используются. Если вам нужно встроить векторные изображения, лучше использовать SVG.

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

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

Сводка

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

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

Запросы медиа влияют не только на макет страницы. С их помощью можно загружать изображения по условию или задавать художественное оформление в зависимости от ширины области просмотра.

Например, в приведенном ниже коде на экранах меньшего размера скачивается только small.png и применяется к контенту div, а на экранах большего размера background-image: url(body.png) применяется к телу страницы, а 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, и поэтому уменьшает изображение 2x в 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.

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

Запросы медиа позволяют создавать правила на основе соотношения пикселей устройства, что позволяет указывать разные изображения для экранов с плотностью 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.

Сводка

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

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

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

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

Символы Unicode добавляются так же, как и именованные объекты: &#XXXX, где XXXX – номер символа Unicode. Пример:

You're a super ★

Вы суперзвезда!

Замените сложные значки на SVG

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

• Это векторная графика, которую можно масштабировать до бесконечности.
• Эффекты 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">.

Попробовать

Используйте шрифты значков с осторожностью

Пример страницы, на которой для значков используется шрифт FontAwesome.

Шрифты значков популярны и просты в использовании, но у них есть некоторые недостатки по сравнению со значками SVG:

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

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-запросы и файлы большего размера могут замедлить загрузку страницы. Например, если вам нужно всего несколько значков, лучше использовать изображение или спрайт.

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

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

Сводка

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

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

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

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

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

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

При выборе формата руководствуйтесь следующими рекомендациями:

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

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

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

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

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

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>

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