Оптимизация изображений для сайта

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

Содержание:

1.  Зачем нужно оптимизировать фото и картинки
2. Как правильно оптимизировать векторные изображения
3. Как оптимизировать изображения растрового типа
4. Как правильно сжимать данные — работа с разными форматами
5. Как и зачем создавать мета-данные
6. Советы для оптимизаторов

Зачем нужно оптимизировать фото и картинки

Вес изображений, размещённых на веб-ресурсе, оказывает влияние на скорость загрузки страницы и, как следствие, поведение пользователей. По данным исследований, оптимальным для загрузки страницы считается время 1-2 секунды, а нетерпеливые посетители готовы выдержать максимум 3 секунды, а если ждать придется дольше — покидают сайт, отправляясь за нужной информацией к конкурентам. Оптимизация изображений заключается в уменьшении веса картинок, что оказывает позитивное воздействие на быстродействие ресурса.

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

Как правильно оптимизировать векторные изображения

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

Основной формат, применяемый в векторной графике — svg, его можно вставлять непосредственно в текстовом редакторе, а затем, создав тег "svg", перенести на страницу.

Как оптимизировать изображения растрового типа

К этой категории относят иллюстрации, у которых для отрисовки используют пиксели. Каждый элемент такой картинки содержит информацию о цвете и прозрачности. Вес одного пикселя составляет 4 байта. Зная эту информацию, можно легко просчитать вес каждого изображения. К примеру, размер картинки 40 х40 =1600 пикселей. Отсюда 1600 пикселей х 4 байта = 6 400 байтов. Большое количество деталей характерно для фотографий — для них нельзя применять векторную графику.

Чтобы избежать потери качества иллюстраций, используют следующие приемы:

• Снижение глубины цвета — каждый канал имеет 256 оттенков, что соответствует 2500 цветам. Ограничив палитру 256 цветами, можно уменьшить вес пикселя с 2 байтов до 4, что снизит вес картинки ровно в 2 раза.
• асштабирование — большинство администраторов веб-ресурсов переносят на свой ресурс изображения в том размере, который находят в интернете, а уменьшает их отображение браузер. Этим грешат не только блоги и личные страницы, но и довольно серьезные ресурсы. Для выяснения совпадения отображаемого и фактического размеров стоит использовать Инструменты, предоставленные оптимизаторам разработчиками Chrome — нужно навести курсор и сравнить значения. Если размер фото больше, чем нужно, значит, посетители грузят никому не нужные лишние килобайты информации. При коррекции размера уменьшается и его вес. Этот метод настолько простой, что не требует ни программ, ни сложных знаний и навыков.

Как правильно сжимать данные — работа с разными форматами

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

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

Для сжатия данных можно применять разные инструменты:

• Imagify — универсальный сервис, который подходит для сжатия любых форматов. Он может использоваться в трех режимах: ультра, агрессивный и обычный. Первый режим позволяет сжать картинку максимально, что приводит к потере качества изображения, второй – это оптимальное соотношение между весом и качеством, а обычный — применяют при щадящей оптимизации.
• Compressor позволяет выполнить сжатие в двух режимах: lossy и lossless. Первый сжимает файл на 90%, второй – применяют для файлов png, при этом качество не страдает.
• ezGIF позволяет сжимать файлы в формате gif тремя способами: уменьшение размера в длину и ширину, обрезание лишнего и оптимизация. Кроме этого, в нем есть множество дополнительных возможностей: фильтры, надписи, водяные знаки, создание на основе видео гифки и другое.
• Jpegtran — предназначен для работы с файлами в формате jpeg. Данная утилита позволяет убрать из картинки метаданные — уровень сжатия подбирается вручную.
• Optipng — предназначен для работы с файлами в форме png, выполняет сжатие без потери качества за счет отключения ненужных функций. Примером может быть цвет, который лишний для черно-белых картинок.
• Gifsicle используют для форматов gif, позволяет выполнить обрезку и изменение размера.
• Pngquant – инструмент, предназначенный для форматов png, позволяет перевести 32-битные файлы в 8-битные, при этом качество, естественно, страдает.
• Compressjpeg — выполняет сжатия файлов в формате jpeg, позволяет загружать до 20 фото одновременно.

Как и зачем создавать мета-данные

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

При создании мета-тегов целесообразно использовать ключевые слова сайта – этот прием повышает его позицию в поисковой выдаче.

Мета-теги включают:

• название — оно должно быть понятным и лаконичным, для написания используют латиницу или перевод с помощью сервиса «Транслит».
• Title — текст, который появляется при наведении на картинку курсора, он является названием картинки, пишут на русском языке;
• Alt — краткое описание картинки, оно должно быть информативным и емким, хороший вариант — включение ключевых слов без переспама.

Допускается, чтобы содержимое Title и Alt совпадало, но для SEO оптимизации важно, чтобы они не остались пустыми. Также важный момент – все мета-теги должны выглядеть естественно, переспам негативно повлияет на рейтинг веб-ресурса.

Советы для оптимизаторов

Исходя из всего вышесказанного, можно составить список советов, которые наверняка пригодятся каждому оптимизатору:

• с помощью оптимизации можно существенно уменьшить вес изображения, что окажет позитивное воздействие на скорость быстродействия. Вес изображения оказывает прямое влияние на скорость загрузки и пользовательское поведение;
• при использовании на сайте логотипов, знаков, текстов и других иллюстраций такого типа уместной будет векторная графика. Сжатие таких файлов выполняют с помощью svgo;
• для иллюстраций и фото на сайте уместно использовать растровую графику, передающую мелкие детали с помощью пикселей. Вес каждого изображения рассчитывают по формуле: ширина х длина х на 4 байта (вес 1 пикселя);
• ограничение палитры приведёт к уменьшению цветов для передачи, что уменьшит вес картинки в разы;
• использование дельта-кодирования позволяет уменьшить количество оттенков, исключив те из них, которые находятся в неразличимом для человеческого глаза соседнем диапазоне — для достижения этого эффекта между пикселями задают дельту;
• масштабирование изображения позволяет найти оптимальный размер для отображения на веб-ресурсе. Слишком большие размеры перегружают трафик пользователей и уменьшают скорость загрузки.
• для нормальной загрузки страниц важно правильно подобрать подходящий формат файла: для анимации это будет gif, для фото с мелким деталями и высокой прозрачностью —png, во всех остальных случаях уместен jpeg.
• для сжатия необходимо пользоваться онлайн инструментами, подбирая их в зависимости от формата своего файла;
• заполненные мета-данные Title и Alt оказывают позитивное влияние на поисковую выдачу, помогая роботам понять, что изображено на картинках и о чем идет речь на сайте.

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