Что такое оптимизация изображений?

Что такое оптимизация изображений?

От автора: оптимизация изображений – один из простейших способов ускорить сайт и повысить баллы в PageSpeed и YSlow. Несжатые и большие изображения много весят и вынуждают загружать пользователей ненужные данные. Оптимизация изображений снижает общий вес страницы, из-за чего страница грузится быстрее.

Зачем оптимизировать изображения?

Изображения сильно сказываются на общем весе страницы (по сравнению с HTML/CSS/JS). Где вы взяли изображения?

стоковый сайт?

камера?

мобильное устройство?

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

поисковик?

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

По большей части, эти изображения весят больше, чем нужно.

Что будет, если использовать неоптимизированные изображения

Большие и несжатые изображения сильно замедляют загрузку страницы. Вот что будет:

Что такое оптимизация изображений?

Большие и несжатые изображения дольше загружаются, масштабируются и рендерятся

Браузер запрашивает и загружает изображение – 2400 х 1350 и 2.5Мб!

В зависимости от дизайна сайта HTML или CSS уменьшают размер изображения, чтобы оно вписалось в область превью 300 х 169.

Браузер рендерит масштабированное изображение на странице.

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

Нужно было изображение 300 х 169, а вы использовали 2400 х 1350.

Изображение экспортировалось в максимальном качестве 12/100% — это уровень для печати.

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

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

Что такое оптимизация изображений?

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

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

Что такое оптимизация изображений?

Разрешение сильно влияет на размер файла

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

Сжатие

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

Что такое оптимизация изображений?

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Несжатые изображения сохраняют все данные о пикселях, а также выглядят чище и четче – но и весят больше

Самый простой пример сжатия – операция «Экспортировать для веб» в фотошопе. Необходимо выбрать качество экспорта с наилучшим соотношением веса и качества.

Что такое оптимизация изображений?

Сжатые изображения хуже по качеству – заметны артефакты и потеря деталей и цветов

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

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

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

Еще больше оптимизации

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

Что такое оптимизация изображений?

Пользователи не видят метаданные, поэтому их нужно вырезать

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

Если удалить эти данные, то останутся только видимые пиксели – реальные данные, видимые пользователю – что уменьшит вес изображения.

Что будет, если использовать оптимизированные изображения

Что такое оптимизация изображений?

Уменьшенные и сжатые изображения быстрее загружаются и рендерятся

Браузер запрашивает и загружает изображение – 300 х 169 и 68Кб!

HTML/CSS масштабирование не требуется, поэтому браузер рендерит изображение на странице как есть.

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

«Работа с масштабированными изображениями» и адаптивный веб

У вас есть адаптивный дизайн, а GTmetrix советует «работать с масштабированными изображениями». И тут возникает конфликт. Вы можете задаться вопросом: «Как мне использовать адаптивный дизайн, если я должен работать с масштабированными изображениями? Не будут ли мои изображения плохо выглядеть на определенных брейкпоинтах?»

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

Под советом «работать с масштабированными изображениями» имеется в виду, что нужно работать с изображениями, не сильно отличающимися от масштаба.

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

Что такое оптимизация изображений?

В адаптивном дизайне тоже придется масштабировать изображения

Так вы получите максимальную гибкость и адаптивный дизайн, а также оптимальное качество на дисплеях с высокой плотностью пикселей. GTmetrix позволяет увеличивать изображения в два раза относительно рендера на экране перед вычетом очков (страницы анализировались на вьюпорте 1024 х 768).

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

А как вы оптимизируете изображения?

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

Источник: https://gtmetrix.com/

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Верстка-Мастер. От теории до верстки популярных шаблонов

Изучите современную верстку сайтов с нуля

Подробнее

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий