Photoshop vs. Fireworks: сжатие

Original author: Web Designer Wall
  • Translation
Удивительно, но основываясь на результатах моего недавнего исследования существует немало пользователей Fireworks. Лично я им никогда не пользовался. Обычно, я использую Photoshop при ежедневной работе. Но, знаете ли вы, что Fireworks лучше, чем в Photoshop сжимает изображения? Я не программист, я не могу объяснить, почему Fireworks  сжимает лучше. Но я могу доказать это, показав серию экспериментов, которые я провел.

PNG сжатие


Для теста, я использовал несжатую картинку с прозрачностью. Экспортируем изображение Photoshop’ом в PNG-24 с прозрачностью и получаем файл размером около 352 кб. Используя ту же картинку я экспортировал его в PNG-32 при помощи  Fireworks. Размер файла составляет около 332 кб. Визуально оба изображения выглядят одинаково (по крайней мере для меня). Однако размер файла экспортированного Fireworks примерно на 20 кб меньше.

PNG сжатия

GIF сжатие


Затем экспортируем изображение в GIF, 256 цветов, adaptive, with no dither.
Результаты: Fireworks = 88kb, Photoshop = 92kB. То есть на 4 кб меньше. Кроме того, изображения не одинаковы. Мне больше понравилось изображение экспортированное Fireworks’ом, поскольку оно имеет больше деталей.

рисунок сжатия

Сжатие JPG


Сейчас я постараюсь сжать JPG. Я экспортировал изображение в Photoshop с 60% качеством. Размер файла составил около 80 кб. Затем я экспортировал это же изображение в Fireworks с 80% качеством и получил файл размером 72 кб. Экспортируемые изображения выглядят одинаково, однако Fireworks опережает Photoshop на 8 Кб.

сжатия JPG

Обратите внимание: Fireworks и Photoshop имеют различные технологии сжатия. 80% сжатия в Fireworks аналогично 60% сжатия в Photoshop.

Что особенного?


Разве это имеет значение? Это лишь несколько килобайт ... Эти килобайты оказывают большое влияние на ваш трафик и скорость загрузки.

Приведем пример. С помощью Fireworks я могу уменьшить размер логотипа на сайте на 20кб. При 16000 посещений в день имеем следующий трафик. 20 Кб х 16 000 = 320, 000 кб (забываем что в мегабайте 1024кб – прим. переводчика). Это целых 320 мегабайт в сутки! И здесь я говорю только о логотипе. Могли бы вы представить себе, как много трафика я могу сэкономить, если сожму всю графику на сайте с помощью Fireworks? Самое главное, я могу сделать так, чтобы мой сайт загружался быстрее!

WDW результатов

Заключение


Если у вас есть Photoshop и Fireworks, можете попробовать сами. Вы будете удивленны результатами. С этого момента, я собираюсь использовать Fireworks для экспорта веб-графики, особенно графических шаблонов.

Перевод: Блог о дизайне и компьютерной графике

Similar posts

AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 88

    +2
    Fireworks CS4 хорош, а нём можно делать интерактивные прототипы, которые потом с лёгкостью режутся для дизайна.
    Таким образом можно исключить отдельную отрисовку прототипа в Axure.
      +3
      Фотошоп запихивает много (иногда лишней) информации в EXIF теги. Из них, например превьюшка (если я правильно понял). Копался как то в тэгах, через питоновскую библиотеку pyEXIF, и обнаружил достаточно объемные поля.
        +3
        Я думаю, автор не забыл о такой банальности и отключил в «Save for web» экспорт всего лишнего.
          0
          Автор мог забыть про Dithering…
            +1
            много работал с оптимизацией в шопе.

            CTRL+ALT+SHIFT+S

            а там можно выбрать все параметры, и насколько я знаю в этом режиме не записывается лишняя информация в EXIF теги.
            0
            Не поверил своим глазам, сразу сделал тест! Fireworks CS4 жмет и в правду лучше!
            Photoshop CS4
            Fireworks CS4
              0
              изображение, полученное в фотошопе, немного более резкое. Попробуй сам открыть на отдельных табах и покликай туда-сюда, смотря на детали)
                0
                Есть такое.
                Не сразу заметил, только после 5-6 переключений по полоскам на фоновом доме.
                  +2
                  Я это видел еще на перевью в фотошопе, это не резкость, это видимые искажения которые начинаются при данном сжатии в фотошопе…

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

                  В оригинале этого нет, также как и нет на версии сделанной в Fireworks CS4… Размеры файлов одинаковые, все ненужное включая meta в шоповской версии выключено.

                  Соответственно вывод — Fireworks CS4 рулит…
              +7
              >>>При 16000 посещений в день имеем следующий трафик. 20 Кб х 16 000 = 320, 000 кб
              А кэш? Можно подумать, все 16000 пользователей уникальны и зашли на сайт первый раз.
            • UFO just landed and posted this here
                +1
                А что за шрифт в тексте над картинками?
                  0
                  Одна из версий Garamond в разных начертаниях.
                    0
                    спасибо
                  0
                  А чем сделаны картинки со скриншотами экспортированных картинок? Плюс картинки сохранены в JPG, что ведет к дополнительной потере качества, что не дает судить об одинаковом качестве картинок читателям.

                  «Обратите внимание: Fireworks и Photoshop имеют различные технологии сжатия. 80% сжатия в Fireworks аналогично 60% сжатия в Photoshop.» — Как это выяснено, опытным или взято с другого источника?
                    0
                    Опытным путем другого источника
                      0
                      а можно примеры какие-нибудь? действительно интересно…
                    +4
                    Заметил одну особенность — дизайнерам-верстальщикам удобнее вырезать в Photoshop, а программерам-верстальщикам в Fireworks.
                      0
                      Интересное наблюдение.
                      Пожалуй, соглашусь с вами.
                        0
                        просто Fireworks интутивно понятней, чем Photoshop
                        0
                        Как именно вы экспортировали изображения фотошопом? Если что, я намекаю на Save for Web.
                          0
                          Насколько я понял, автор статьи пользовался именно этим способом.
                            0
                            Как вы поняли? Нигде об этом не сказано.
                          +1
                          «Я экспортировал изображение в Photoshop с 60% качеством»

                          Сохранение через Save for Web это по-моему единственное место где можно выбрать качество JPG на выходе в процентном соотношении.
                            0
                            File->Save As-> выбираем формат JPEG, JPG -> получаем диалог с выбором качества и не только :)
                              0
                              Но там не проценты а пункты от 1 до 12
                                0
                                ну это и есть качество… вряд ли кто-то использует 87% или 52%… обычно число кратно 5. ИМХО
                                  0
                                  Верно.
                                  Я обычно использую 75%
                                    0
                                    Мои рабочие проценты сжатия в шопе 50-70%, до появления первых видимых искажений…
                                    +1
                                    Может я безумный, но я в сейвфорвебе часто выбираю значения, не кратные пяти, типа 81%
                                      0
                                      Ага. Особенно если ползунком.
                                        +1
                                        Да, во-многом из-за него. Двигаю, пока в размере не появляется приятное глазу число, а качество визуально не меняется.
                                        0
                                        Это естественно, делаю также )) Это же не громкость в Нокии 90 — 95 — 100 ))
                                0
                                Если бы fireworks CS4 не был бы так мегаглючен, то вопросов не возникало бы. А пока не могу смериться с мильоном глюков и тормозов
                                • UFO just landed and posted this here
                                  0
                                  да… когда в целом картинки сжимать разница в килобайты, в десятки килобайт есть… но когда тем же файрворксом режешь дизайн для табличной верстки, разница в пару килобайт безполезно смотреть, разве я не прав?
                                    0
                                    Fireworks отличная штука, но у меня под OS X (хак) есть одна большая проблема: вот видео
                                    Панель свойств не переключается пока курсор в движении. Напрягает.
                                    CS4 обновлена через интернет до последней версии. OSX 10.6 (в 10.5 также).
                                    Это у всех так? Или виноват мой компьютер?
                                    +4
                                    ну э. не знаю, что за монитор у автора, но на файрвоксных картинках больше мусора (на джпег особенно) — утверждать, что картинки выглядят одинаково я бы не стал.
                                    да и собственно если наложить джпег справа на джпег слева, видно, что мусора больше.



                                    хотя и то, что картинки сами в джпег могло сыграть роль %) но по-моему это борьба с ветряными мельницами
                                      –2
                                      Тут важнее что за монитор у клиента :)
                                      +7
                                      У Fireworks есть одна неприятная особенность — он по умолчанию привязывает цвета к некой «адаптивной палитре» и намеренно уменьшает их количество. Т.е. если мне нужно сохранить картинку в максимальном 8-битном качестве, то мне придётся повозиться. Как жаль, что нет Fw под рукой — сказал бы точнее, со скриншотами.

                                      А Photoshop как раз наоборот — выставляет цвета максимально точно, а дальше уже можно начать настраивать.

                                      И если автор не приводит точных настроек экспорта в каждом редакторе, не пытается анализировать качество картинок на выходе и, кажется, совсем не знает о постобработке PNG и JPG, которая может значительно уменьшить вес картинок… то эта статейка является незамысловатым популистским выхлопом и чудесным образом иллюстрирует анекдот:

                                      — Армяне в пять раз лучше, чем грузины!
                                      — Чем лучше?!
                                      — Чем грузины!
                                      © В. Макишвили
                                      • UFO just landed and posted this here
                                          +1
                                          Вадим имеет ввиду вот что: ссылка.
                                          Как видите, кол-во доступных цветов 256, а используется 118. При смене режима палитры меняется режим «Alpha Transparency». При смене «Alpha Transparency» режим палитры сбрасывается на «Adaptive». Тень у картинки получается очень не однородная. А вот эта же картинка, сконвертированная консольной утилитой pngquant. Как видите, тень ровная.
                                            +1
                                            Вот, да — именно это я имею в виду. Спасибо )
                                            +1
                                            имеется в виду Exact?
                                            0
                                            Так там элементарно можно выбрать палитру для экспорта Adaptivve, Exact и т.д. Причем применить ее можно и ко всей картинке и к отдельным слайсам.
                                              0
                                              Я к тому, что редактор пытается думать за пользователя, причём весьма назойливо. Поэтому многие этого просто не замечают/не понимают как это работает и пишут, что Fw оптимизирует лучше, чем Ps.
                                                0
                                                Знаешь (ничего, что «на ты», коллего дисидент? ;), вот как раз у меня от работы с FW только положительные эмоции, и у меня не создалось впечатления, что он думает за меня. Может быть, действительно, во время настроек экспорта приходится сделать пару лишних кликов по сравнению с Ps (тебе явно виднее, у меня недостаточен опыт работы с последним — я в нем готовлю изображения только для полиграфии), но для веба — это самый удобный для меня редактор. Я с ужасом наблюдаю, что с ним творят в Адобе. Думаю, что нам просто не оставят выбора.
                                                  0
                                                  > ничего, что «на ты», коллего дисидент? ;)

                                                  Как будет угодно )

                                                  Раскрою тайну, я пользовался Fireworks ещё с 4-й версии, наверное до тех пор, когда Adobe купил Macromedia. Но перешёл на Photoshop я не из-за этого. А из-за небрежности. К примеру: шейпа с острым углом рендерит дополнительный грязный пиксельный хвост в конце угла; если отразить чёткий симметричный объект, то может появиться мыло; если нужно очень точно настроить стили текстового блока, то ждёт облом — настройки хуже, чем в Ps; и многое другое, что уже не вспомню. Это было справедливо, по крайней мере, пару лет назад. Не думаю, что это до сих пор поправили.

                                                  Помню как прямо-таки заставлял себя работать в Ps и, в итоге, не сожалею. Всё-таки это отраслевой стандарт и уровень проблем в совместной работе с кем-то гораздо ниже.

                                                  По одной вещи скучаю дико — по возможности разрезать шейпу ножом, ну и по самой векторно-растровой философии, безо всяких масок-из-кривых-на-заливках…
                                                    0
                                                    По поводу «мыла» у шейпов — интересно, не замечал. Но разве не связано это с тем, какая кисть назначена для обводки?

                                                    Что приспособился к Ps после Fw — респект, по поводу промстандарта — крыть нечем.
                                                +1
                                                Попробуйте, для картинки example выбрать exact. У меня перескакивает на web adaptive с ужасным качеством. Может, я что-то не так делаю?
                                                • UFO just landed and posted this here
                                                    0
                                                    Для таких градиентных заливок подойдет png24, там про тип палитры можно забыть
                                                  0
                                                  Про JPEG спорно, да. Но PNG Fireworks жмёт всегда лучше, чем Photoshop.
                                                  Конечно, потом ещё оптимизирующими утилитками всякими поджать можно, но это уже другая тема.
                                                    0
                                                    То, что Photoshop пишет в файлы много лишнего — согласен. Но на то они и придуманы эти утилитки. Зато сам процесс работы и настройки экспорта не имеют аналогов по удобству. Хотя я не утверждаю, что там всё просто отлично — есть над чем работать. Всё-таки Fireworks изначально был заточен для веба.
                                                • UFO just landed and posted this here
                                                  • UFO just landed and posted this here
                                                      +4
                                                      Чикуенок вообще сумасшедший.
                                                      Профессионал он невероятный
                                                        0
                                                        Да, помнится, кода занимался версткой, то прочитал эти статейки о формате PNG.
                                                        Впечатлило настолько глубокое исследование вопроса.
                                                      –7
                                                      Всё равно ACDSee 3.1 сжимает круче всех. (:
                                                        0
                                                        MS Paint! Только он!
                                                        0
                                                        Очень полезная информация.

                                                        Интересно было бы сравнить результат с другими граф. редакторами, например с моим любимым Xara Xtreme
                                                        • UFO just landed and posted this here
                                                          • UFO just landed and posted this here
                                                            +2
                                                            /me задумчиво смотрит на ImageMagic, неспешно ворочающий многогигабайтными битмапами
                                                              –6
                                                              странное сравнение программных продуктов…
                                                              Вы оставили в стороне такие вопросы как
                                                              — удобство эксплуатации
                                                              — стоимость лицензии
                                                              — функциональные возможности
                                                              — и много чего еще, важного и нужного

                                                              Пофиг, раз сжимает лучше, то однозначно, пересаживаемся за Fireworks!!!
                                                                +3
                                                                Таким образом можно было сравнить еще то, как «сжимает» паинтбраш и Internet Explorer. Никаких настроек, никаких действительно важных параметров сжатия не указано, складывается впечатление неосведомленности автора в плане всех тонкостей сжатия конкретных форматов.
                                                                  –2
                                                                  Вопрос немножко не в тему, но может быть кто-то подскажет:
                                                                  Почему XnView уменьшает png-иконки нормально, а после уменьшения в Photoshop края становятся кривыми?
                                                                    +1
                                                                    В Photoshop есть порядка 5-ти режимов уменьшения картинок.
                                                                    Вы просто не умеете его готовить.
                                                                    0
                                                                    конечную картинку ещё прогнать через PngOptimizer и в итоге картинка теряет в весе 30-40% (удаляется метаинформация и прочий мусор который остаётся после Фотошопа и Файрворкса).
                                                                      0
                                                                      пользуюсь прогой PNGGauntlet. Очень удобная с графическим интерфейсом + можно настраивать алгоритмы оптимизации
                                                                        0
                                                                        Ну-ну, не надо обещать золотые горы.
                                                                        Обычно не больше 5-10%, зависит от конкретных картинок.
                                                                        Для мелкой графики иногда и 0% выходит, причём я использую самую эффективную утилиту — ImageOptim, которая прогоняет через несколько алгоритмов и выбирает лучший.
                                                                        –1
                                                                        Приходилось сталикавать с Fireworкs (еще во времена второй версии программы). Честно скажу, не понимаю зачем держать второе приложение, фактически, тоько для импорта изображений. Лет 10 пользуюсь фотошоповским плагином vimas для сжатия графики, еще ни разу даже пришла місль изменить его на что-то другое. А для тех господ, котоые говорят что Fireworкs еще и нарезает, скажу — Вы, господа пробовали на нем резать сложное изображение? Я да. Ужас, ужас, ужас
                                                                          –5
                                                                          20 Кб х 16 000 = 320, 000 кб (забываем что в мегабайте 1024кб – прим. переводчика).

                                                                          В мегабайте как бы 1000 килобайт. Так что всё правильно =)

                                                                          bit.ly/8i9pCs
                                                                            +1
                                                                            ru.wikipedia.org/wiki/%D0%91%D0%B0%D0%B9%D1%82

                                                                            во-вторых, увеличительные приставки означают за каждую тысячу 1024=210 (килобайт равен 1024 байтам, мегабайт равен 1024 килобайтам, или 1 048 576 байтам; и т. д. с гига-, тера- и петабайтами (больше пока не употребляются)). Разница возрастает с ростом веса приставки. Более правильно использовать двоичные приставки, но на практике они пока не применяются, возможно, из-за неблагозвучности — кибибайт, мебибайт, йобибайт и т. п.

                                                                            Так что не надо тут ля-ля.
                                                                            0
                                                                            Ещё большего сжатия можно добиться специализированными для этого программами, например для PNG существует проект optiPNG, для JPEG есть плагин к IrfanView LosslesJpegRotation в котором есть опция оптимизации файла без потерь, png соответственно тоже без потерь. Для GIF не интересовался, но уверен что и для этого формата существуют оптимизаторы.
                                                                              0
                                                                              на последней картинке я вижу разницу в цветах.
                                                                                +2
                                                                                Fireworks активно использую в работе лет 10, он с успехом заменяет мне Photoshop при создании сайтов.
                                                                                По экспорту картинок для веба — он вне конкуренции, да и сама концепция совмещения векторной и растровой графики в проекте — очень удачная.
                                                                                Очень разочаровал Fireworks CS4 своей тормознутостью и «новаторским» интерфейсом. Есть подозрение, что Adobe погубит-таки этот великолепный продукт.
                                                                                  0
                                                                                  в фотошопе тоже есть некое подобие вектора — custom shapes. Единственное чего там не хватает по-сравнению с файрворксом — это динамического эффекта блюра на эти шейпы, чтобы можно было в реальном времени менять настройки эффекта, остальное вроде бы всё есть.
                                                                                    0
                                                                                    Фотошоп развивается, спору нет. Продукт очень мощный и заслуживающий всяческого уважения. Но для меня переход с Fw на Ps (в текущем их состоянии) — страшный сон, к которому, впрочем, морально готовлюсь. :)
                                                                                    0
                                                                                    мне для веба он тоже больше нравится
                                                                                    и тормоза в нем — главный минус
                                                                                    версия CS2 или CS3, не помню уже, сильно начинала тормозить после продолжительной работы
                                                                                      0
                                                                                      Согласен, памяти он и раньше жрал прилично. Но сейчас, аппетиты вообще непомерные. А CS4 еще и запускается медленно. Буду на CS3 пока сидеть — вроде бы он оптимален на текущий момент.
                                                                                    0
                                                                                    Я использую Paint.NET для пережатия картинок с фотошопа.
                                                                                    Даже 4х пиксельные картинки, фотошоп умудряется раздуть :)
                                                                                    • UFO just landed and posted this here
                                                                                        +1
                                                                                        +1
                                                                                        www.artlebedev.ru/tools/technogrette/img/png-3/

                                                                                        Люююди! Прежде всего автор :)
                                                                                        Формулировка «Fireworks СЖИМАЕТ лучше Photoshop» в данном случае неприемлема, ибо ничего не сжимается. Причина другая: Fireworks НЕ сохраняет лишнюю информацию, которую сохраняет Photoshop

                                                                                        Сжатие PNG, JPG и GIF — это тема совсем другого разговора ;-)
                                                                                      • UFO just landed and posted this here
                                                                                          –1
                                                                                          Попробуйте FastStone Image Viewer для сжатия.
                                                                                          А вообще так статьи не пишут — надо картинки для сравнения приводить оригинальные, а не пережатые в JPG. Иначе просмотреть и перепроверить нельзя. А раз так сделано — то возникает подозрение, что результаты подтасованы.

                                                                                          Only users with full accounts can post comments. Log in, please.