Оптимизация фото: 3 способа оптимизации изображений для сайта без потери качества

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

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

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

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

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

Векторные изображения имеют основный формат svg. Файл svg можно создать прямо в текстовом редакторе с помощью тега <svg>. Также разметку svg встраивайте в веб-страницу.

Уменьшить размер векторных файлов можно, оптимизировав их с помощью решения svgo. Он очищает файлы от бесполезной информации: комментариев и скрытых ненужных элементов. Файлы становятся меньше, но качество отрисовки остается на прежнем уровне.

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

Растровые изображения состоят из пикселей. Каждый пиксель содержит информацию о цвете и прозрачности в цветовой модели RGBA (red, green, blue, alpha — прозрачность). В браузере 256 оттенков на каждый канал цвета, который в пересчете занимает 8 битов. Каждый пиксель весит: 4 канала х 8 бит = 32 бита или 4 байта. 

Легко рассчитать вес фотографий самостоятельно, зная размер в пикселях. Допустим, изображения имеет размер 50 х 50 пикселей. Это 2 500 пикселей. 

1 пиксель = 4 байта. 

2500 пикселей х 4 байта = 10 000 байтов 

10 000 байтов / 1024 = 10 КБ

Пример расчета веса изображений для разных размеров: 

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

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

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

• 
  Масштабируем изображения. На большинстве сайтов используются изображения большего размера, чем нужно. Администраторы вставляют картинки тех размеров, что у них есть, а уменьшение их размера до требуемых выполняется со стороны браузера. Выясните, совпадает ли фактический и отображаемый размеры фотографий на вашем ресурсе с помощью Инструментов разработчиков Chrome. Наведите курсор и сравните значения.

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

Размер изображения больше всего лишь на 10 пикселей, но вес прибавляется существенно:

Сжимаем данные 

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

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

Сервисы для оптимизации изображений — ТОП-9

• Compressor.io

Онлайн-сервис для сжатия картинок с уменьшением веса до 90%. Работает с форматами JPEG, PNG, SVG, GIF и WEBP. Имеет три степени сжатия: • Lossy – с потерей качества, дает максимальную компрессию. • Lossless – без потери качества. • Custom – настройки задаются вручную, можно менять размер по высоте и ширине, ориентацию, формат файла. Поддерживается пакетная загрузка изображений, есть предпросмотр. Данные выгружаются на жесткий диск или в облачные хранилища Dropbox, Google Drive. В платной версии Pro есть расширенный набор ручных настроек, возможность автоматического переименования файлов.

• Compressjpeg.com

Очень простой редактор, сжимает картинки в формате JPEG, умеет преобразовывать PNG в JPEG, JPEG в PNG, SVG в PNG, работает с GIF-файлами. Загрузка до 20 картинок одновременно, скачать файлы можно в ZIP-архиве. Сервис позволяет корректировать степень сжатия для каждого изображения с предварительным просмотром.

• Imagify.io

Функциональный инструмент для работы с изображениями JPEG, PNG, PDF и GIF. В бесплатной версии максимальный размер файла до 2 МБ, в платной – без ограничений. Интегрируется с WordPress, позволяя обрабатывать картинки из панели управления сайтом. Файлы можно загружать через API по протоколу HTTPS. Доступны три режима: • Обычный – режим для щадящей оптимизации без потери качества. • Агрессивный – сжатие до 50% с потерей качества. • Ультра – экстремальное сжатие. Рекомендуется для изображений с минимальным количеством деталей. Настройки позволяют выставлять ширину, высоту, % от оригинального размера. Есть функция восстановления исходных файлов.

• Squoosh.app

Работает с форматами JPEG, PNG, WEBP, позволяет обрабатывать по одному изображению с предпросмотром. В расширенных настройках есть регулировка цветности от 0 до 256 и возможность раздельного изменения палитры для разных областей изображения. Вручную можно задать квантирование, сглаживание и другие параметры. Для улучшения качества отображения и устранения артефактов сжатия после оптимизации применяется дизеринг.

• WebP Converter

Набор утилит от Google Page Speed для преобразования картинок и GIF-файлов в формат WEBP. Инструмент поддерживает 2 типа перекодирования: • Без потерь – объем данных меньше на 30% по сравнению с файлами JPEG, PNG, GIF. При этом сохраняется эквивалентное визуальное качество. • С потерями – существенно сокращается размер файлов, при этом инструмент прогнозирует результат сжатия. На основе прогноза адаптивно распределяются области, в которых допускается максимальная потеря данных (однородный фон, мало деталей), и области, где важно сохранить визуальную полноту картинки. Утилиты подходят для Windows, Linux, и Mac OS X.

• ILoveIMG.com

Онлайн-редактор изображений с возможностью их обработки и оптимизации. Сжимает JPEG, PNG, GIF, а так же преобразует сырые форматы TIFF и RAW в JPEG. В сервисе есть возможность добавления водяных знаков, конвертации HTML-страницы в изображение, обрезки, поворота кадра. Файлы можно загружать из Dropbox и Google Drive, предусмотрена пакетная обработка. Изображения сжимаются до наименьшего возможного размера без потери визуального качества. Платформа предлагает плагин для WordPress.

• ezGIF.com

ezGIF работает с форматами GIF, JPEG, PNG, WEBP. Для каждого формата предусмотрено несколько способов оптимизации: • GIF – сжатие за счет дизеринга, за счет уменьшения количества цветов в каждом кадре, за счет пропуска каждого n-ного кадра. • JPEG – оптимизация файла при удалении мета-данных, сжатие по размеру, сжатие по качеству от 0 до 100. • PNG, WEBP – сжатие до минимально возможного размера при сохранении качества картинки. В сервисе есть дополнительные опции: регулировка скорости, фильтры, надписи, водяной знак и создание новой гифки из видео, картинок или нескольких других гифок.

• Jpegtran

Оптимизирует изображения в формате JPEG. Утилита входит в libjpeg. С ее помощью убираются метаданные из изображения. При сжатии указывайте значение самостоятельно. Наилучшее соотношение определяется методом подбора значения от 5 до 95. Удобное средство для пакетной обработки однотипных изображений (для каталогов, карточек товаров).

• Pngquant.org

Может сжимать изображения PNG с потерями качества. Инструмент конвертирует 32-битные файлы в 8-битные с использованием векторного квантования. Обработка уменьшает размер файла в 2 и более раз. Сохраняется полная альфа-прозрачность. Применяется алгоритм подавления шума.

Прописываем мета-данные 

Название файла. Все картинки перед загрузкой на сайт называйте понятными словами, используя латиницу. Если файлы уже были названы по-русски, переведите названия, используя сервис «Транслит». Избегайте спама в названии и нечитаемых символов.

Поле Title. Когда пользователь наводит курсор на картинку на сайте, ему подсвечивается текст, прописанный в поле title. Прописывайте в это поле название фотографии. Пишите на русском.

Поле Alt. Указывайте описание файла. Если он не загрузится, пользователь увидит описание из Alt. Поля title и alt могут совпадать по описанию. Лучше их заполнить одинаково, чем оставить пустыми. Обязательно добавляйте в мета-теги ключевые слова, но избегайте переспама. Делайте описания естественными и информативными.

Шпаргалка

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

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




• Растровые изображения — для иллюстраций. Растровая графика состоит из пикселей, каждый из которых весит 4 байта. Определяйте вес файла по формуле: длина х ширина х 4 байта. 




• Ограничьте палитру. В каждом пикселе закодировано 4 канала модели RGBA и используются более 2500 оттенков. Часто так много цветов не нужно, а ограничение палитры позволит уменьшить вес в два раза. 




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




• Масштабируйте изображения, чтобы привести их к допустимому размеру. Размещая на сайтах картинки большего размера, вы вынуждаете пользователей скачивать лишние данные. Я оптимизирую изображения даже на 10 пикселей больше, чем требуется. Проверяйте соответствие размеров в Инструментах разработчика Chrome. 




• Используйте подходящие форматы: gif — для анимации, png — для прозрачности и для отображения мелких деталей, jpeg — для остального. Для сжатия воспользуйтесь сервисами: gif — ezGIF, Gifsicle, для png — Compressor, Optipng, Pngquant, для jpeg — Imagify, Jpegtran, Compressjpeg. 




• Называйте файлы латиницей и понятным названием. В поле Title указывайте название картинки, в поле alt — описание. Title и Alt могут совпадать. Пишите понятные описания для людей, включайте ключевые слова, избегайте переспама.

Материал подготовила Светлана Сирвида-Льорентэ.

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

В интернете достаточно статей и проектов для ресайза изображений. Почему же нужна еще одна? В этой статье я расскажу почему нас не удовлетворили текущие решения и пришлось пилить собственное.

Проблема

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

Мы решаем две проблемы. Первая проблема в том, что изображения часто не пережаты под нужное разрешение, то есть клиенту приходится не только качать ненужные ему данные, но и тратить ресурсы CPU на ресайз картинки силами браузера. Решение: отдавать пользователю картинки в том разрешении, в котором они будут показаны в браузере.

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

В качестве примера, как делать не нужно можно посмотреть на главную страницу такого известного сайта, как github.com. При весе страницы 2 Мб, 1.2 из них занимают бесполезные картинки, которые можно оптимизировать и не загружать.

Второй пример — наш Хабр. Скриншот приводить не буду, что бы не растягивать статью, результаты по ссылке. На хабре картинкам изменяют разрешение на нужное, но не оптимизируют их. Это позволило бы сократить их размер на 650 Кб (50%).

Во многих местах на сайте нужны уменьшенные версии картинок, например чтобы в ленте новостей показывать уменьшенную версию картинки новости. Мы это реализуем следующим образом— на нашем сервере хранится только картинка в максимальном качестве, а при необходимости вставить ее отресайженную версию надо дописать в конец урла требуемое разрешение через «@». Тогда запрос отправится не за файлом, а на наш ресайзящий бэкенд и вернет отресайженную и оптимизированную версию картинки.

Распространенные решения

Все, что будет сказано далее относится к JPEG и PNG изображениям, т.к. это наиболее популярные форматы в интернете.

Вбив в google что-то вроде «image resize backend» вы увидите, что в половине случаев предлагается использовать Nginx, другая часть— это различные самописные сервисы, чаще всего Node.js.

Из nginx, а точнее из libgd, которая используется в модуле nginx’а мы смогли выжать на тестовой картинке 63 RPS, что неплохо, но хотелось бы быстрее и больше гибкости. Graphicsmagick тоже не подходит, т.к. его скорость работы слишком низкая. К тому же оба эти решения выдают не оптимизированные изображения. Большинство других решений, например на Node предлагают использовать Sharp для ресайза, MozJPEG для оптимизации JPEG изображений и pngquant для оптимизации PNG.

Мы и сами достаточно долгое время пользовались самописной связкой из Nod’ы, Libvips и MozJPEG c pngquant, но в один из дней задались вопросом— «А можно ли сделать ресайз быстрее и менее требовательным к ресурсам?».

Спойлер: можно. 😉

Теперь хорошо бы выяснить, как можно ускорить наше приложение. Изучив код приложения мы выяснили, что imagemin, который использовался для оптимизации, а в частности его плагины MozJPEG и pngquant при работе дергают одноименные утилиты через os.Exec. Будем это дело однозначно выпиливать и использовать только биндинги к Cи’шным либам. Для ресайза использовался модуль Sharp, который представляет собой биндинг к С библиотеке Libvips.

Наша реализация

Гуглеж показал, что Libvips по прежнему лидер по скорости и конкурировать с ним может только OpenCV. Значит будем использовать Libvips и в нашей реализации, это уже проверенное решение и он имеет готовый биндинг для Go. Пора попробовать написать прототип и посмотреть что из этого выйдет.

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

Быстро написали прототип, протестировали и поняли, что несмотря на большее, чем в Sharp, количество внутренних крутилок, Libvips по-прежнему выдает на выход не оптимизированные изображения. С этим надо что-то делать. Опять обращаемся ко всемогущему гуглу и узнаем, что лучший вариант это по-прежнему MozJPEG. Тут начинают закрадываться сомнения, что мы сейчас напишем то же самое, что было на Node, только на Go. Но внимательно почитав описание MoZJPEG узнаем, что она является форком libjpeg-turbo и совместима с ней.

Выглядит очень многообещающе. Дело за малым — собрать свою версию Libvips, в которой jpeg-turbo заменен на версию от Mozila. Для сборки мы выбрали Alpine Linux, т.к. приложение все равно планировалось публиковать с помощью Докера и Alpine имеет очень приятный формат конфига пакета, очень похожий на используемый в Arch Linux.

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

Оригинальный JPEG 351×527 79 Кб	Оптимизированный 351×527 17 Кб

Собрали, протестировали. Теперь Libvips сразу при ресайзе выдает оптимизированную версию. То есть в Node версии версии мы сначала делали ресайз, а потом еще раз пропускали картинку через decoder-encoder. Теперь мы только делаем ресайз.

С JPEG разобрались, а что делать с png. Для решения этой задачи была найдена библиотека libpngquant. Она не очень популярная, несмотря на то, что консольная утилита pngquant, которая базируется на ней, используется во многих решениях. Так же к ней был найден биндинг на Go, немного заброшенный и с утечкой памяти, пришлось его форкнуть починить, дополнить документацией и всем остальным, что подобает приличному проекту. Libpngquant мы тоже собрали в виде Alpine пакета для простой установки.

Благодаря тому, что теперь изображение не требуется сохранять в файл для обработки c помощью pngquant мы можем немного оптимизировать процесс. Например не сжимать картинку при ресайзе в Libvips, а только после обработки в pngquant. Это позволит сохранить немного драгоценного процессорного времени. Надо ли говорить, что мы так же очень экономим благодаря тому, что вызов C библиотеки гораздо быстрее запуска консольной утилиты.

После того, как прототип был написан, протестирован на моем пк и выдавал приличные 25 RPS на мобильном двух ядерном проце, сжирая весь CPU, захотелось увидеть сколько можно выжать из него на нормальном железе. Запускаем код на шести ядерной машине, натравливаем Jmeter и WTF??? Получаем 30 RPS. Пробуем разобраться что за фигня.

Libvips сам реализует многопоточность, то есть нам нужно только инициализировать библиотеку и в дальнейшем мы можем безопасно обращаться к ней из любого потока. Но у нас почему-то Libvips работает в 1 поток, что ограничивает нас одним ядром. Еще 1 ядро занимает pngquant. Итого получается, что наша супер быстрая ресайзилка отлично работает только на ноутбуке разработчика, а на остальных машинах не может утилизировать все ресурсы. 😉

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

Все более или менее современные ядра Linux (3.9+ и 2.6.32-417+ в CentOS 6) поддерживают опцию SO_REUSE, которая позволяет использовать один порт нескольким экземплярам приложения. Данный подход удобнее, чем балансировка средствами стороннего ПО, такого как HAProxy, т.к. не требует конфигурации и позволяет быстро добавлять и убирать инстансы.

Поэтому мы использовали SO_REUSE и опцию «—scale» в Docker compose, которая позволяет указать количество запускаемых экземпляров.

Время мерить

Пришло время оценить результат наших трудов.

Конфигурация:

• CPU: Intel Xeon E5-1650 v3 @ 3.50GHz 6 cores (12 vCPU)
• RAM: 64 Gb (используется около 1-2 Gb)
• Кол-во воркеров: 12

Результаты:

FIle	Выходное разрешение	Node RPS	Go RPS
bird_1920x1279.jpg	800×533	34	73
clock_1280x853. jpg	400×267	69	206
clock_6000x4000.jpg	4000×2667	1.9	5.6
fireworks_640x426.jpg	100×67	114	532
cc_705x453.png	405×260	21	33
penguin_380x793.png	280×584	28	69
wine_800x800.png	600×600	27	49
wine_800x800.png	200×200	55	114

Больше бенчмарков (правда без сравнения с Node версией) на wiki странице.

Как видно переделывали ресайз мы не напрасно, увеличение скорости составило от 30 до 400% (в некоторых случаях). Если требуется ресайзить еще быстрее, то можно покрутить ручки «speed» и «quality» в libimagequant. Они позволят дополнительно сократить размер или увеличить скорость кодирования ценой потери качества изображения.

Код проекта на GitHub.

Биндинг Go к libimagequant так же на GitHub.

Бесплатный онлайн-оптимизатор изображений · Kraken.io

Станьте PRO и разблокируйте все потрясающие возможности Kraken.io PRO. Уже являетесь участником PRO? Войдите здесь.
Kraken.io PRO включает в себя: Полный доступ к API, веб-интерфейс PRO, плагины WordPress и Magento и облачное хранилище Kraken.io . 1. Выберите источник изображений0006

2. Выберите режим оптимизации.

Автоматическая ориентация изображения:

Авторизованные изображения

Подсудимым Chrama:

• 4: 2: 0
• 4: 2: 2
• 4: 2: 0
• 4: 2: 2
• 4: 2: 0
• 4: 2: 2
• 4: 2: 0
• 4: 2: 2
• 4: 2: 0
• 4: 2: 2
• 4: 2: 0
• 4: 2: 2
• 4: 2: 0
• 4: 2: 2
• 0030 4: 4: 4

3. Изменение размера ваших изображений (необязательно)

Стратегия:

Не измените размеры ▾

Ширина:

Высота:

Pro

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

Поделитесь своими результатами:

[[dropboxStatus]]

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

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

С потерями

Наша интеллектуальная оптимизация с потерями обычно дает экономию не менее 60% от первоначального веса файла; с экономией от 80% до 90% происходит часто. Наш интеллектуальный алгоритм с потерями по умолчанию был специально разработан, чтобы всегда создавать изображения выдающегося качества и никогда не допускать неприемлемого ухудшения качества. В большинстве случаев вы не сможете отличить оптимизированный результат от оригинала даже при ближайшем рассмотрении. Мы рекомендуем этот режим большинству наших пользователей и для большинства случаев использования.

Lossless

Этот режим позволит максимально уменьшить вес файла, не изменяя ни одного пикселя, отсюда и название «без потерь», означающее, что никакая информация не теряется. Используйте этот режим, если вам необходимо, чтобы изображение сохраняло 100 % исходной визуальной информации, например, для деликатных изображений бренда и маркетинговых материалов.

Эксперт

Расширенный режим предназначен для пользователей, которые уже знакомы с обработкой и оптимизацией изображений. Используя этот режим, вы можете установить различные уровни качества для оптимизации JPEG и PNG с потерями, сохранить определенные записи в метаданных EXIF ​​и автоматически ориентировать ваши изображения. Вы даже можете установить собственное значение субдискретизации цветности для изображений JPEG.

Стратегии изменения размера изображения

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

Точно

Изменить размер до точной ширины и высоты. Соотношение сторон не будет сохранено

Подогнать

Эта опция обрежет и изменит размер ваших изображений, чтобы они соответствовали желаемой ширине и высоте

Портрет

Будет установлена ​​точная высота, ширина будет скорректирована в соответствии с соотношением сторон

Пейзаж

Будет установлена ​​точная ширина, высота будет скорректирована в соответствии с соотношением сторон точный размер, который вы укажете, без искажений

Квадрат

Эта стратегия сначала обрежет изображение по его более короткому размеру, чтобы сделать его квадратным, а затем изменит его размер до указанного размера

Авто

Для данного изображения будет выбрана лучшая стратегия (книжная или альбомная) в соответствии с его соотношением сторон

Загрузить ZIP-архив, содержащий одно или несколько изображений (до 1 ГБ)

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

Для использования этой функции необходимо перейти на платный план. Наши подписки начинаются всего с 5 долларов США в месяц.

Оптимизированные изображения доступны для скачивания в течение 12 часов. Пользователи PRO могут получить доступ к своим изображениям в любое время через облачное хранилище Kraken.io.
Бесплатный веб-интерфейс имеет ограничение на размер файла 1 МБ.

Сравнение 9 лучших онлайн-инструментов для оптимизации изображений (данные реальных испытаний)

Контент Themeisle бесплатный. Когда вы покупаете по реферальным ссылкам на нашем сайте, мы получаем комиссию. Подробнее…

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

Тестирование и сравнение девяти лучших онлайн-инструментов для оптимизации изображений

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

Чтобы дать вам представление о том, насколько возможно сжатие, мы протестировали некоторые онлайн-инструменты для оптимизации изображений. Работа с двумя изображениями — одним JPG (примерный размер файла 1,3 МБ) и другим PNG (приблизительный 2,1 МБ).

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

Ниже приведены результаты наших экспериментов по оптимизации изображений:

Инструмент для сжатия	Сжатие изображения JPG (исходный размер ~1,3 МБ)	Процентное уменьшение в файле JPG	PNG Сжатие изображения (исходный размер ~2,1 МБ)	Процентное уменьшение в файле PNG
Сжать сейчас	0,04 МБ	99,97%	0,04 МБ **	99,98% **
Оптимизатор JPEG	0,0615 МБ	95,39%	Н/Д	Н/Д
Маленький PNG	0,1104 МБ	92%	0,3504 МБ	83%
Оптимизилла	0,112 МБ	91%	0,433 МБ	79%
JPEG. io	0,25944 МБ	79,57%	0,25908 МБ **	86,98% **
ИмиджРецикл	0,09421 МБ	92,78%	0,3984 МБ	80,41%
Compressor.io	0,055 МБ	95%	0,434 МБ	78%
Эзгиф	0,09526 МБ	92,7%	1,5 МБ	24,5%
Оптимизатор динамического привода	0,0803 МБ	93%	0,46 МБ	77%

** Результатом этого был файл JPG, поэтому это не настоящее сравнение 1 к 1, поскольку сжатие также включало преобразование из PNG ➡️ JPG.

Теперь давайте рассмотрим инструменты более подробно…

1. Сжать сейчас

Compress Now — отличный инструмент для оптимизации изображений, который позволяет сжимать три наиболее распространенных типа файлов изображений: JPG, GIF и PNG.

Он имеет несколько других полезных функций, в том числе тот факт, что он позволяет вам выбрать степень сжатия загружаемого изображения. Максимальный размер файла, который вы можете загрузить, составляет 9 МБ = 9000 КБ, что значительно превышает наши два примера изображений.

При выполнении теста я установил степень сжатия на 65%, и невооруженным глазом я едва мог различить оригинальную и гораздо более легкую сжатую версию. Сжатое изображение было немного менее блестящим. Когда я говорю smidgeon, я имею в виду, что мне было бы трудно сказать, что есть что, если вы перетасуете их и попросите меня выбрать сжатый против оригинала.

Единственным недостатком этого онлайн-оптимизатора изображений является то, что, несмотря на то, что вы можете передать все три типа файлов изображений (JPEG, PNG, GIF) в инструмент, он выдаст только файлы JPEG на другом конце.

Другими словами:

✖️ PNG ➡️ PNG
✖️ GIF ➡️ GIF
✔️ PNG, JPEG, GIF ➡️ JPEG

Если вас это устраивает, Compress Now берет корону за лучший компрессор изображений без потери качества. Цифры не врут. Посмотрите ниже.

Сжатие:

👉 Сохранение файла изображения JPEG: 99,97%
👉 Сохранение файла изображения PNG: 99,98% (выходной файл — JPEG)

2. Оптимизатор JPEG

JPEG Optimizer — хорошее решение, если все, что вам нужно, — это сжимать изображения JPEG, потому что, как следует из названия, нет поддержки файлов PNG или GIF.

Большинству из нас подойдет сжатие по умолчанию 65%, хотя веб-сайт может сжимать изображения в диапазоне от 0 до 99%. Используя только настройку по умолчанию, я смог сжать изображение почти до половины исходного размера, и качество заметно не изменилось.

При желании вы также можете установить максимальный размер изображения (по умолчанию 4 мб) и изменить его размеры. Как только инструмент сожмет изображение, вы сможете загрузить его и использовать в любом месте.

Сжатие:

👉 Сохранение файла изображения JPEG — 95,39%

3.

Крошечный PNG

Надежный инструмент Tiny PNG с легкостью сжимает форматы изображений JPEG и PNG, позволяя загружать до 20 изображений за один раз. Размер каждого файла может достигать 5 МБ. Для больших файлов вы должны быть платным клиентом.

После сжатия изображения можно загрузить на компьютер или сохранить в Dropbox. Tiny PNG также упрощает работу пользователей WordPress с помощью бесплатного плагина. Чтобы сравнить плагины оптимизации изображений для WordPress, посмотрите наш предыдущий пост.

Сжатие:

👉 Сохранение файла изображения JPEG: 92%
👉 Сохранение файла изображения PNG: 83%

4. Оптимизилла

Еще один простой в использовании инструмент для оптимизации изображений, который сжимает форматы JPEG, GIF и PNG. Если вы выберете Optimizilla, вы сможете загрузить до 20 изображений. Инструмент добавляет каждое изображение в очередь и автоматически сжимает его с помощью оптимизации с потерями.

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

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

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

Сжатие:

👉 Сохранение файла изображения JPEG: 91%
👉 Сохранение файла изображения PNG: 79%

5. JPEG.io

Чтобы преобразовать изображения любого формата в JPEG, попробуйте JPEG.io. Он обрабатывает больше типов изображений, чем большинство онлайн-инструментов для оптимизации изображений. Чтобы использовать его, вы перетаскиваете и загружаете файлы PNG, GIF, SVG или даже PSD на их веб-сайт. Сначала инструмент преобразует изображения в формат JPEG, а затем сжимает их, прежде чем вернуть вам изображения.

Инструмент также может извлекать файлы изображений с вашего Google Диска или Dropbox и возвращать вам оптимизированные файлы JPEG в zip-архиве.

Сжатие:

👉 Сохранение файла изображения JPEG: 79,57%
👉 Сохранение файла изображения PNG: 86,98% (выходной файл — JPEG)

6. ImageRecycle

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

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

Чтобы получить доступ к таким функциям, как URL или Оптимизатор страниц, вам нужно выбрать их планы единовременных платежей. Вы можете выбрать из разных ценовых категорий: 10 долларов (10 000 изображений), 20 долларов (30 000 изображений) и 50 долларов (100 000 изображений).

Существует 15-дневная бесплатная пробная версия с ограничением в 100 МБ, чтобы помочь вам принять решение. После оплаты вы можете использовать свою квоту в течение года на неограниченном количестве веб-сайтов с любым количеством субаккаунтов. Месячное резервное копирование и восстановление включены. Пользователи WordPress, Magento и Joomla могут полагаться на расширения вместо того, чтобы каждый раз посещать веб-сайт, а пользователи Shopify получают эксклюзивное приложение.

Сжатие:

👉 Сохранение файла изображения JPEG: 92,78%
👉 Сохранение файла изображения PNG: 80,41%

7. Компрессор.

io

Если вам нужны высокие уровни сжатия, которые могут сэкономить вам сотни КБ, обратите внимание на Compressor.io. Это может уменьшить размер файла почти на 90%. Он сжимает изображения JPEG и PNG без потери пикселей и сжимает с потерями файлы других типов. Однако размер файла не может превышать 10 МБ.

Крутой слайдер позволяет сравнивать исходные и оптимизированные изображения рядом друг с другом. Вы можете скачать файл и сохранить его на Google Drive или Dropbox.

Сжатие:

👉 Сохранение файла изображения JPEG: 95%
👉 Сохранение файла изображения PNG: 78%

8. Эзгиф

Хотя название может указывать на обратное, Ezgif — универсальный онлайн-оптимизатор изображений. Вы можете использовать его для работы с GIF, PNG и JPG.

В отделе GIF Ezgif поднимает планку на новый уровень. Он позволяет вам много возиться с GIF-файлами, включая их создание, изменение размера, обрезку или оптимизацию. Вы сможете создавать GIF-файлы, используя JPEG, PNG и другие изображения, и загружать до 2000 файлов, хотя общий размер ограничен 100 МБ.

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

Сжатие:

👉 Сохранение файла изображения JPEG: 92,7%
👉 Сохранение файла изображения PNG: 24,5%

9. Оптимизатор динамического привода

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

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

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

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

С файлами PNG самая первая версия после оригинала сохранила 256 цветов с экономией размера файла на 7%. Оно выглядело довольно похоже на загруженное изображение, но вы уже могли видеть, что оно немного отличалось. В основном он потерял свой блеск. Субъективно говоря, 64-цветная версия была, вероятно, последним приемлемым выбором с точки зрения сохранения приемлемого качества.

Сжатие:

👉 Сохранение файла изображения JPEG: 93% (при уровне качества 60) | макс. 97% (при уровне качества 10)
👉 PNG Сохранение файла изображения: 77% (при 64 цветах) | макс. 92% (при 4 цветах, но это почти непригодно)

Заключительные мысли о лучших онлайн-инструментах для оптимизации изображений

Согласно нашим результатам, Compress Now является лучшим компрессором JPEG с результатом сжатия изображения 99,97%, а TinyPNG занимает корону лучшего сжатия PNG с результатом 83%. Вы можете просмотреть сводку наших результатов еще раз ниже:

Инструмент для сжатия	Сжатие изображения JPG (исходный размер ~1,3 МБ)	Процентное уменьшение в файле JPG	PNG Сжатие изображения (исходный размер ~2,1 МБ)	Процентное уменьшение в файле PNG
Сжать сейчас	0,04 МБ	99,97%	0,04 МБ **	99,98% **
Оптимизатор JPEG	0,0615 МБ	95,39%	Н/Д	Н/Д
Маленький PNG	0,1104 МБ	92%	0,3504 МБ	83%
Оптимизилла	0,112 МБ	91%	0,433 МБ	79%
JPEG. io	0,25944 МБ	79,57%	0,25908 МБ **	86,98% **
ИмиджРецикл	0,09421 МБ	92,78%	0,3984 МБ	80,41%
Compressor.io	0,055 МБ	95%	0,434 МБ	78%
Эзгиф	0,09526 МБ	92,7%	1,5 МБ	24,5%
Оптимизатор динамического привода	0,0803 МБ	93%	0,46 МБ	77%

** Результатом этого был файл JPG, поэтому это не настоящее сравнение 1 к 1, поскольку сжатие также включало преобразование из PNG ➡️ JPG.

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