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

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

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

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

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

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика оптимизации сайта: ускорение загрузки Вашего сайта в разы

Узнайте как ускорить загрузку сайта .

Научиться

Метки:

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

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

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree