10 сервисов оптимизации изображений онлайн

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

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

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

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

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

TinyPNG

Онлайн сервис TinyPNG служит для оптимизации (сжатия) изображений в форматах PNG и JPG. Сервис имеет две идентичные страницы по разным адресам: tinypng.com и tinyjpg.com.

Откройте страницу TinyPNG, перетащите в специальную форму изображения в форматах «.pnf» и «.jpg» (можно загрузить файлы обеих форматов одновременно) со своего компьютера.

Особенности онлайн сервиса TinyPNG:

• Поддержка форматов JPG и PNG.
• Загрузка на сервис до 20 изображений.
• Размер одного файла не более 5 MB.

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

При помощи ссылки «download» загрузите на компьютер готовое изображение. Обработанные изображения можно сохранить в облачное хранилище Dropbox (кнопка «Save to Dropbox»), или скачать на компьютер сразу все изображения (кнопка «Download all»). Сохраненные файлы имеют оригинальное название.

Я использую этот сервис для оптимизации изображений, которые я добавляю на свой сайт. Вначале я обрабатываю картинки в программе Photoshop: изменяю размер (соотношение сторон) изображений, оптимизирую для web, сохраняю файлы в форматах «.jpeg» и «.png».

Далее я дополнительно сжимаю изображения на сервисе TinyPNG (TinyJPG), затем скачиваю на компьютер изображения наиболее меньшего размера в форматах JPEG или PNG.

JPEGmini онлайн

JPEGmini — онлайн сервис для сжатия графических файлов в формате JPEG. В JPEGmini есть одноименные программы для компьютера, в статье мы рассмотрим работу онлайн сервиса.

В окне сервиса нажмите на кнопку «Press to Upload Photos» для добавления фотографии, или перетащите изображение в специальную форму. Сервис имеет лаконичный интерфейс, нет никаких настроек.

После завершения обработки в JPEGmini, в окне сервиса отображается оригинальный размер файла, размер файла после сжатия, степень компрессии (у разных файлов разное сжатие). Поддерживается преобразование файла размером до 10 MB.

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

Optimizilla

Онлайн сервис Optimizilla.com предназначен для сжатия файлов графических форматов JPEG и PNG. Сервис Optimizilla имеет версию на русском языке.

Особенности сервиса Optimizilla com:

• Загрузка до 20 изображений.
• Хранение сжатого файла на сервисе в течение 1 часа.

Загрузите файлы на сервис при помощи кнопки «Загрузить» или перетащите файлы с компьютера в специальную форму. После обработки, на миниатюре изображения отобразится степень компрессии (сжатия) в процентах. Сжатое изображение можно скачать на компьютер, нажав на «скачать» на картинке изображения, или при помощи кнопки «Скачать все».

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

Online Image Optimizer

Сервис Online Image Optimizer работает на сайте tools.dynamicdrive.com. Онлайн сервис предназначен для сжатия файлов форматов GIF, JPG, и PNG.

Online Image Optimizer имеет следующие возможности:

• Предельный размер загружаемого файла — 2.86 MB.
• Преобразование файлов между форматами JPG, PNG, GIF.

Обработки файлов проходит в три этапа:

1. Вставьте ссылку на URL адрес файла в поле «Enter the url of an image» для загрузки файла из интернета или загрузите файл с компьютера при помощи кнопки «Обзор…».
2. Выберите формат для преобразования файла в поле «convert to:». По умолчанию файл сохранится в том же формате. Для конвертирования выберите один из поддерживаемых форматов: PNG, JPG, GIF.
3. Для запуска обработки нажмите на кнопку «optimize».

7+ превосходных инструментов для оптимизации изображений / Habr

Перевод статьи 8 Excellent Tools for Optimizing Your Images
К сожалению на момент перевода один из сервисов перестал работать. Но хабровчане предложили еще много хороших решений!

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

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

1. Smush.it!

Smush.it использует методы оптимизации для конкретного формата изображения, чтобы удалить ненужные байты из файлов изображений. Она представляет собой инструмент оптимизации «без потерь», что означает, что оптимизирует изображение, не меняет внешний вид или визуальное качество. Smush.it работает на веб-странице. В приложении сообщается, сколько байт будет сэкономлено за счет оптимизации изображения страниц и предоставляется загружаемый файл Zip с обработанными файлами.

2.RIOT

RIOT — аббревиатура от Инструмент Радикальной Оптимизации Изображений. Оптимизатор картинок для пользователей Windows, который доступна как отдельное приложение или как расширение IrfanView. Приложение поддерживает JPG, PNG и GIF файлы и способно вырезать изображение метаданных для дальнейшего сокращения файла. Также имеет утилиты, позволяющие осуществлять основные виды редактирования изображений, такие как масштабирование и поворот и отражение.

3.PNGOUT

PNGOUT является общедоступным, бесплатным, без излишеств, инструментом для оптимизации ваших изображений. PNGOUT можно запустить в командной строке Windows или диалоговом окне Выполнить. Она имеет широкий выбор настроек способов сжатия файлаов. Большинство из популярных графических форматов файлов (таких как JPG, GIF и PNG) поддерживаются.

К pngout можно добавить ключик /zl121 для совместимости со старыми парсерами png.

Чтобы перепаковать jar можно использовать kzip с тем же ключом /zl121.

И pngout, и kzip написал Ken Silverman.

4.Online Image Optimizer

Online Image Optimizer от Dynamic Drive представляет собой веб-инструмент для сжатия изображений. Вы можете указать ссылку на изображение, которое вы хотите оптимизировать, или загрузить его из локальной папки. Кроме оптимизации, вы можете выбрать тип итогового файла (по умолчанию получается тот же тип файла). Есть ограничение по размеру файла — 300 КБ.

5.SuperGIF

SuperGIF это бесплатная утилита для Windows и Mac OS, которая помогает оптимизировать GIF. Имеет интуитивно понятный и простой пользовательский интерфейс, может сжимать GIF на 50% и больше. В бесплатной версии можно оптимизировать одновременно только одно изображение, но в остальном имеет те же функции, что и коммерческая версия ($ 29,95), за исключением пакетной обработки.

6.PNGGauntlet

PNGGauntlet — это .NET приложение для PNGOUT. Оно может быть использовано для преобразования JPG, GIF, TGA, PCX, BMP и оптимизации содержимого PNG файлов. PNGGauntlet идеально подходит для тех, кто не привык работать через командную строку, но все же хотел бы воспользоваться улучшенный алгоритм оптимизации PNGOUT.

7.SuperPNG

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

P.S. А теперь — то, что посоветовали хабровчане.

8.Pngcrush (спасибо UUSER)

Картинки нет, так как данный плагин работает из командной строки. Работает в UNIX, LINUX а также в MS-DOS.
Оптимизирует PNG. Использует различные методы сжатия, может удалять нежелательные вспомогательные блоки.
Pngcrush имеет открытый исходный код.

9.OptiPNG (спасибо Razunter)

OptiPNG — как и следует из названия, оптимизатор PNG. Эта программа также преобразует другие форматы (BMP, GIF, PNM и TIFF) в оптимизированный PNG, и выполняет проверку целостности и исправлений.

Имеет открытый исходный код, распространяется по zlib/libpng лицензии.

10.punypng (спасибо Razunter)

Веб- сервис по сжатию PNG, JPEG и GIF.
Из последних обновлений:
Предпросмотр качества итогового изображения.
Удаление вашего изображения с сервера после 15 мин. после конвертации.
Поддержка прозрачности.

11.ImageOptim (спасибо Conquearse)

Приложение для Mac-OC. Обрабатывает PNG, JPEG и GIF анимацию.
ImageOptim сочетает в себе различные инструменты оптимизации: AdvPNG от AdvanceCOMP, OptiPNG, Pngcrush, JpegOptim, jpegtran от Libjpeg, Gifsicle и опционально PNGOUT.
Открытый исходный код на условиях GPLv2.
Поддерживает удобный drag’n’drop изображений в свое окно.

12. pngre (спасибо homm)

Оптимизатор графики в формате PNG. Также конвертирует GIF и BMP в PNG.
Позволяет тонко вручную или автоматически настроить размер PNG файла.

13. pngquant (спасибо homm)

Работает из командной строки. Умеет только одно, конвертирует 32-х битные PNG с альфа-прозрачностью в 8-и битные палитровые PNG с альфапрозрачностью. Но делает это очень хорошо, много лучше Fireworks, хотя тоже не без проблем.

14. PictureBeaver (спасибо Carl_Linnaeus)
Пример оптимизации:

Автор — Артем Сапегин
PictureBeaver автоматически оптимизирует веб-графику (в форматах PNG, GIF и JPEG), удаляя из файлов вспомогательные данные, которые не влияют на отображение. Обычно удаётся добиться сокращения объёма файлов на 10—30%.
GIF без анимации переводится в PNG, если такие файлы выходят меньше. Для оптимизации используются бесплатные утилиты OptiPNG, jpegtran и Gifsicle.

15. Color quantizer (спасибо Subdivision)

Color quantizer — это небольшая программа позволяющая легко оптимизировать изображения для web.

Основные возможности:

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

16. Gifsicle (спасибо AndrewTishkin)

Это — инструмент для GIF-ок. В основном — для разных UNIX. Портирована и под Win, но эта версия не поддерживается.
Gара примеров:
Обрезаем прозрачные рамки:
gifsicle —crop-transparency src.gif > dest.gif

Сжимаем анимированный (простой тоже можно… на несколько байт 🙂 GIF:
gifsicle -O2 src.gif > dest.gif

17. jpegtran (спасибо AndrewTishkin)

А это — для JPEG. Официальная программа от Independent JPEG Group.

18. Webify (Спасибо zeka)

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

19. PngOptimizer (Спасибо Enot_23)

Очень удобный оптимайзер для Windows.
Ужимает PNG, конвертит в PNG из BMP, GIF, TGA. Позволяет делать PNG-скриншоты.

20. TweakPNG (Cпасибо stalkers)

TweakPNG это низкоуровневая утилита для изучения и изменения PNG файлов й. Для Windows 2000 или выше. Для того, чтобы использовать его, вам нужно хоть немного разбираться в формате PNG.
По словамstalkers здорово помогает с PNG, сохраненным в Photoshop CS2. Дело в том, что версии фотошопа ниже CS3 добавляют всякую фигню в файл, в т.ч. и данные о затемнении. В результате — в ИЕ картинка выглядит темнее, чем в других браузерах, т.к. все другие читали только непосредственно картинку.

С помощью утилиты это можно просто удалить. Еще можно выкинуть комментарии типа «edited in Adobe Photshop». Помимо избавления от глюков, получим также небольшой выигрыш в размере.

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

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

Проблема

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

Мы решаем две проблемы. Первая проблема в том, что изображения часто не пережаты под нужное разрешение, то есть клиенту приходится не только качать ненужные ему данные, но и тратить ресурсы 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 библиотеки гораздо быстрее запуска консольной утилиты.

Разница в размере в 3 раза, но возможно появление артефактов (зависит от картинки).

Оригинальный PNG 450×300 200 Кб	Оптимизированный 450×300 61 Кб

Пример не очень удачной картинки, на которой появляются артефакты при сжатии.

Оригинальный PNG 351×527 270 Кб	Оптимизированный 351×527 40 Кб

После того, как прототип был написан, протестирован на моем пк и выдавал приличные 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

Результаты:

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

Код проекта на GitHub.
Биндинг Go к libimagequant так же на GitHub.

Оптимизация картинок для Google PageSpeed / .io corporate blog / Habr

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

Например, даже на стартовой странице Google Developers графику можно сжать на 71%. Чем меньше весят фотки – тем быстрее грузится сайт. Меньше картинки — меньше трафика — все работает быстрее. Посетители тратят меньше времени – все довольны.

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

Серверные инструменты

Самые частые — изображения в формате JPG. Основные инструменты:

• Jpegtran сжимает картинки без потерь и удаляет метаданные:

  jpegtran -copy none -optimize -outfile output.jpg input.jpg
  

  
  
  
• Imagemagick работает практически со всеми форматами. Утилита convert позволяет указывать параметр качества для сжатия, что поможет уменьшить размер картинки:

  convert input.jpg -quality 75 output.jpg
  

  
  

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

• pngquant – инструмент lossy-сжатия для оптимизации PNG с потерями качества. Основной алгоритм работы — уменьшается количество используемых оттенков цветов. Это снижает размер с небольшими потерями в качестве:

  pngquant --quality 75 —speed 1 input.png
  

  
  

• pngcrush – еще одно средство оптимизации для PNG. Использует алгоритм сжатия без потерь:

  pngcrush -reduce -brute in.png out.png
  

  
  
  

Облачные инструменты

• JPEGmini. Отлично сжимает фотки на 20…30%. Создатели заявляют, что могут сжать некоторые изображения в 5 раз без потерь в качестве. Есть API для автоматизации.
• TinyPNG. Реально крутой инструмент оптимизации для PNG. Очень хорошее сжатие без заметных потерь в качестве. Также есть API и большой бесплатный пакет.
• i.onthe.io/google_speed. Простой сжиматор, работает с любым форматом. Удобен для одноразовой обработки.

Модуль PageSpeed

Google потрудился и выпустил модуль к Ngnix и Apache для повышения производительности сайтов. Он увеличивает скорость загрузки, оптимизируя дофига всяких параметров, в том числе и фотки. Работает автоматически, его нужно только установить и включить:

pagespeed on;
pagespeed FileCachePath /var/cache/nginx;

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

Прямая оптимизация ресурсов

После оптимизации PageSpeed сохраняет файл по новому пути. Но как быть с фотками, отображаемыми через JavaScript? Или со ссылками на Ваши фотки на сторонних ресурсах? Тут на помощь приходит IPRO – оптимизация ресурсов не отходя от кассы, а точнее не изменяя URL.

Для этого достаточно включить в конфиг такие инструкции (для Nginx):

pagespeed InPlaceResourceOptimization on;

Конспект

• Используйте PageSpeed для поиска проблем с графикой на сайте.
• Если графики много, используйте серверные инструменты для оптимизации: jpegtran, jpegoptim, ImageMagick, pngquant, pngcrush.
• Облачные инструменты для одноразовых задач и подключения по API: JPEGmini, tinyPNG, i.onthe.io/google_speed.
• Модуль PageSpeed к Nginx/Apache сделает всю оптимизацию сам, но его нужно собирать.

Обзор инструментов для сжатия изображений / Habr

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

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

Сложно сказать наверняка, насколько теряется качество при сжатии изображений, так как это во многом зависит от источника графики. Некоторые JPG можно уменьшить всего на 50-100 байт. Обычно нормальную интернет-графику нужно сжимать на 10-40%, без потери качества изображения (также можно это реализовать и с уменьшением количества цветов или с перекодированием файлов JPEG в другие форматы). Но в идеале для сжатия изображений использовать специальные программы или веб-сервисы, которые и будут рассмотрены в данном обзоре.

Тестирование

Так какие же программы лучше? Чтобы дать ответ, мы рассмотрим 18 основных конкурирующих между собой программ. В основном это инструменты сжатия изображений для Windows, так как они наиболее распространены. Но мы также включили опции сжатия с потерями, программы для Mackintosh и веб-сервисы, поэтому есть надежда, что каждый найдет для себя что-то полезное.

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

Результаты оказались очень интересными, приглашаем и вас с ними ознакомиться.

Программы

1. AdvanceCOMP 1.15

Платформа: Windows

Устаревший инструмент использующий командную строку и с минимальной поддержкой. AdvanceCOMP вряд ли подойдет для среднего пользователя ПК, привыкшему к графическим интерфейсам. Для тех же, кто привык работать с командной строкой, ничего сложного в ней нет. Так, всего одна строка:

'for %a in ("C:\PNG File\Folder\*.png") do advpng -z -4 "%a"'

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

Тем не менее, полученные результаты оказались весьма далеки от идеала, и наша тестовая картинка PNG сжалась всего на 14,2% (только один инструмент из попавших в обзор сервисов оказался еще хуже).

сайт

2. Caesium 1.4.1

Платформа: Windows

Caesium — это простой инструмент с открытым кодом, который предназначен для сжатия PNG, JPG и BMP. Это достаточно удобная в использовании программа. Нажмите кнопку Add/Добавить, выберите изображения, выберите папку куда будут загружены обработанные изображения — Output, нажмите кнопку Compress/ Сжатие, и через несколько секунд вы получите результат.

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

Caesium действительно обеспечивает поддержку сжатия PNG без потери качества, хотя в ней и есть некоторые ограничения. Он может выводить только 24-битные изображения, в противном случае, вероятно, будет увеличиваться размер изображения. Результаты программы наглядно иллюстрируют проблему, так как большинство наших тестовых изображений веб-графики PNG c глубиной цвета в 48 бит на самом деле увеличиваются в размерах. Даже при тщательной настройке общий размер нашего изображения уменьшался всего на 1,2%.

сайт

3. FILEminimizer Pictures 3.0

Платформа: Windows

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

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

Насколько хорошо выполняется сжатие? Все варьируется в зависимости от формата, по крайней мере, в наших тестах. Сжатие PNG — ничего особенного — 26,8% (некоторые инструменты делают лучше без потери качества), сжатие GIF было выше среднего — 16,5%, а вот наша интернет-графика JPG уменьшилась в размере на 39,3%, — наибольшее сжатие в исследуемой группе. Но во всех тестах потеря качества визуально была заметна.

сайт

4. FileOptimizer 2.10.135

Платформа: Windows

Возможности программы FileOptimizer достаточно велики. Она не только может сжимать изображения JPG, GIF и PNG, но также может работать с исполняемыми файлами, архивами, документами Microsoft Office, файлами PDF, — список можно продолжать достаточно долго.

Удивительно, но при этом пользоваться ей абсолютно не сложно. На самом деле у программы один из самых простых интерфейсов: перетащите изображения в FileOptimizer, щелкните правой кнопкой мыши, выберите Optimize/ Оптимизировать — и наслаждайтесь полученным результатом. Однако у этой простоты есть и обратная сторона — исходные файлы заменяются программой. Оригиналы отправляются в корзину, поэтому их придется восстанавливать (если они вам нужны, конечно).

Но первостепенное значение имеет, конечно же, сжатие, и здесь FileOptimizer обеспечивает хорошие результаты. Например, программа уменьшила нашу тестовую графику PNG на 42,2% — это лучшее сжатие без потери качества в данной группе. Сжатие JPEG и GIF было выше стандартного на 17,7% и 15,9% соответственно, но в этой программе еще много полезных опций, которые вы сможете использовать с FileOptimizer для сжатия других файлов на своем сайте.

сайт

5. ImageOptim 1.4.0

Платформа: Mac

ImageOptim — это Mac-инструмент, который оптимизирует изображения GIF, JPEG и PNG, а также выступает в качестве интерфейса для множества других приложений: PNGOUT, AdvPNG, Pngcrush, расширенное OptiPNG, JpegOptim, jpegrescan, jpegtran и Gifsicle.

Программа выполняет сжатие почти без потерь: скорее, удаляются комментарии, цветовые профили и прочее, без перекодирования или уменьшения количества цветов. Интерфейс ImageOptim тоже весьма удобен. Перетащите один файл, группу или папку с нужными файлами, и программа сразу же начинает сжимать каждое изображение и отображать результаты. Она не самый быстрый инструмент, но даже если вы отправите на обработку тысячу файлов JPEG в высоком разрешении, для нее это вряд ли будет проблемой.

Конечные результаты были внушительные, но не захватывающие. Наша веб-графика GIF уменьшилась в размерах на 16,2%, PNG — на 17,8%, JPG-файлы — на 18,3%. Вы можете сделать лучше с помощью отдельных инструментов. Но если вам нужен простой Mac-инструмент, который может обрабатывать файлы GIF, JPEG и PNG, то ImageOptim — вполне разумный выбор.

сайт

6. JPEGmini

Платформа: Mac

JPEGmini — интересное Mac-приложение с нестандартным подходом к сокращению формата JPEG.

Во-первых, в нем используется интеллектуальный алгоритм, чтобы выяснить, насколько изображения можно сжать без видимого эффекта (то есть не простое перекодирование с какой-то фиксированной настройкой качества). В программе используется собственный кодер JPEG, чтобы попытаться получить, по возможности, самые компактные файлы. Обработка производится в фоновом режиме. Просто перетащите ваши фотографии в программу (в бесплатной версии максимум 20 в день), и она будет заменять оригиналы сжатыми версиями.

А вот разброс результатов оказался огромный. Наша картинка JPG уменьшилась всего на 8,2%, но когда мы отправили на обработку 25 больших цифровых фотографий, то они уменьшились на 71,3% с небольшой видимой потерей качества. С простой веб-графикой JPEGmini не делает ничего слишком удивительного. Использовать ее лучше всего для обработки изображений больших размеров.

сайт

7. jStrip 3.3

Платформа: Windows

jStrip -это инструмент для сжатия без потери качества файлов JPEG, который удаляет несущественную информацию: эскизы, комментарии, цветовые профили, дополнительные байты в начале или в конце файла и различные другие биты и куски. А вот сжатие файлов будет небольшим, поскольку программа не использует повторное кодирование. Это было особенно заметно, когда мы поместили в JStrip фотографии JPG с высоким разрешением, которые программа смогла уменьшить примерно на 1%.

Если файлы, которые вы хотите сжать, уже сами по себе небольшие, сжатие, вероятно, будут гораздо значительнее. Когда мы пропустили нашу подборку веб-графики JPEG через jStrip, изображения уменьшились в среднем на 16,1%. Стоит омтетить, что работа программы не отличается стабильностью. По умолчанию она, заменяет изображения, которые вы указали, на сжатые версии, так что для обработки лучше использовать копии. В целом jStrip — это быстрый и простой способ незначительно уменьшить размер изображений JPEG.

сайт

8. OptiPNG 0.7.3

Платформа: Windows

OptiPNG — это популярный инструмент сжатия PNG без потери качества использующий командную строку, который регулярно применяется в других программах (например, в PNGGauntlet) для обработки и оптимизации изображений.

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

Результаты, даже с настройками сжатия по умолчанию, оказались весьма приемлемыми: наша тестовая веб-графика PNG уменьшилась в размере в среднем на 32,2%.

сайт

9. PNGGauntlet 3.1.2.0

Платформа: Windows

PNGGauntlet — это довольно интересный инструмент, по существу, являющийся оболочкой для трех других программ с открытым кодом (PNGOUT, OptiPNG, DeflOpt), предназначенных для сжатия изображений.

В процессе работы она действует так же, как и конкуренты. Перетащите исходные изображения, выберите выходную папку, нажмите кнопку «Optimize!/Оптимизировать»! и ждите.
Не исключено, что вам придется ждать, и ждать, и ждать… Предположительно такое длительное ожидание связано с тем, что она сочетает в себе работу трех инструментов для обработки. PNGGauntlet может быть очень медленной, в нашем случае ей понадобилось 50 минут 44 секунды для сжатия 25 фотографий с высоким разрешением в формате PNG.

Однако полученные результаты впечатляют. При обработке нашей тестовой веб-графики PNG программа уменьшила наши 50 изображений в среднем на 41,3% и даже фотографии уменьшились на 7,75% без видимой потери качества. Иногда же этого достаточно, чтобы оправдать проблемы с производительностью. Поэтому если вам нужен качественный инструмент сжатия PNG, то PNGGauntlet действительно надо включить в ваш список.

сайт

10. PNGOptimizer 2.2

Платформа: Windows

При крошечном размере в 146 кб PNGOptimizer — это самая легковесная из представленных в данном обзоре программ, поэтому неудивительно, что интерфейс у нее максимально простой и специализируется она только на файлах PNG.

Используя PNGOptimizer 2.2 вы получаете возможность управления удивительно большим количеством параметров обработки. PNGOptimizer может удалить чересстрочную кадровую развёртку, сохранить, удалить или заменить цвет фона, а также удалить текст или физические размеры изображения в пикселях. Программа может даже импортировать файлы GIF, BMP и TGA, сохраняя их в PNG в соответствии с выбранными опциями.

А вот обойти конкурентов в сжатии изображений программа не смогла, это видно по результатам теста. PNGOptimizer уменьшила фотографии с высоким разрешением PNG в среднем всего на 3,6%. Намного лучше она справилась с небольшими графическими изображениями, в среднем сжатие составило 39,8%. Если вам нужен маленький и простой инструмент для сжатия PNG, то PNGOptimizer — то, что надо.

сайт

11. PNGOUTWin 1.5.0

Платформа: Windows

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

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

Она также проста в использовании. Перетащите изображение в окно программы, и она сразу же начнет процесс сжатия, используя несколько потоков для работы одновременно с несколькими изображениями. Результаты также отличные, наша веб-графика PNG уменьшилась в размере на 40,5% (неплохо для сжатия без потери качества).

К сожалению, в настоящее время бесплатной для нее является лишь интерфейс PNGOUT, такой же как и PNGGauntlet, который тоже очень простой в использовании программы (на самом деле можно достичь еще более высокого уровня сжатия, если объединить его с другими инструментами). Хотя PNGOUTWin и мощная программа, вероятно, она все-таки не стоит $ 14.95 (персональная лицензия) / $ 29.95 (корпоративная лицензия), которые за нее просят.

сайт

12. PUNYpng

Платформа: web

Гораздо более универсальным, чем можно предположить из его названия, является PUNYpng — веб-сервис, который может действительно применять сжатие без потерь для изображений в формате GIF, JPG и PNG. Регистрация и создание учетной записи бесплатны, но для бесплатных аккаунтов действуют ограничения: можно загрузить только 15 изображений в пакетном режиме, каждое не более 150 кб.

В целом сервис довольно удобен. Нажмите кнопку Upload Images/Загрузить Изображения на сайте, а затем подождите, пока фотографии загружаются и сжимаются. Появляется отчет о проделанных операциях, и все можно скачать в виде ZIP-архива.

Для тестирования мы использовали бесплатный аккаунт. PUNYpng показал хорошие результаты и сжал различные тестовые комплекты файлов на 16-32%. За $2 в месяц, можно проапгрейдить свой аккаунт до PRO, с которым можно получить дополнительную опцию сжатия с меньшей потерей качества и загрузить больше файлов.

сайт

13. RIOT 0.4.6

Платформа: Windows

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

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

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

С поставленной задачей программа все же справилась хорошо, в частности, наши GIF-файлы ей удалось уменьшить в среднем на 42,8%. Но прежде понадобилась подробная конфигурация — показатели «по умолчанию» были значительно хуже.

сайт

14. ScriptJPG

Платформа: Windows

ScriptJPG — один из наиболее примитивных пакетов, по существу, это просто скрипт для Windows, который действует как интерфейс для нескольких инструментов на основе командной строки. Перетащите ваши файлы JPG в сценарий, выберите параметры сжатия (либо без потери качества, либо с настройкой особого качества JPEG), и ScriptJPG уменьшит ваши изображения. Так, по карйней мере, было заявлено в описании. По некоторым причинам, работала программа с нашей веб-графикой JPG не так, как было обещано, и стартовое меню даже не отображалось.

Мы смогли протестировать пакет на нашей фотографии JPEG, и получили неплохие результаты. Его опция сжатия без потери качества сократила размеры нашего изображения почти на 10%. Если вы специалист по работе с графикой, то ScriptJPG может представлять для вас интерес. Вы сможете диагностировать проблемы по мере их возникновения и, возможно, изменить сценарий, настроить параметры сжатия в соответствии с вашими потребностями. Если вы предпочитаете более понятные и простые инструменты, советуем использовать один из аналогов с графическим интерфейсом. Есть много более мощных альтернатив и, конечно, они гораздо проще в использовании.

сайт

15. ScriptPNG

Платформа: Windows

Как вы уже, наверное, догадались из названия, ScriptPNG — это ближайший родственник ScriptJPG. Он представляет собой пакетный файл Windows, который использует четыре утилиты, чтобы сжимать файлы PNG до нужных размеров. Также, как и в ScriptJPG, здесь очень скудные возможности настройки. Перетащите изображение в файл, и в командной строке открываются девять возможных вариантов сжатия. Выберите тот, который вам нужен, и программа сразу же начнет сокращать каждый файл по очереди (и заменять оригинальные изображения выходными, поэтому работать лучше с копиями).

Еще одна проблема у нас была в том, что старзу после установки вылетел pngout.exe. На выполнении сценария это не отобразилось, но нам пришлось вручную каждый раз закрывать диалоговое окно ошибки, как только оно появлялось. Несмотря на это, результаты сжатия были довольно впечатляющими. Наша веб-графика PNG потеряла до 40,1% объема без видимого ухудшения качества изображений.

сайт

16. Smush. It

Платформа: web

Большинство веб-сервисов для сжатия изображений отличаются большими ограничениями, но Smush. It на Yahoo — это редкое исключение. Единственное ограничение — размер файлов (не более 1 Мб), но зато в систему можно загрузить столько изображений, сколько вам нужно. В ней нет регистрации, нет создания учетной записи, нет ежедневных квот. Изображения сжимаются с помощью различных инструментов, а результаты можно получить в виде ZIP файла.

У такого подхода всего лишь одна проблема — у вас нет доступа к самим инструментам сжатия. Вы не можете настроить или изменить их. Вы видите результаты, которые получите, и ничего не можете сделать, чтобы изменить их. Была обнаружена какая-то проблема с JPG-файлами, так как Smush. It удалось уменьшить наши тестовые изображения всего на 1%. Сжатие PNG было более эффективным — 35,3%, хотя наши GIF-файлы потеряны впечатляющие 23,9% объема (лучшее сжатие без потери качества во всех тестах).

сайт

17. TinyPNG

Платформа: web

Как и Smush. It, TinyPNG — это бесплатный веб-сервис, который может оптимизировать изображения для вас. Просто перетащите свои файлы на веб-страницу, она сожмет их и предоставит ссылки для скачивания. У системы есть некоторые недостатки: ограничение размера файла до 2 Мб, возможность загрузить за один раз только 20 файлов и отсутствие возможности пакетной закачки.

В TinyPNG также четко виден подход к сжатию за счет качества, в отличие от большинства других инструментов, причем в ней пересматривается палитра, чтобы уменьшить (иногда значительно) количество используемых цветов. Неудивительно, что это оправдывает себя в части, касающейся необработанных рисунков, с помощью сжатия нашей веб-графики PNG на 48% — лучший результат в этом тесте. В большинстве случаев очень было трудно обнаружить какие-либо отличия между исходными изображениями и сжатыми версиями.

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

сайт

18. Trout’s GIF Optimizer 2.3

Платформа: Windows

Trout’s GIF Optimizer — инструмент для сжатия, не требующий установки. Параметры у него, конечно, немного ограничены. Как вы догадались из названия, программа выполняет лишь сжатие файлов GIF, поэтому у нее нет никаких глобальных параметров конфигурации, вызывающих особый интерес (хотя можно вручную оптимизировать палитру отдельных изображений различными способами).

Тем не менее, с Trout’s GIF Optimizer, очень легко работать. Просто импортируйте выбранные фотографии, уменьшение размера для каждого изображения отображается сразу же (это очень быстро), можно сохранить их с помощью всего лишь нескольких щелчков мыши. Но, к сожалению, результаты сжатия не особо впечатляют: наша веб-графика GIF уменьшилась в среднем всего на 16,7%.

сайт

Сводная таблица по всем тестируемым сервисам

Протестировано	Платформа	Сжатие	Уменьшение PNG (в%)	Уменьшение JPG (в%)	Уменьшение GIF (в%)
AdvanceComp 1.15	Windows	Без потери качества	-14.20%
Caesium 1.4.1	Windows	С потерей / Без потери качества	+18.7%
FILEminimizer 3.0	Windows	С потерей / Без потери качества	-26.8%	-39.3%	-16.5%
FileOptimizer 2.10.135	Windows	Без потери качества	-42.2%	-17.7%	-15.9%
ImageOptim 1.4.0	Mac	Без потери качества	-17.8%	-18.3%	-16.2%
JPEGmini Lite 1.4.1	Mac	Без потери качества		-8.2%
jStrip 3.3	Windows	Без потери качества		-16.1%
OptiPNG 0.7.3	Windows	Без потери качества	-32.3%
PNGGauntlet 3.1.2.0	Windows	Без потери качества	-41.3%
PNGOptimizer 2.2	Windows	С потерей / Без потери качества	-39.8%
PNGOutWin 1.5.0	Windows	Без потери качества	-40.5%
PUNYpng	Web	Без потери качества	-32.1%	-27.5%	-16.1%
RIOT 0.4.6	Windows	С потерей качества	-21.7%	-39%	-42.8%
ScriptJPG	Windows	С потерей / Без потери качества		-10%
ScriptPNG	Windows	Без потери качества	-40.1%
Smush. It	Web	Без потери качества	-35.3%	-1%	-23.9%
TinyPNG	Web	С потерей качества	-48%
Trout’s GIF Optimizer 2.3	Windows	С потерей / Без потери качества			-16.7%

Выводы

После многочасового тестирования и общего разложения программ-участниц на этапы, можно сделать вывод — сжатие изображений действительно эффективный инструмент оптимизации и дает достаточно неплохой результат. Все наших тестовые файлы PNG можно было уменьшать на 30 — 40%, и даже файлы в формате JPEG удалось сжать на 16-18%. Во всех случаях использовалось сжатие без потери качества, поэтому качество изображения не снизилось, изображения выглядят точно так же, только загружаются быстрее.

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

В целом FileOptimizer оказался лучше аналогов для Windows при сжатии без потери качества, продемонстрировав превосходное сжатием (до 42,2%) наших тестовых файлов. Файлы с расширением JPGи GIF он тоже неплохо сжимает, а также в нем имеются и другие полезные опции (например, сжатие PDF).

Но если эта программа вас по какой либо причине не устроит, то PNGGauntlet и ScriptPNG также обеспечивают хорошее сжатие PNG, а ImageOptim полезна для Mac, так как она дает хороший уровень сжатия JPEG и GIF.

Хотя мы нашли, что веб-сервисы при тестировании оказались менее удобными в использовании, мы бы не стали полностью их исключать. PUNYpng был лучшим при сжатии JPG без потери качества, а Smush. It победил всех конкурентов при сжатии GIF, оба могут оказать большую помощь в уменьшении объемов вашей веб-графики.

Источник

P.S. к сожалению в данном обзоре не упомянут еще один очень эффективный инструмент (спасибо dersmoll и alekskorovin заметившим это при подготовке еженедельного дайджеста), который уже упоминался на Хабре.

UPD Спасибо большое пользователям которые поделились собственными вариантами:

@yourway за Color quantizer (действительно интересная, на мой взгляд).

azproduction за очень нужный вариант для OSX & Linux imgo

LuckyReveal за kraken.io

Плюсы: Высокая степень сжатия, быстрота, API публичный(бесплатно).
Минусы: Лимитированное количество запросов в сутки. (50 в сутки, каждое не более 500kb).

Может быть установлен как плагин для Chrome: goo.gl/aDSQ6, Firefox: goo.gl/mlxd0.

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

Зачем необходимо оптимизировать изображения для сайта? Как это повлияет на скорость работы ресурса? Поможет ли это в продвижении проекта? Об этом и многом другом поговорим в данной статье. Привет, друзья! С вами Юрий Бошников! Не стоит думать, что процесс оптимизации картинок для сайта – маловажный этап в продвижении сайта. На самом деле пренебрегая данным направлением, владельцы сайтов провоцируют негативное отношение поисковых роботов к контенту, размещенному на ресурсе. Ведь картинки также принимают участие в поиске! Если они не оптимизированы, не подписаны, слишком тяжелые, все это негативно отражается на позиции проекта в поисковых системах.

Содержание статьи:

(смотрите видео: это самый наглядный разбор с примерами)

Ищем картинки для сайта: где их брать и какими они должны быть

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

• релевантность публикуемой статье;
• уникальность;
• «легкость».

Что такое релевантность – думаю, понятно. Если нет – немного уточню: соответствие фотографии тематике материала. То есть, если вы пишите про женскую одежду, нет смысла прикреплять иллюстрацию карбюратора.

Уникальность картинки столь же важна, как и уникальность текста. Если есть возможность самостоятельно создавать картинки, фотографии – отлично! Тогда с уникальностью проблем не возникнет.

 

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

 

Где брать картинки? Первый способ:

• ввести нужный запрос в поисковой системе Гугл;
• перейти в раздел «Картинки»;
• под поисковой строкой кликнуть на «Настройки»;
• кликнуть по надписи «Лицензия»;
• выбрать раздел с «Лицензией на использование».

Второй способ подразумевает покупку изображения на фотостоках. Там представлен огромный выбор высококачественных изображений по любой тематике. Вот список наиболее популярных стоков:

• Shutterstock;
• iStockphoto;
• Dreamstime;
• BigStock.

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

• StockSnap;
• Pexels;
• Unsplash;
• Death to the Stock Photo.

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

Процесс оптимизации занимает некоторое время. Предполагает несколько этапов. Но все эти действия – простые. Пусть вас не пугает объем текста. Ознакомившись с ним и немного набив руку, на каждую картинку вы будете тратить не более 3-5 минут.

Добиваемся уникальности

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

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

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

Уменьшение «веса»

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

 

Обратите внимание! Скорость загрузки оказывает непосредственное воздействие на позиции проекта в поисковой выдаче.

 

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

Открываете изображение в редакторе – фотошопе. Нажимаете сочетание клавиш Ctrl+I, открывается новое окно и вводите нужные вам параметры. Картинка автоматически сжимается до введенных размеров.

 

Совет! Первый раз убедитесь, что в качестве «системы измерения» установлены пиксели. При нажатии клавиш Ctrl+I и открытии нового окна вы увидите, где меняются параметры.

 

Теперь картинка стала меньшего размера. Но ее вес можно еще больше уменьшить, не потеряв качества. Зажмите следующее сочетание клавиш: Ctrl+Shift+Alt+S. Откроется окно сохранения картинок для веба. Верхнем правом углу поставьте качество картинки 60%. Сохраните изображение. Теперь оно будет максимально легким, но не потеряет свое качество.

 

Обратите внимание! Первый этап можно пропустить. Сразу сохраняя картинку для веб, в открывшемся окне в нижней его части будет поле ввода размера изображения. Установите там нужные параметры, проверьте качество (60%) и сохраняйте.

 

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

Формат картинки

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

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

 

Кстати! Еще немного о том, как  оптимизировать изображения для сайта онлайн. Среди наиболее популярных и отлично работающих сервисов выделяются gtmetrix.com, developers.google.com. Именно их я рекомендую на своем онлайн-тренинге «Как сделать сайт своими руками». Кстати, обучение бесплатное и построено на практических заданиях. Спустя четыре дня каждый студент уже имеет свой работающий, оформленный и наполненный контентом сайт.

Оформление изображения

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

Там будет доступна опция редактирования. Кликнув по соответствующей кнопке, откроются свойства картинки. В зависимости от редактора и административной панели, для изменения представлены следующие параметры:

• размеры;
• положение на странице;
• отступы от текста;
• и, возможно, некоторые другие.

Наиболее важными являются два атрибута – это alt и title. Если их не заполнить, это негативно отразиться на поисковой оптимизации самого изображения, конкретной страницы и всего сайта в целом.

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

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

 

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

 

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

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

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

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

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

 

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

 

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

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

Читайте также: Контент стратегия: 12 шагов к ее созданию

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

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

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

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

 

Кстати! Обязательно проверьте файл robot.txt. Возможно, в нем будет стоять запрет на индексацию картинок. Уберите его!

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

В завершение вкратце перечислю все этапы оптимизации изображения для сайта:

• поиск релевантной тематике статьи картинки;
• прописывание соответствующего имени/названия;
• уменьшение размера и веса;
• прописывание тегов Alt и Title, написание подписи, если это необходимо;
• публикация на странице – выбор параметров отображения, отступа текста;
• проверка файла robot.txt.

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

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

Если у вас что-то не будет получаться, служба поддержки тренинга оперативно отреагирует на вопросы. Поможет решить любую проблему. От вас – только желание и присутствие на обучении. Оно проводится по вечерам, в удобное время.

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

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

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

Bulk Resize Photos

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

Bulk Resize Photos →

BIRME

Аббревиатура BIRME расшифровывается как Batch Image Resizing Made Easy. Это действительно очень простой и чрезвычайно быстрый онлайновый ресайзер картинок. Он позволяет изменять размеры изображений с сохранением пропорций и без, сжимать файлы с заданным уровнем компрессии и добавлять к картинкам простую рамку.

BIRME →

Resize Pic Online

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

Resize Pic Online →

PicGhost

С помощью этого сервиса вы сможете не только изменить размер изображений, но и нанести на них свой водяной знак. Может пригодиться, если вы опасаетесь несанкционированного использования выложенных вами в Cеть фотографий. Кроме загрузки файлов с жёсткого диска (до 40 штук одновременно), PicGhost может обработать фотографии, хранящиеся в Facebook или Flickr.

PicGhost →

TinyPNG

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

TinyPNG →

Optimizilla

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

Optimizilla →

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