Как оптимизировать картинки JPG и PNG, сохранив качество

Еще несколько лет назад интернет только начинал свое активное вторжение в жизнь человека. Тогда без оптимизации иллюстраций PNG и JPG, JPEG было не обойтись. Позже, по мере роста скорости загрузки, необходимость в этом стала отпадать. Но теперь сжатие картинок возвращает свои позиции и связано это во многом с развитием мобильных технологий, запросами пользователей. Редкий пользователь сегодня будет ждать, пока прогрузится страница. Он просто перейдет на более быстры ресурс. Тех, кто пошустрее любят и поисковые машины систем Google или Yandex. Скорость загрузки вышла на первый план, а она напрямую зависит от веса сайта в целом. Значит, сжатые картинки на сайте — один из залогов успеха. Итак, давайте разберемся, как оптимизировать картинки.

Базовое сжатие

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

Уменьшаем картинку с помощью MS Paint

С MS Paint легко увидеть, как сделать картинку меньше. Для работы берем логотип NGINX в формате nginx.png. Сейчас он 2000×417 пикселей. По ширине его необходимо сократить до 1024 (верстка страницы).

Запускаем Paint (Пуск-Выполнить-Вводим MS Paint)

mspoint

  1. Открываем программу. Кликаем на файл nginx.png. Ищем графу «Изменить размер», благодаря которому появится окошко с пикселями и %. Выбираем «Пиксели» и указываем требуемый размер, то есть обозначаем необходимую нам ширину 102.
  2. Оптимизируем файл в MS Paint. Теперь у нас есть иллюстрация, прошедшая базовую оптимизацию. Можно приступать к ее сжатию.

mspoint2

Программа File Optimizer

Оптимальный вариант — применять для оптимизации File Optimizer (http://nikkhokkho.sourceforge.net/static.php?page=FileOptimizer). Она позволяет сжимать не только размер картинок, но и оптимизировать файлы .pdf, .docx, txt, видео-, аудиофайлы и многое другое. Перечень расширений, с которыми работает программа, можно найти на ее официальном сайте по указанному выше адресу.
Некоторые утилиты, используемые в работе: AdvanceCOMP, pngquant, APNG Optimizer, jpegoptim, CSSTidy, zRecompress, DeflOpt и многие другие. Уважение вызывает даже неполный перечень.

File Optimizer. Применение

Для начала скачайте и установите на свой компьютер программу в виде архива с файлами или инсталлятора.

optimezer1
У программы интуитивно понятный интерфейс, которым просто пользоваться. Он не требует дополнительных настроек. Если, конечно, вы сами не желаете скорректировать что-то «под себя». В этом случае воспользуйтесь кнопкой Options...
Начинаем оптимизацию. Для работы с файлом (каталогом или папкой) его следует перетащить в окно программы. Можно также открыть через меню, воспользовавшись «Add files». Нажимаете «Optimize all files» для оптимизации.

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

Как сжать иллюстрацию PNG, сохранив качество

Широко применяются три программы для уменьшения веса такого формата:

  • OptiPNG
  • Фотошоп
  • PNGOUT

Давайте сопоставим как они выполняют сжатие. Возьмем логотип nginx.png, который использовался выше. Он весит 27,5 Кб. Первым протестируем фотошоп. Это одна из самых популярных дизайнерских программ, которая позволяет выполнять множество манипуляций с иллюстрациями.

optim3

В Adobe Photoshop открываем "файл — сохранить". Второй вариант — воспользоваться набором клавиш Alt+Shift+Ctrl+S. Запускаем процесс сжатия. В итоге видим картинку, которая весит больше, чем на 17% меньше. После сжатия она 22,7 Кб.

optim4

optim5

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

Тестируем OptiPNG

Утилита была придумана как раз для уменьшения веса иллюстраций PNG (http://optipng.sourceforge.net/).

Скачивая ее, не забудьте про Far Manager, он тоже понадобится.

optipng -o7 nginx.png

Итак, скачали .exe, установили на диск C. Теперь помещаем файл в одну из папок. FAR Manager помогает зайти в папку и ввести команду в консоль. Это заставляет файл сжиматься прямо в папке. Процент сжатия составил без малого треть веса — больше 31%. В итоге картинка весит 18,8 Кб.

optim6

Тестируем PNGOUT

Эта утилита придумана с той же целью, что и OptiPNG. Устанавливаем ее (http://www.advsys.net/ken/utils.htm) по той же схеме.
Теперь по уже описанной схеме открываем папку с PNG и прописываем в командной строке pngout nginx.png. Итоговая экономия после сжатия составила 15%, вес - 23,4 Кб.

pngout nginx.png

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

optim7

Оперативное сжатие

Если вы хотите быстро уменьшить вес иллюстрации PNG в любой из двух последних названных утилитах, вам придется создать файл OptiPNG и PNGOUT png.reg. После этого туда записываются сведения для реестра.

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

Windows Registry Editor Version 5.00
[HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\OptiPNG]
@="Run OptiPNG on Folder"
[HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\OptiPNG\command]
@="cmd.exe /c \"TITLE Running OptiPNG on %1 && FOR /r \"%1\" %%f IN (*.png) DO optipng -o7 \"%%f\" \""
[HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\PNGOUT]
@="Run PNGOUT on Folder"
[HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\PNGOUT\command]
@="cmd.exe /c \"TITLE Running PNGOUT on %1 && FOR /r \"%1\" %%f IN (*.png) DO pngout \"%%f\" \""

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

optim 10

Windows Registry Editor Version 5.00
[-HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\OptiPNG]
[-HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\OptiPNG\command]
[-HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\PNGOUT]
[-HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\PNGOUT\command]

Сжимаем картинки JPEG и JPG, сохраняя качество

Свои утилиты есть и для уменьшения веса иллюстраций JPEG и JPG — jpegtran и jpegoptim. Некоторые пользуются фотошопом, но специалисты рекомендуют эти программамы.

Тестируем jpegtran

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

Скачиваем и устанавливаем программу (http://jpegclub.org/jpegtran/) по привычной схеме. Как и в предыдущих случаях открываем в Far Manager папку с JPEG и вводим в консоли:

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

Progressive JPG, JPEG

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

Для того чтобы удостовериться, является ли иллюстрации Progressive JPEG, достаточно воспользоваться ссылкой (http://highloadtools.com/progressivejpeg).

Оперативное сжатие JPEG в jpegtran

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

Сделать это нетрудно. Просто создайте файл .bat (можно через Far Manager) и запишите:

Пользуемся jpegoptim

Скачайте утилит ( http://sourceforge.net/projects/jpegoptim/) и запустите у себя на компьютере.
Для того чтобы сжать иллюстрацию формата JPG, помещаем в папку и вводим в консоль:

Программа позволяет уменьшать вес иллюстрации JPG, JPEG. В ней можно работать через контекстное меню. Для этого создаем файл jpegoptim.reg и запишем:

Запускаем, потом вносим информацию в реестр и можно сжимать. Для того чтобы оптимизировать сразу много картинок посредством контекстного меню, помещаем их в папку, ПКМ и «Run jpegoptim on Folder».

Для того чтобы убрать jpegoptim из контекстного меню, реестра, придется записать jpegoptim.reg
Затем сохраняем, запускаем и вносим корректировки в реестр.

Тестируем утилиты

Для проверки работы двух названных программ, берем файл caching.jpg, которые до сжатия весил 29,5 Кб. После уменьшения веса файла JPG через jpegtran вес составил чуть больше 29 Кб (1,3%). При оптимизации через jpegoptim экономия составит пару сот байтов.
Во многом такой результат объясняется тем, что первоначальный вариант файла был хорошо подготовлен. Протестируйте утилиты на полновесных картинках и вы увидите, насколько можно сэкономить.

Автоматическая оптимизация иллюстраций

Итак, вы попробовали все варианты, но не один удовлетворил полностью? Тогда можно попробовать собрать самостоятельно сервис по уменьшению веса иллюстраций. Для этого важно правильно составить архитектуру папок. Предположим, что у вас есть папка images, внутри которой еще одна — uploads с собственной последовательностью папок, содержащих файлы PNG и JPG. Давайте создадим новую и назовем ее optimus. Переместим туда images с вложениями. Теперь можно запускать Far Manager, открывать в нем optimus, создать файл go.bat и, наконец, записать:

После этого сохраняем go.bat и запускаем. Оптимизация файлов разного формата будет вестись раздельно. Располагаться сжатые картинки будут по разным папкам.

Корректировать качество и остальные характеристики можно с помощью вышеописанных утилитов.

Сжимаем GIF

Многие задаются вопросом как оптимизировать GIF? Ответ на него простой: «Сделать это невозможно». Используйте в качестве альтернативы PNG, в нем нет лимитов по цветам палитры и есть возможность использования прозрачной подложки. GIF следует применять исключительно для анимированных изображений.

.Еще сайты сделаные нами: