От автора: оптимизация изображений – один из простейших способов ускорить сайт и повысить баллы в PageSpeed и YSlow. Несжатые и большие изображения много весят и вынуждают загружать пользователей ненужные данные. Оптимизация изображений снижает общий вес страницы, из-за чего страница грузится быстрее.
Зачем оптимизировать изображения?
Изображения сильно сказываются на общем весе страницы (по сравнению с HTML/CSS/JS). Где вы взяли изображения?
стоковый сайт?
камера?
мобильное устройство?
поисковик?
Разрешение у большей части этих изображений очень высокое, и их можно использовать для печати. Некоторые могут быть уменьшены для веба, другие же нет. Большая часть изображений не оптимально сжата и содержит дополнительные данные, ненужные пользователю.
По большей части, эти изображения весят больше, чем нужно.
Что будет, если использовать неоптимизированные изображения
Большие и несжатые изображения сильно замедляют загрузку страницы. Вот что будет:
Большие и несжатые изображения дольше загружаются, масштабируются и рендерятся
Браузер запрашивает и загружает изображение – 2400 х 1350 и 2.5Мб!
В зависимости от дизайна сайта HTML или CSS уменьшают размер изображения, чтобы оно вписалось в область превью 300 х 169.
Браузер рендерит масштабированное изображение на странице.
Используя неоптимизированное изображение, вы заставили пользователей загружать данных больше, чем нужно. Вот почему:
Нужно было изображение 300 х 169, а вы использовали 2400 х 1350.
Изображение экспортировалось в максимальном качестве 12/100% — это уровень для печати.
… или же изображение было взято напрямую с телефона/камеры/интернета, а значит, там могут храниться метаданные и цветовые профили, а качество может быть завышенным.
Если эти шаги повторяются для нескольких изображений, то все накладывается и приводит к замедлению работы веб-страницы.
Что такое оптимизация изображений?
В практических целях мы сосредоточимся на проблемах, связанных с размером неоптимизированных изображений. Однако оптимизация изображений затрагивает и другие области (например, перестройку в браузере).
Проще говоря, меньше размер файла = меньше время загрузки = быстрее загружается страница. Основные концепции оптимизации изображений сводятся к размерам изображения (визуальный размер, ширина и высота) и сжатию (качество изображения и т.д.).
Разрешение сильно влияет на размер файла
Изображения с большим разрешением весят больше. Если загружать изображение в максимальном размере для отображения, то браузеру не нужно будет скачивать ненужные данные и тратить время на масштабирование.
Сжатие
В самом простом определении алгоритмы сжатия с потерями ищут и уменьшают избыточные пиксели внутри изображения. Чем активнее вы будете, тем больше вырежется пикселей, что снизит качество.
Несжатые изображения сохраняют все данные о пикселях, а также выглядят чище и четче – но и весят больше
Самый простой пример сжатия – операция «Экспортировать для веб» в фотошопе. Необходимо выбрать качество экспорта с наилучшим соотношением веса и качества.
Сжатые изображения хуже по качеству – заметны артефакты и потеря деталей и цветов
В этом случае вы выполняете сжатие с потерей качества. То есть чем меньше вес файла, тем меньше качество изображения. Читайте подробнее о сжатии с потерями по ссылке.
Сжатие без потерь – метод, в котором качество изображения не меняется, а данные, из которых состоит изображение, более эффективно и компактно организуются, что приводит к уменьшению веса файла.
Современные компрессоры изображений используют продвинутые алгоритмы на основе как сжатия с потерями, так и без потерь, чтобы сжать изображение и снизить размер файла без потери качества.
Еще больше оптимизации
Помимо разрешения и сжатия оптимизация изображений включает в себя удаление лишних данных, ненужных пользователю.
Пользователи не видят метаданные, поэтому их нужно вырезать
В файле изображения есть слои данных, невидимые обычному пользователю. К таким данным относятся EXIF, информация о цветовом профиле, а также дата/положение.
Если удалить эти данные, то останутся только видимые пиксели – реальные данные, видимые пользователю – что уменьшит вес изображения.
Что будет, если использовать оптимизированные изображения
Уменьшенные и сжатые изображения быстрее загружаются и рендерятся
Браузер запрашивает и загружает изображение – 300 х 169 и 68Кб!
HTML/CSS масштабирование не требуется, поэтому браузер рендерит изображение на странице как есть.
В результате изображения на сайте намного быстрее загружаются и рендерятся.
«Работа с масштабированными изображениями» и адаптивный веб
У вас есть адаптивный дизайн, а GTmetrix советует «работать с масштабированными изображениями». И тут возникает конфликт. Вы можете задаться вопросом: «Как мне использовать адаптивный дизайн, если я должен работать с масштабированными изображениями? Не будут ли мои изображения плохо выглядеть на определенных брейкпоинтах?»
Адаптивный дизайн изменяет размер и масштабирует изображения, поэтому невозможно использовать изображения с тем размером, который отображается на экране, так как вьюпорт изменяется.
Под советом «работать с масштабированными изображениями» имеется в виду, что нужно работать с изображениями, не сильно отличающимися от масштаба.
Тогда основное правило меняется на «работать с изображениями на максимальном размере отображения в дизайне». Чтобы изображения хорошо смотрелись на ретина экранах, их можно увеличить в два раза от максимального размера.
В адаптивном дизайне тоже придется масштабировать изображения
Так вы получите максимальную гибкость и адаптивный дизайн, а также оптимальное качество на дисплеях с высокой плотностью пикселей. GTmetrix позволяет увеличивать изображения в два раза относительно рендера на экране перед вычетом очков (страницы анализировались на вьюпорте 1024 х 768).
Также существует атрибут srcset, а также обработка адаптивных изображений в CMS. Эти темы стоит обсудить более подробно, но мы лучше напишем для этого отдельную статью.
А как вы оптимизируете изображения?
Это объясняющее руководство должно дать вам хорошее понимание базовых концепций оптимизации изображений. В следующих статьях мы покажем вам, как правильно сжимать и масштабировать изображения, чтобы вы могли оптимизировать размер страниц на сайте.
Источник: //gtmetrix.com/
Редакция: Команда webformyself.