Пользователь
0,0
рейтинг
25 декабря 2009 в 17:39

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

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

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

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

1. Smush.it!
image

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

2.RIOT
image

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

3.PNGOUT
image

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

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

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

4.Online Image Optimizer
image

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

5.SuperGIF
image

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

6.PNGGauntlet
image

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

7.SuperPNG
image

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

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

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

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

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

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

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

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

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

Приложение для 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)
Пример оптимизации:
image

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

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

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)
image

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

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

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

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

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

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

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (72)

  • НЛО прилетело и опубликовало эту надпись здесь
  • +2
    >сохраненять

    + добавьте незаслуженно забытый pngcrush
    • +1
      Спасибо, добавил.
  • +1
    • +1
      Спасибо, добавил.
  • +1
    • +1
      упс, сорри, привык к формату Плюрка )
    • +1
      Тоже добавил. Отличный инструмент.
  • +1
    + Imageoptim (Mac OS) — очень хорошая программа. Даже очень-очень.
    • +1
      Спасибо, добавил.
    • 0
      Это как раз морда к вышеназванному pngcrush.
  • +1
    Что-то мало посоветовали хабравчане :)

    1) PngRe — позволяет тонко вручную или автоматически настроить размер PNG файла.

    2) pngquant — умеет только одно, конвертирует 32-х битные PNG с альфа-прозрачностью в 8-и битные палитровые PNG с альфапрозрачностью. Но делает это очень хорошо, много лучше Fireworks, хотя тоже не без проблем.
    • +1
      Спасибо, добавил.
  • +1
    + PictureBeaver Артёма Сапегина (для Windows). Цитата со страницы по ссылке: «Для оптимизации используются бесплатные утилиты OptiPNG, jpegtran и Gifsicle».
  • +2
    По тестам, для png максимальная оптимизация достигается в таком порядке:

    optipng -o7 %1
    advdef -z4 %1
    pngout /ks %1
    deflopt %1

    Особенно актуально для постобработки j2me игрушек, если кто занят в этом бизнесе.
    К pngout можно добавить ключик /zl121 для совместимости со старыми парсерами png.
    Чтобы перепаковать jar можно использовать kzip с тем же ключом /zl121.

    И pngout, и kzip написал Ken Silverman.
    • +1
      Спасибо, добавил в описание pngout.
  • +2
    Color quantizer — достаточно сложная, но очень действенная программа по оптимизации количества цветов в картинках. Подойдет профессионалам.
    • +1
      Спасибо, добавил.
    • НЛО прилетело и опубликовало эту надпись здесь
      • НЛО прилетело и опубликовало эту надпись здесь
  • НЛО прилетело и опубликовало эту надпись здесь
    • +1
      Многие из представленных программ используют схожие алгоритмы, со схожей эффективностью. А вот с точки зрения удобства пользования… Тут, как говорится, на вкус и цвет — товарищей нет.
      Кому то (например — мне) удобнее воспользоваться веб-сервисом. Кто-то предпочитает десктопное приложение. А кому то проще из командной строки.
      • НЛО прилетело и опубликовало эту надпись здесь
        • 0
          Почему? Там используется тот же самый консольный pngout, что и во многих других приложениях.
    • 0
      По своему опыту скажу, что лучше всех работает
      pngcrush -rem alla -reduce -brute
      Я уменьшаю скриншоты и небольшие изображения, pngcrush для них выдаёт лучший результат. В редких случаях его обгоняет его же форк OptiPNG, но % таких случаев очень мал, поэтому я «не заморачиваюсь» сравнивать результаты и пользуюсь pngcrush-ем
      • 0
        Присоединяюсь, пара pngcrush + jpegtran эффективнее всего прочего, и легко автоматизируется.
    • НЛО прилетело и опубликовало эту надпись здесь
    • –2
      Фотошоп+руки и голова
      • НЛО прилетело и опубликовало эту надпись здесь
      • НЛО прилетело и опубликовало эту надпись здесь
  • +1
    Очень много утилит для PNG, но для других форматов мало. Исправляю ситуацию :)

    Для GIFGifsicle. Сразу пара примеров:
    Обрезаем прозрачные рамки:
    gifsicle --crop-transparency src.gif > dest.gif

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


    Для JPEG существует официальная программа от Independent JPEG Group — jpegtran
    Оптимизация без потерь (да-да, к jpg это тоже применимо!)
    jpegtran -copy none -optimize -perfect src.jpg dest.jpg

    И ещё много-много программ, которыми я не пользовался )
    • +1
      Гм, насчёт "-copy none" я погорячился, надо было это убрать — так мы удаляем мета-информацию из jpg-файла ))) Хотя это чаще всего тоже нужно делать

      Дубль-2: сжатие без потерь, доп. информацию оставляем
      jpegtran -optimize -perfect src.jpg dest.jpg
      • +1
        -optimize -progressive у меня лучше сжимает, да и для пользователей это кашернее :)
    • НЛО прилетело и опубликовало эту надпись здесь
    • +1
      Спасибо, добавил.
  • +1
    Пытались для себя сделать больше — portal.san.ru/forums/index.php?showtopic=129896

    Немного конечно стоит доработать ещё.
    • +2
      (По ссылке программа Webify, удобная оболочка над pngout, jpegtran, gifsicle)
      • +2
        Спасибо, добавил.
  • +2
    Года три использую PNGout, прекрасный инструмент.
  • +2
    Любое средство, которое позволит ускорить отдачу сайта пользователю должно быть most have в закладках браузера. Тем более в виде установочного пакета/приложения. Надо о людях думать… Есть еще места в РФ, где только dial-up и все :) /*Это не считая почтовых голубей, семафорной азбуки и использования зеркальца в светлое время суток*/
  • +1
    + psydk.org/PngOptimizer.php — PngOptimizer.
    • +1
      Спасибо, добавил.
  • НЛО прилетело и опубликовало эту надпись здесь
    • НЛО прилетело и опубликовало эту надпись здесь
    • НЛО прилетело и опубликовало эту надпись здесь
  • +1
    TweakPNG — entropymine.com/jason/tweakpng/

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

    С помощью утилиты это можно просто удалить. Еще можно выкинуть комментарии типа «edited in Adobe Photshop». Помимо избавления от глюков, получим также небольшой выигрыш в размере.
    • +1
      Добавил, спасибо.
  • +3
    В альфе WEBO Site SpeedUp уже доступен инструмент для автоматического сжатия всех изображений на сайте (пока только через smush.it):
    Оптимизация изображений
  • +1
    Комрады, а вот у меня есть вопрос по оптимизации png.
    Требуется каждый раз сохранять из нормального .psd с альфаканалом в очень хитрый .png с тем же альфаканалом но уже с шумовым смешением цветов под 16-битные экраны (чтобы хоть как-то сглаживать лесенки на градиентах). Я пока знаю тока способ ручного поканального редактирования, что, конечно, немного напрягает. Нет ли способов автоматизировать сей нудный процесс?
    Спасибо.
    • +1
      тю. фотошоп — save for web — png8 (dither 100%)
      если, конечно, я вас правильно понял.
      правда, это 256 цветов
      а если нужно в 16-бит — то прям в шопе перевести картинку в 16 бит (image — mode) и сохранять уже его.
      или я не так вас понял?
      • +1
        save for web сохраняет без альфа канала.
        16 бит это 16-бит на канал, а нужно всего 4 :)
        • +1
          «save for web сохраняет без альфа канала.»
          если вам нужен png8+alpha transparency (т.е. индексная 256-палитра с пол-прозрачными точками) то это в fireworks, он умеет.

          «16 бит это 16-бит на канал, а нужно всего 4 :)»
          4 бита на канал это будет 12 бит в итоге. вы уж определитесь, какая цветность вам нужна на выходе)
          • 0
            Дык вы альфу забыли ;)
          • +1
            Тьфу, прошу прощения, конечно вы правы, я имел ввиду 5-6-5 :) Ну вобщем я решил написать макро :)
    • НЛО прилетело и опубликовало эту надпись здесь
  • +3
    Наблюдение: слово «превосходный» в заголовке на 100% указывает, что это статья-перевод. Даже «Z→Я» не нужно.
    А так, набор полезный, да.
  • +1
    Вообще, практика показывает, что после грамотного сохранения из Save for Web в photoshop и через fireworks для PNG (он боее гибко с ним работает) — все эти инструменты уже выжать ничего не могут.
    ну разве что PNG24/32 иногда можно еще дожать.
    так что дизайнерам, которые пользуются этими прогами в большинстве своем, ворох доп софта не особо нужен.
    это разве что админам сайтов нужно… но надо будет все равно всё перетестить)
    • НЛО прилетело и опубликовало эту надпись здесь
      • +1
        PNG24/32 не может терять качество просто из-за особенностей формата.
        а если вы имеет ввиду, что перед экспортом фаерворкс оптимизирует цвета в изображении для более эффективного сжатия — то сколько пользовался — не видел.
        Можно будет, конечно, провести эксперимент, когда на работе буду, и сделать попиксельное сравнение, но сомневаюсь, что что-то обнаружу…
        А вы это вообще с чего взяли?)
        • НЛО прилетело и опубликовало эту надпись здесь
    • НЛО прилетело и опубликовало эту надпись здесь
      • НЛО прилетело и опубликовало эту надпись здесь
        • НЛО прилетело и опубликовало эту надпись здесь
          • НЛО прилетело и опубликовало эту надпись здесь
            • НЛО прилетело и опубликовало эту надпись здесь
              • НЛО прилетело и опубликовало эту надпись здесь
                • НЛО прилетело и опубликовало эту надпись здесь
                  • НЛО прилетело и опубликовало эту надпись здесь
                    • НЛО прилетело и опубликовало эту надпись здесь
                      • НЛО прилетело и опубликовало эту надпись здесь
                        • НЛО прилетело и опубликовало эту надпись здесь

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