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

**Sumanai** » 25.01.2013, 22:30

Ещё чуть- чуть уменьшил изображения без потери качества. В одном случае отрыв составил целый байт :biggrin:

в остальных побольше. Изображения- в аттаче. Удалены за неактуальностью.

**VEG** » 25.01.2013, 23:23

Каким инструментом пользовались?

**Sumanai** » 26.01.2013, 00:22

Первым попавшимся в гугле на запрос "оптимизация PNG" :toothless:

Вот инструмент:
http://pmt.sourceforge.net/pngcrush/
Вот страница со статьёй (та, что первая в гугле):
http://webo.in/articles/habrahabr/69-total-image-optimization/
Там ещё советы по оптимизации JPEG (удаление метаданных) и GIF (перевод в PNG). Первое может пригодится- видел метаданные фотошопа в некоторых файлах.

**factotum** » 26.01.2013, 16:00

пока лучший инструмент по компрессии Image Catalyst 2.2

**Sumanai** » 26.01.2013, 23:29

factotum:пока лучший инструмент по компрессии Image Catalyst 2.2

Лучше чем pngcrush он не сжал. Собственно, он и содержит pngcrush.

**HD321kbps** » 15.03.2013, 13:51

лично я пользуюсь двумя прогами: PNGGauntlet и PngOptimizer и помоему они не только для формата png

**VEG** » 15.03.2013, 15:30

На мой взгляд лучший набор для оптимизации PNG:

Color quantizer — очень мощная утилита для уменьшения количества цветов (Photoshop нервно курит в сторонке), нужно только немного в настройках разобраться (лучше чем pngquant, pngnq и других консольных аналогов по причине того, что позволяет указывать области, которые наиболее важны в изображении — и алгоритм это учитывает)
TruePng и PngZopfli — оптимизатор и компрессор PNG по новому алгоритму Zopfli от Google
PngOut — оптимизатор и компрессор по алгоритму KZIP в одном флаконе (иногда уделывает Zopfli)

Что интересно, если это всё комбинировать в разном порядке — получаются порой неожиданные результаты :) А вот здесь можно найти обзор всех известных инструментов по оптимизации PNG, плюс автоматический ScriptPng для тех, кому лень вручную возиться с консольными утилитами. Но вручную можно добиться лучших результатов.

**Sumanai** » 17.03.2013, 22:38

VEG:PNG файлы, зашитые в CSS, были оптимизированы

Тогда бы и gif оптимизировали:
Ищем:

Код: Выделить всё: data:image/gif;base64,R0lGODlhBgAYAMQfAL6+v9TU1b29vc/Pz9XW1dDQ0OTk5cbGxsHBwNPU1M3Nztzc3Orq6ubm5tra2uvs7O3u7cTExMvMzMrJyeLj4+Hg4Ojo6OXl5cjIyNfX1t/f39LS0u/v79fX1////////yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJAAAfACwAAAAABgAYAAAFTqB3jZ4nnFsKAEELIFmMIE4d3cty7IuG/RrNZFgpSiSUpERhaCoUjehgarEUrhZGasNgJL6PMIEAKRM6nHQHrV632Wu4u53mzO1svBwdAgAh+QQJAAAfACwAAAAABgAYAAAFTaDnXaS3Cei2AWzgIkgmI5FjR9GiH7ymYUBNZUKsVCRIilKhMDgVg4Z0MLBYC1gGQ7VhPBLgx4NAhpg7HY4areaw12902h1/09v2PDoEACH5BAkAAB8ALAAAAAAGABgAAAVOoCde5LYJ6BYAbBAgcCZHkWNHx6Ifh+ZjwEplQqxQJEgKRcE0OAeDhnRQsFgLBYbWtHk8EuAHhECGQDpojjq97qg5bDgb7ZbX6e+4vhMCACH5BAkAAB8ALAAAAAAGABgAAAVN4OWN17WdQhoEQBtkSJxlUe3cx7HsB6b9GExlOClSKJIkxaBoGgyDaGNaKFiuhQ1je3p4E2AIhECGcDpozjmtZq/V7zYb3ZHX1/f4OQQAIfkECQAAHwAsAAAAAAYAGAAABUzgdXnkJWyoIAQs4GYZImdOZDvOoS88hmlAzKRCnEwoSInSYFA4DY2BtNEoWC1YFGO7STy+iQRkTChzOJ30Od1Zq91ndBvunrPr+HMIACH5BAkAAB8ALAAAAAAGABgAAAVO4CV6pCBsqAAELABkMCI7TmQ7y6EvC+ZrwMmkQpxIKEiJxMBUOBuNgbRhKVgtFtSGwU0kHuAEAUImEDjojjq95qg7bDgb7ZbX6e+4nhMCADs=

Заменяем на:

Код: Выделить всё: data:image/gif;base64,R0lGODlhBgAYAPQfAL6+v9TU1b29vc/Pz9XW1dDQ0OTk5cbGxsHBwNPU1M3Nztzc3Orq6ubm5tra2uvs7O3u7cTExMvMzMrJyeLj4+Hg4Ojo6OXl5cjIyNfX1t/f39LS0u/v79fX1////wAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFAAAfACwAAAAABgAYAAAFTqB3jZ4nnFsKAEELIFmMIE4d3cty7IuG/RrNZFgpSiSUpERhaCoUjehgarEUrhZGasNgJL6PMIEAKRM6nHQHrV632Wu4u53mzO1svBwdAgAh+QQFAAAfACwAAAAABgAYAAAFSaDnXaS3CeinfkDgIkgmI5Fjr99y7JqG/ZrKZIiTUI4KhWGpGDSeOEthymBsroxHYosjQL6dDmccHnNwnLA4XWZ3cGu2uX1euUMAIfkEBQAAHwAsAAAAAAYAGAAABUmgJ17ktgnoFgDs535IJkeRY0fHor+fhv2VymRYoUiOPIVhORg0noOCZcpjmDaPR2L7gBC+vA5n3BGTzRwep2xmnzvh8RpdlpdDACH5BAUAAB8ALAAAAAAGABgAAAVJ4OWNX/ltQhoEQBtkSGx+kWMfx6IfmObPlYmQQpEYKQaFcjZoOAsFi7SwYVhnj4QWAiF4IZyOeNbhmMXmcNk8U6/F77FprU53QgAh+QQFAAAfACwAAAAABgAYAAAFSeB1eeQlbOinfgHgZhkiZ05kr9+x7Bim/ZhJZYijSI4Gg2JpaAyeuIJlimJYN4mHFgcheDmcjhgs7uA64DCavObg1Osy27xqhwAAIfkEBQAAHwAsAAAAAAYAGAAABUngJXqkIGyoAATs534ZIjtOZDvLob8fpv2TSWU4kVCOPINi2WgMng1LYcrbMK6JxGObIEC+PE5nzBGTzR1ep2xmnznh8RpdlpdDADs=

Итого экономим 28 байт :toothless:

**VEG** » 17.03.2013, 23:48

А gif-ки чем оптимизируете?

**HD321kbps** » 17.03.2013, 23:56

не пользуемся гифками=)

**VEG** » 17.03.2013, 23:59

HD321kbps, к сожалению, Chrome и IE не поддерживают APNG, поэтому без них никак. Плюс на маленьких изображениях до 100 байт они дают выигрыш в объёмах, если сравнивать с оптимизированным PNG.

Добавлено спустя 16 минут 32 секунды:

Sumanai:Итого экономим 28 байт

При помощи SuperGIF удалось сэкономить 219 байт :)

**Sumanai** » 18.03.2013, 01:01

VEG:А gif-ки чем оптимизируете?

gifsicle
С помощью него же из оптимизированного SuperGIF файла удалось выжать ещё 50 байт :smile:

Итоговый размер файла 450 байт, размер в Data URL 622, новый код для замены:

Код: Выделить всё: data:image/gif;base64,R0lGODlhBgAYAPIHAL6+vtbW1szMzePj5MTEw93d3e7u7v///yH/C05FVFNDQVBFMi4wAwEAAAAsAAAAAAYAGAAAAy14s3fwIUIJYnglk615EWAGCssAlueSmuk4GJYBR/Jc0zI+Bzke7zdeLxgUxhIAIfkEBQAACAAsAAAAAAYAGAAAAy54N3wBMLwo6SMlE6x3FmAxgAJDMmNpqilKGoYUwDItwfFs47et17lfL8fTEX0JACH5BAUAAAgALAAAAAAGABgAAAMueDocAdBBIKMjpGisC9dCyITCKA4kg5amGhqwE8QOPRsyjN+7XtvA3S1H8/EcCQAh+QQFAAAIACwAAAAABgAYAAADLzi3M/EgQhkieCSXrbnYhSA0gziWYmOqKUsKgSE/svHENp3jd63nPtxupusNib4EACH5BAUAAAgALAAAAAAGABgAAAMuOHM8EBC8KOkrJBestxBb8SnDqHzCaaJqqkBGDMtBbED1PeN0rtuzX2+oy/FiCQAh+QQFAAAIACwAAAAABgAYAAADLTh6DBDQwSCjK4VorAkWIFaAykAqp3mCAnpORgzFxiwHNFzbur7nuBsw2LMlAAA7

Против 719 байт файла и 982 в Data URL в изначальном варианте.
Притом надо применять именно в последовательности SuperGIF -> gifsicle, в обратном порядке ломается анимация в изображении.

**HD321kbps** » 27.03.2013, 21:49

ну так какая то лучше 1 или проще использовать фотошоп и не париться?

**VEG** » 28.03.2013, 01:43

HD321kbps, можете использовать связку Color quantizer (с уменьшением количества цветов) + PngOut, остальное может дать дополнительный выигрыш, но он будет небольшим. Результат сильно превосходит Photoshop-овский Save for Web.

**HD321kbps** » 28.03.2013, 02:16

но только в png а в gif и jpg фотошоп выигрывает

**JoteRuso** » 28.03.2013, 02:33

HD321kbps:а в gif ... фотошоп выигрывает

По своей работе постоянно создаю в Фотошопе рисунки, которые сохраняю в оптимизированном для WEB формате .gif
Сегодня из любопытства скачал программку SuperGIF - так она ужала все мои ужатые Фотошопом файлики ещё на 30-35%. Качество при этом не пострадало.
Нужная вещица. Теперь постоянно будет у меня на вооружении.

**VEG** » 28.03.2013, 02:43

HD321kbps, если изображения объёмом более 100 байт, то обычно PNG8 легко обходит GIF по степени сжатия. Плюс он поддерживает альфа-канал, что очень важно.

А jpg можно попробовать «дожимать» при помощи jpegtran (без изменений в качестве).

**pisikot** » 28.03.2013, 04:36

VEG, А как им пользоваться? На русском есть мануал?)

**Heroin** » 28.03.2013, 11:27

вот этот сервис очень порадовал

**VEG** » 28.03.2013, 12:19

pisikot:VEG, А как им пользоваться? На русском есть мануал?)

Я использую два таких варианта:

Код: Выделить всё: jpegtran -copy none -optimize -progressive input.jpg output.jpg jpegtran -copy none -optimize input.jpg output.jpg

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