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

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

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

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

Согласно исследованию Strangeloop, каждая секунда задержки в загрузке страницы вызывает:

• 7% падение продаж,
• 11% меньше просмотров страниц,
• Посетители сайта удовлетворены на 16% меньше.

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

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

Содержание:

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

• Оптимизируйте ширину и высоту изображения
• Выберите подходящий формат изображения
• Оптимизируйте размер изображения в Килобайтах

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

Программы для оптимизации изображений

• Photoshop
• ImageOptim
• JPEG Mini

Плагины оптимизации изображений Вордпресс

• Smush Image Compression and Optimization
• EWWW Image Optimizer
• TinyPng
• ShortPixel

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

• FreeConvert
• TinyPNG
• Bulkresizephotos
• Optimizilla

SEO оптимизация изображений

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

Перед публикацией картинки на сайте решите три вещи:

• Физический размер изображения (длина и ширина),
• Формат изображения (jpeg, png, webp или другие форматы),
• Размер изображения (в Килобайтах).

С хорошо подобранными параметрами вы можете уменьшить размер картинки в 5-10 раз по сравнению с первоначальным.

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

Если вам нужно поместить изображение, которое займет 1/3 экрана, используйте картинку нужного размера, например, 400х300 Пикс.

Не публикуйте картинки бóльшего размера, чем это требуется.

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

То есть вместо оригинального размера может использоваться меньший размер.

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

Существует несколько форматов изображений, которые используются для публикации изображений в интернете. Самые популярные — JPEG и PNG.

JPEG — формат, который использует сжатие с потерями (lossy) и не поддерживает прозрачность. В зависимости от степени сжатия, эти картинки можно оптимизировать без потери качества изображения.

PNG — сжатие без потерь (lossless) и поддерживает прозрачность.

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

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

WEBP — новый формат изображений. Вордпресс начал поддерживать этот формат начиная с версии 5.8. Алгоритм сжатия этого формата позволяет сохранять изображения в качестве jpeg, но с гораздо меньшим весом. Используйте этот формат вместо формата jpeg.

Оптимизируйте размер изображения в Килобайтах

Чем меньше размер изображения в Килобайтах, тем ниже качество картинки.

Для важных изображений используйте более высокое качество, для второстепенных изображений или если вы используете прозрачный слой / оверлей, используйте более низкое качество.

Для картинки размером 400х300 пикселей современные требования Гугл и других сервисов что-то около 20-40 Килобайт.

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

После того, как вы определились с размером и форматом, выберите способ, которым вы хотите оптимизировать изображения.

• Вы можете сделать это на компьютере с помощью разных программ и загрузить на сайт
• Оптимизировать изображения на сайте с помощью плагина
• Оптимизировать в интернете с помощью специальных сервисов

Многие онлайн сервисы оптимизации поддерживают массовую оптимизацию изображений. На бесплатных тарифах обычно существует ограничение на количество изображений или на объем.

Программы для оптимизации изображений

Фотошоп, Иллюстратор и некоторые другие программы Adobe имеют инструмент оптимизации изображений.

Откройте файл и перейдите File — Export — Save for Web.

Если вы хотите сохранить изображение в формате png, выберите PNG-8, выберите количество цветов изображения и метаданные, которые вы хотите оставить в конечном файле:

Если вы будете сохранять в png, то под выбором формата есть настройки модели. Я использую эти настройки, вы можете попробовать другие:

No Dither хорошо справляется с разными цветами, но плохо с градиентом. Pattern хорошо с градиентом, но хуже с цветами, на некоторых цветах появляются артефакты.

Подберите лучшую комбинацию для каждого изображения.

Если вы хотите сохранить изображение в формате jpg, то выберите JPEG, выберите качество изображения или готовую настройку и метаданные, которые вы хотите оставить в итоговом файле:

В Фотошопе в версиях после 2023 года появилась поддержка формата webp.

Бесплатные альтернативы Фотошопу — программы Paint.net и GIMP.

ImageOptim

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

Альтернатива для Windows — Trimage.

JPEG Mini

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

Вы можете установить триал версию программы на компьютер, или купить плагины для Фотошопа и Лайтрума. После триального периода нужно купить платную версию.

Программа стоит 59$, программа и плагины для Фотошопа и Лайтрума стоят 89$.

Также есть платное подключение по API для разработчиков.

Плагины оптимизации изображений Вордпресс

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

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

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

Smush Image Compression and Optimization

Плагин создан разработчиком WPMU DEV, регулярно обновляется и имеет более миллиона установок. Оптимизирует jpeg, png и gif форматы. Изображения до 5 Мб оптимизируются бесплатно в любом количестве.

Оптимизирует до 50 изображений за один раз. Автоматически находит изображения, которые замедляют сайт. Плагин может откладывать загрузку изображений до того, как они не появятся в видимой части экрана (lazy load).

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

EWWW Image Optimizer

Другой популярный плагин, регулярно обновляется, тоже имеет более миллиона установок. Плагин бесплатно оптимизирует изображения на вашем сервере или платно на своем сервере.

Работает с форматами jpg, png и pdf. После оптимизации выбирает наиболее подходящий формат для показа на сайте, — jpg, png или gif.

Плагин может автоматически конвертировать jpg и png изображения в формат webp.

ShortPixel

Относительно новый плагин, ставший популярным. Оптимизирует форматы jpeg, png, gif и pdf на своем облаке.

В бесплатной версии позволяет оптимизировать до 100 изображений в месяц. Если нужно оптимизировать больше изображений, нужно купить одну из платных версий. Можно купить подписку на месяц или сделать единоразовую оплату за 10.000, 30.000, 50.000 или 170.000 изображений.

По этой ссылке вы получите еще 100 бесплатных оптимизаций в месяц каждый месяц.

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

TinyPng

Простой и понятный плагин, регулярно обновляется, имеет более 200.000 установок. Подключается по API к серверу TinyPNG, на котором оптимизируются изображения.

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

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

Также оптимизация картинок есть в некоторых плагинах кеша, например, WP Rocket и Powered Cache.

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

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

FreeConvert

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

Выберите один или несколько файлов для конвертации, выберите конечный формат изображений (WebP), и нажмите конвертировать.

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

TinyPNG

TinyPng — бесплатный web сервис оптимизации изображений, который использует lossy компрессию для уменьшения PNG и JPEG файлов. В бесплатной версии есть ограничение 20 изображений. Каждое изображение не должно превышать 5 Мб.

Перейдите на сайт TinyPNG и загрузите ваши изображения. Сервис оптимизирует картинки и даст вам ссылку на скачивание.

Для разработчиков есть подключение по API для автоматической оптимизации изображений.

Bulkresizephotos

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

Сервис уменьшает размер и/или объем изображений, и может конвертировать форматы изображений в JPEG, PNG или WEBP.

Optimizilla

Optimizilla — онлайн сервис оптимизации изображений для сайта. Использует комбинацию алгоритмов оптимизации и lossy сжатия изображений. Уменьшает размер JPEG и PNG форматов до минимально возможного, сохраняя нужный уровень качества изображения.

Можно загрузить до 20 картинок. В сервисе есть настройка для выбора качества изображения после компрессии, и слайдер для сравнения изображений До и После.

Сервисы для конвертации изображений

В интернете существует множество сервисов для конвертации изображений из одного формата в другой.

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

Вот поисковый запрос для поиска таких сервисов: JPEG → WEBP.

Если вам нужны другие форматы — измените поисковый запрос.

SEO оптимизация изображений

После того, как вы оптимизировали размер и объем изображения и выбрали подходящий формат, назовите готовый файл так, чтобы было понятно, что изображено на картинке. Не называйте файл Untitled.jpeg, Без-названия.png или 123.webp.

Закачайте картинку на сайт и добавьте атрибуты Alt и Description. Эти теги говорят поисковым системам что изображено на картинках. Заполните как минимум поле Alt.

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

Также эти теги помогают пользователям с нарушениями зрения, так как их программы чтения с экрана могут читать им теги Alt и Title.

Заключение

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

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

Если вы начинаете новый сайт, то оно того стоит.

После оптимизации в Фотошопе картинки имеют маленький размер, так что до-оптимизацию на сайте с помощью плагина можно не делать.

Хороший результат у плагинов TinyPNG и ShortPixel. EWWW Image Optimizer хороший плагин, но его сложнее настроить.

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

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

• Как подключить Вордпресс к CDN Cloudflare

Читайте также:

1. Где брать бесплатные картинки в хорошем качестве для публикации на сайте без нарушения авторских прав
2. SEO для Вордпресс. Подробная инструкция
3. 12 советов для SEO оптимизации Блога

Надеюсь, статья была полезна. Оставляйте комментарии.