Оптимизация изображений с помощью сервисов в 2020 году

Какой размер страниц на вашем сайте? Сколько грузится ваш сайт?
Согласно исследованию, у вашего сайта есть только 7 секунд, чтобы привлечь внимание посетителей. Смогли привлечь внимание? — Замечательно! Есть шанс, что этот пользователь снова зайдет на ваш сайт.

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

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

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

Но, такой кнопки не существует в природе. А вся работа по оптимизации сайта выполняется в комплексе.

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

На большинстве сайтов значительный вес страницы создают изображения. Иногда, это около 60% от общего веса.

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

А что еще загружается на сайте? Дальше по времени загрузки идут скрипты, стили CSS и шрифты.

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

Какие преимущества оптимизации изображений

  1. Не занимают много места на сервере
  2. Уменьшается вес страницы
  3. Более быстрое время загрузки на разных устройствах
  4. Повышение SEO из-за быстрой загрузки страниц
  5. Вы не превышаете использование мобильного трафика согласно тарифного плана вашего провайдера

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

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

Графические форматы файлов, которые поддерживаются большинством популярных веб-браузеров являются: Graphic Interchange Format (GIF), Joint Photographic Experts Group (JPEG), Portable Network Graphics (PNG).

Формат GIF

Формат GIF использует алгоритм сжатия, который делает размера файла маленьким для быстрой загрузки. GIF ограничен 256 цветами (8 бит), поддержкой прозрачности и черезстрочной графики. Также есть возможность создавать анимированную графику.

Преимущества GIF:

  • Наиболее широко поддерживаемый графический формат
  • Схемы выглядят лучше в этом формате
  • Поддержка прозрачности

Не анимированные изображения в этом формате лучше использовать для фона, коробок, кадров и др. графических элементов, которые выглядят отлично с помощью 8-битного цвета. Такие изображения имеют очень маленький вес, по сравнению с теми же файлами в формате JPG. Но, это преимущество не распространяется на анимированные файлы в формате GIF.

Формат JPG/JPG

Файлы JPG сжаты, но поддерживают «истинные цвета» (24 бит) и являются предпочтительным форматом для изображений, где вопрос о качестве очень важен . JPEG поддерживает прогрессивный формат, который позволяет почти мгновенно видеть изображение, а качество его улучшается, когда закончится загрузка.
Форматы JPG или JPEG — используются для реалистичных изображений и фотографий.
Сжатыми изображениями в формате JPG можно управлять, получая различные уровни качества изображения и размеры файла.

Преимущества JPG:

  • Большое сжатие означает более быструю скорость загрузки изображения.
  • Производит отличное качество для фотографий и сложных рисунков.
  • Поддержка 24-битного цвета.

Формат PNG

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

Преимущества PNG:

  • Поддерживает 24-битный цвет
  • Позволяет добавить текстовое описание изображений для поисковых систем
  • Поддерживает прозрачность
  • Схемы выглядят лучше, чем в JPG

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

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

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

Всегда рекомендуется оптимизировать изображения перед их загрузкой на сайт. Вы можете использовать графические редакторы для ПК (Photoshop, Gimp и др.) или сервисы (TinyPNG, Kraken, Optimizilla, Compressor и др.).

Читайте:  Как настроить и проверить адаптивность сайта? Вам помогут Медиа-запросы и Search Console

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

Squoosh.app

squoosh.app
Сервис squoosh.app
  • Загрузка только одного изображения для обработки
  • Выбор качества изображения
  • Есть предварительный просмотр оптимизированного изображения
  • Выбор графических форматов для сохранения
  • Изменение размера изображения
  • Изменение цветовой палитры (от 0 до 255) — приводит к уменьшению веса изображения, но на изображении возможно появление областей со сплошным цветом и общая потеря деталей
  • Использование дизеринга (дитеринг) — позволяет передать больше деталей и устраняет артефакты после применения оптимизированной палитры

В компьютерной графике дизеринг используется для создания иллюзии глубины цвета для изображений с относительно небольшим количеством цветов в палитре. Отсутствующие цвета составляются из имеющихся путём их «перемешивания». Например, если необходимо получить отсутствующий в палитре фиолетовый цвет, его можно получить, разместив красные и синие пиксели в шахматном порядке; оранжевый цвет может быть составлен из красных и желтых точек.

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

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

Перейти на сайт


Tinypng.com

Сервис tinypng
Сервис tinypng
  • Поддерживаются: JPG, GIF и PNG.
  • Нет выбора опций
  • Максимальное количество изображений для пакетной обработки — 20
  • Максимальный размер одного изображения — 5 Мб.
  • Изображения можно сразу скачать или загрузить на сервис Dropbox

Перейти на сайт


Compressor.io

Сервис compressor
  • Загрузка только одного изображения для обработки
  • Поддерживаются: JPG, GIF и PNG.
  • Есть предварительный просмотр оптимизированного изображения
  • Оптимизация изображений с потерями (lossy) и без потерь (lossless).
  • Изображение можно сразу скачать или загрузить на сервис Dropbox, Google Drive

Перейти на сайт


Punypng.com

  • Поддерживаются: JPG, GIF и PNG.
  • Максимальный размер одного изображения 500 Кб.
  • Максимальное количество изображений для пакетной обработки — 20

Сервис отказался загружать изображения для обработки.

Перейти на сайт


Compressnow.com

Сервис compressnow.com
Сервис compressnow.com
  • Поддерживаются: JPG, GIF и PNG.
  • Максимальное количество изображений для пакетной обработки — 10
  • Выбор качества изображения
  • Есть предварительный просмотр оптимизированного изображения
  • Скачивание оптимизированных изображений в виде архива

Перейти на сайт


Imagecompressor.com

  • Поддерживаются:JPEG и PNG
  • Максимальное количество изображений для пакетной обработки — 20
  • Выбор качества изображения — для каждого загруженного изображения можно отдельно задать качество и предварительно просмотреть

Перейти на сайт


Imagify.io

Сервис imagify.io
Сервис imagify.io
  • Максимальный размер изображений для загрузки — 2 Мб. (ограничение снимается при создании аккаунта)
  • Три уровня сжатия: обычный, агрессивный и ультра

Перейти на сайт


Kraken.io

  • Три уровня сжатия: с потерями (lossy), без потерь (lossless) и Expert (произвольные настройки)
  • Импорт изображений с облачных сервисов (Box, Dropbox, Google Drive)
  • Пакетная обработка изображений
  • Нет предварительного просмотра
  • Скачивание обработанных изображений в виде архива (ZIP) или загрузка на сервис Dropbox

Перейти на сайт

Сравнение сервисов

Для изучения возможностей сервисов я взял исходное изображение размером 2176×1360 точек, вес 573,60 Кб., формат JPG и попробовал оптимизировать его.

Результаты:

СервисКачествоВес (Кб.)Эффективность (%)
squoosh.app6022661
imagecompressor.com22460
compressnow.com60229,7758
kraken.io (режим lossy)без потери качества493.9411,82
kraken.io (режим expert)60279,4250,12
tinypng.com31146
imagify.io357,236,23
compressor.io528,278

Обновление к статье

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

Возможности сервиса:

  • Сжатие изображений
  • Изменение размера
  • Обрезка изображений
  • Конвертация изображений в другой формат
  • Редактор фото
  • Наложение водяного знака
  • Генератор мемов
  • Вращение изображения
  • Преобразование страниц HTML в изображения

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

Выводы

Согласно моим результатам я рекомендую использовать следующие 4 сервиса для оптимизации изображений:

squoosh.app — есть опции сжатия, эффективная оптимизация с хорошим качеством изображений на выходе.

compressnow.com и imagecompressor.com — пакетная обработка изображений, баланс между качеством и сжатием.

kraken.io — пакетная обработка изображений, возможность задавать уровень сжатия для каждого изображения в пакете.

iloveimg — набор функций и пакетная обработка изображений, хорошее качество на выходе.

Подписаться
Уведомить о
guest

0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии