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

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

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

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

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

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

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

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

В данной статье мы рассмотрим:

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

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

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

Программы для оптимизации картинок

  • Photoshop
  • ImageOptim
  • JPEG Mini

Плагины оптимизации картинок WordPress

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

Оптимизация картинок онлайн

  • TinyPNG
  • Optimizilla
  • Bulkresizephotos

SEO оптимизация картинок

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

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

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

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

Оптимизируйте длину и ширину картинки

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

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

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

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

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

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

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

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

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

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

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

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

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

Для изображения размером 500х300 пикселей современные требования Гугл и иных сервисов что-то около 30-50 Килобайт.

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

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

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

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

Программы для оптимизации картинок

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

Откройте файл и перейдите FileExportSave for Web.

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

Photoshop - Сохранить для веб - png
Изображение s.salvador с веб-сайта Freepik Фотошоп — Сохранить для веб — png

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

Photoshop - Сохранить для веб - jpeg
Изображение edvaldocostacordeiro с веб-сайта Pixabay Фотошоп — Сохранить для веб — jpeg

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

ImageOptim

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

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

JPEG Mini

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

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

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

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

Плагины оптимизации картинок WordPress

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

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

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

Smush Image Compression and Optimization

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

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

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

EWWW Image Optimizer

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

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

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

TinyPng

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

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

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

ShortPixel

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

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

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

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

Оптимизация картинок онлайн

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

TinyPNG

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

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

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

Optimizilla

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

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

Bulkresizephotos

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

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

SEO оптимизация картинок

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

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

Добавьте атрибут Alt и Описание
Добавьте атрибут Alt и Описание

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

Трафик из раздела Изображения Google
Трафик из раздела Изображения поисковых систем

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

Заключение

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

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

В этом методе вы можете оптимизировать картинки в Фотошопе и до-оптимизировать их на веб-сайте при помощи плагина.

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

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

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

  • Как подключить WordPress к CDN Cloudflare

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

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

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

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

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