Наглядное сравнение JPEG и PNG

[shaida]

И, да, девушка из топика.

[Ctacok]

Без неё топик впринципе бы не существовал :)

[shaida]

Да, вся цветовая гамма взята из её волос!

[Root1564]

Ну, Вы прям парфюмер дизайна! :)

[qmax]

даже блюр у текста

[ertaquo]

Зачем нам 700-килограммовая девушка? о_О

[aavezel]

чтоб на всех хватило :)

[Vertex]

Вы ее есть собрались? Если нет, то там 700 другого должно быть… :)

PS: блин… это ж не лепра…

[kirilloid]

700кг хурмы?! убиться >_<

[smartfin]

Блоггер Другой поперхнулся наверное.

[k12th]

> девушка низкого качества

[VladislavGH]

Во многих смыслах.

[mono2k]

Au revoir, Shoshanna!

[usja]

Жаль, что просыпаясь нельзя её видеть возле себя вживую :(

[pxx]

Кому-то наверное можно.

[bagyr]

Lenna все равно круче, для тестирования алгоритмов сжатия в том числе.

[Aracon]

В полный рост особенно.

[pavelpromin]

О! Спасибо за сайт с нескучными обоями.
Я тут новую ОС делаю. Люди ее полюбят!

[pavelpromin]

Совсем не я, — то был какой-то дурак. Я — другой дурак.

[3em]

простые истины

[Alukardd]

На статью это явно не тянет. Ни выводов, ни комментариев… Просто ни чего…

[bondbig]

Вы не поняли, это просто тонкий пиар Susan Coffey.

[qrazydraqon]

Пиарить человека с почти 30 миллионами просмотров на devaiantArt'е? Это действительно тонко.

[bondbig]

Слегка допиарил

[mark_ablov]

[shaida]

Да, это вдохновитель.

[nett00n]

простите, не удержался.

[nett00n]

Ой, случайно запостилась дважды. =_=

[ks_ks]

Нашли 10?

[nett00n]

можно кидать в меня тухлыми помидорами, но девушка в PNG мне тоже кажется сочнее.
Но я сейчас на работе за ультрабюджетным старым включенным 24/7 монитором, может быть что-то с неравномерным освещением матрицы.

[gaelpa]

<img src="… 1.png"/>

[homm]

А ниче, что у вас эта картинка в формате png?

[nett00n]

Хабр, ЕМНИП, не умеет SVG-картики. Ну и я в неудобном положении, пришлось делать скриншот SVG в любом случае.

[homm]

Ну что-ж, проверим.

[jMas]

SVG для картинок? О_о

[nett00n]

Ниже есть.

[jMas]

Эээх… Уже понял.

[highw]

Повторение — мать учения

[agul]

Как-то ни о чем…

[Bone]

Кроме того png нужен, когда на картинке должны быть прозрачные участки.

[Nail13]

— PNG оптимален в тех случаях, когда пожатая им картинка весит меньше, чем JPG в приемлемом качестве!
— Спасибо, капитан!!!

[mdss]

зачем вообще использовать графику для текста?

[Mertas]

да, зачем вообще жить в реальном мире?

[ap3rus]

В некоторых случаях это более приемлемо, чем использование встраивания шрифтов

[bondbig]

Например, скриншоты.

[sova]

или конспекты=)

[SKYnv]

откройте любой азиатский сайт…

[stampoon]

ru.wikipedia.org/wiki/PNG — без потерь
ru.wikipedia.org/wiki/JPEG — с потерями
И что мы сравниваем?
А за мигающие надписи убивать :)

[shaida]

В топике JPEG тоже без потерь.

[homm]

Что вы называете джипегом без потерь? (если что, такого не бывает)

[shaida]

Сохранение без сжатия.

[homm]

Баз сжатия — это BMP.

[shaida]

Как вы объясняете абсолютное отсутствие разницы между двумя приведённым фотографиями?

[leviathan]

Исходник уже был в JPEG.

[homm]

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

[shaida]

Но где же? Попиксельно ведь рассматривал.

[homm]

Я же все показал.

[PsySonic]

лицорука.рф

[homm]

Очень просто — отсутствия разницы нет. Т.е. есть присутствие разницы, потому что JPEG тоже без потерь нет.

[int02h]

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

[merlin-vrn]

Всё-таки не всем известно, что Lossless JPEG-ов существует три разных алгоритма, все они — строго без потерь (Lossless JPEG, JPEG-LS и один из режимов JPEG2000)

[int02h]

Действительно не знал. Спасибо. Обязательно посмотрю.

[homm]

Чтобы развеять все сомнения я предлагаю вам посмотреть обучающий мультик:
narod.ru/disk/10919826001/ScreenFlow.mov.html

[kirilloid]

в BMP, кстати, бывает RLE сжатие ;-)

[int02h]

Но оно все равно без потерь =)

[Kyborg2011]

А что вы скажите насчет:

Алгоритм JPEG позволяет сжимать изображение как с потерями, так и без потерь (режим сжатия lossless JPEG).

— по вашей же ссылке…

[shaida]

О чём я и твержу…

[homm]

Успокойтесь, конкретно ваш jpeg с потерями. Третий раз давать ссылку на видео не буду.

[shaida]

Я думал, там действительно мультик, как вы писали выше.
Ок. Понятно.
Странно.
Спасибо.

[VadNov]

капитан? О_О

[Mairon]

А WebP, кстати, Гуглом хвалёный, как? Вроде, кроме Chrome, теперь его Opera поддерживает и какие-то графические редакторы.

[Mihrutkin]

А еще PNG позволяет делать полно-цветную 24 bit анимацию, в отличии от GIF.

[Mear]

PNG — анимацию? Вы ничего не путаете?

[Mihrutkin]

Нет, ничего. Вот например: img232.imageshack.us/img232/7707/spinfoxbx6.png

[mark_ablov]

это APNG

[Mear]

А где анимация?

[Mear]

По крайней мере в последнем стабильном хроме ничего не двигается

[Mihrutkin]

Переходите на православную Opera

[mitrichlab]

выкатите ей пару яиц и пасочку, благо дата способствует.

[adminimus]

>Даже Дебиановский «Firefox» не поддерживает APNG

iceweasel 4.0, все работает

[adminimus]

ничего не патчил, брал из официального репозитория, из экспериментальной ветки (в более стабильных пока еще древние версии).

[adminimus]

ну так и что это меняет? Это все тот же дебиан, рано или поздно до стейба доберется.

[akzhan]

в Chrome dev, IE 9 — нет.

Есть в FF4, Opera.

[homm]

en.wikipedia.org/wiki/APNG

[InneR]

FF4.0, Арч линукс, двигается. RDP, мне кажется, влиять не должен.

[drakmail]

FF4.0, AgiliaLinux, тоже двигается.

[kirilloid]

FF4.0, WinXP, аналогично.

[cypok]

Mac OS X, Safari — анимации нет

[AMCDM]

Пока не поддерживается WebKit-based браузерами.
Только Опера и ФФ.

[nps]

Только Престо и Гекко, лучше сказать.

[iZENfire]

Midori сделал один цикл анимации по приведённой ссылке.
Firefox 4.0 анимирует в цикле пока не закроешь вкладку.

[doubled]

Наверное, имеется в виду APNG, который пока анимированный в некоторых браузерах.

[Dim0FF]

Продолжим сравнение…

[Shersh]

Субботние сиськи на хабре!

[Klu4nik]

А вы в курсе что сегодня самый жесткий пост?

[Zibx]

Да, этот пост жесток!

[S_A]

Женщин можно, только не жирных

[mokaton]

Пожалуй, самый лучший каммент в этом топике.

[047]

Моя любимая модель :) Уже можно сказать, что старая знакомая.

[BiSeTrojanov]

Слышите за спиной его вдох и выдох?

[047]

Главное, чтобы не Джимми Тадески казался соседом :)

[sainnr]

А дальше?!

[qrazydraqon]

А дальше вот: susancoffey.deviantart.com/gallery/

[jMas]

Топик походу был запощен ради этой подруги. Другого объяснения не вижу. :)

[GreenAngel]

Спасибо Артемий Андреевич!

[nolka]

все-таки, Рыжие — самые красивые девушки)

[Xevus]

Она конечно красивая, спору нет. Но очевидно крашеная, такого цвета волос в природе не бывает.

[Xevus]

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

[Agent_Smith]

Ух ты, Донецк.

[047]

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

[homm]

В циферках.

[047]

Вот жеж блин, я то думал в качестве изображения :)

[Ogra]

Можно сравнивать качество изображения при сопоставимом размере, либо размер при сопоставимом качестве. Как ни поверни, результат одинаков ;)

[AVET]

В PNG более насыщенный цвет у волос на фотке. Так что как-бы разница есть, а если нет — пора либо к окулисту, либо монитор нормальный покупать.

[nolka]

терминатор? :D

[AVET]

Достаточно поюзать EYE3, чтобы сравнить цветовую палитру. Она разная, как ни странно.

[Antar]

Как бы там все одной картинкой png, а не одна jpg, а другая png.
Сравнение качества двух картинок тут вообще не уместно!

[AVET]

Как бы на PNG можно отобразить JPEG, а если наоборот — будет потеря качества.

[Antar]

Спасибо, буду знать

[Palehin]

Казалось бы, простые вещи, даже пишут, что «на статью не тянет» — а счётчик добавления в избранное растёт :)

[shaida]

Да :) Но карму, как и ожидалось, слили.

[sledopit]

Дык сиськи в комментах, потому и добавляют (:

[Vovan145]

Теперь уже красоту девушек оценивают по колличеству пикселей:)

[stryaponoff]

Для текста оптимален формат TXT!

[nps]

Написал stryaponoff в формате HTML.

[stryaponoff]

HTML — не формат, а язык разметки. Более того, я-то написал как раз plain text, в таком же виде оно и хранится в БД.

[nps]

Тогда в формате языка разметки гипертекста. Дополняя то ↑, обсуждается не способ ввода или хранения, а способ вывода информации.

[evindor]

А я когда работал в техподдержке у одного крупного хостера регулярно получал от клиентов скриншоты в *.doc…

[zelenin]

я, работая фрилансером, за последнюю неделю скрины получил 5 раз, но в .docx :-)

[evindor]

Работая фрилансером я таких клиентов стараюсь избегать :)

[pacahon]

Png vs Jpeg. Надо только вспомнить оригинальное качество этого комикса.

[Troppus]

Лень загружать фотошоп и накладывать изображение девушки из оригинальной статьи друг на друга, сравнивая попиксельно. На глаз видно, что там использована абсолютно такая же картинка (одна обозвана JPEG, другая — PNG). Касательно текста, иногда полезно использовать GIF, действуйте по ситуации (верстальщики/дизайнеры меня поймут).

[shaida]

Нет. Выше сравнили. Там разные картинки.

[Troppus]

Тогда извиняюсь, старею… :-)

[Troppus]

Все-таки, загрузил фотошоп, наложил картинки — так вот, картинки идентичны. Убедитесь сами (я имею ввиду приближенные картинки где четко видны пиксели).

2Автор: какие параметры сжатия были использованы в JPEG?

[shaida]

Нет, они, действительно, разные.

Quality 100%, но стояла галочка Optimized (она экономила 2кб).
Видимо, поэтому и разные.

[homm]

Нет, не по этому. Jpeg, сохраненные с оптимизацией и без нее идентичные.

[homm]

> На глаз видно, что там использована абсолютно такая же картинка
На глаз? Абсолютно? Еще один сказочник.

[hazg]

1. Девчёнка хорошо сфоткана\крашена\поставлена.
2. Картинки одинаковые — мессадж автора, циферки — главное (ну размер фотки, блин, при одинаковом отображении)
3. Ее в svg не надо переводить. Много получится.

Короче — автор имел в виду размер фотографии. (?))))

[ekzo]

как это могло попасть сюда?

[HoochieMen]

Первая мысль после прочтения поста: «Спасибо, Кэп»

[shaida]

Изначально хотел назвать топик «Кэп и графические форматы» :)
Но всё же, как бы не было очевидно, уже 40 человек добавили топик в избранное.

[HoochieMen]

он хорош тем что можно давать его ссылку упертым заказчикам etc :)

а я занес в избранное коммент с «продолжением сравнения svg и png» :D

[shaida]

Да.

У меня тут есть черновик поста [публиковать не буду] про сглаживание шрифтов.
Как раз про упёртых клиентов…


… которые не понимают, что в графическом редакторе иное сглаживание.

[HoochieMen]

Охх это вообще больная тема) сглаживание на макете и просьбы клиента сделать так же и в ie6 на xp )

[Nashev]

А на макете сглаживание выключать разве нереально?

[HoochieMen]

«так же красивее» — говорит заказчик, и если верстка не на мне, у зазчика свой «дизайнер» то приходится долго объяснять. И дело в том что дизайнер понимает, но без сглаживания его макет будет не так хорошо выглядеть и заказчик может его попросить ещё поработать над ним.

ненаю может быть такие глупости только у меня были при работе, но запоминаются они надолго)

[pel]

Айтишники плакали, ругались, но продолжали постить вторую сотню комментов благодарностей? :)

[WNeZRoS]

Картинки отличаются, вот маска различия: habreffect.ru/files/32c/b1248c461/mask.png (красные пиксели — различающиеся). Различаются не сильно, в основном +1 к одному из цветов.

[Sap_ru]

Вообще-то и так заметно — посмотрите на волосы. Правда у меня профессиональный монитор, но очень заметно — как минимум оттенок должен в глаза бросаться. А ещё волосы в JPEG замылены.

[homm]

Разница в каждом пикселе не более чем на 1 деление 256-и цветной шкалы. Какие вы там различия в волосах заметили?

[nett00n]

дык робот детектед же =)

[Nashev]

А нафига в увеличенном образце текста png цветные пятна jpg-шных артефактов вокруг букв?

[LoneCat]

Это не jpeg'шные артефакты, это cleartype и иже с ним.

[Nashev]

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

[LoneCat]

Ну тогда извиняюсь, на моем мониторе этого не видно.

[Nashev]

Вы можете, при желании, увидеть их на своём мониторе с помощью графического редактора, чтоб понять о чём я говорю. Но я вижу их и на другом мониторе (правда, тут уже серыми).

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

[shaida]

Эти пятна — это фон с сайта lipsum.com

[Nashev]

хм… занятно. Отчасти, извиняюсь. Но вот нафига этот фон в этом топике?

[shaida]

Так получилось.

[Nashev]

Поправить-то ещё ж не поздно…

[selenite]

IT vintage. Давайте использовать PCX!
Тут и lossless, и сжатие…

[Osaka]

Взять оригинал в JPG, после этого делать попиксельное сравнение между JPG и PNG, это круто.
Не было идей оригинал в RAW брать, не имеющий JPG-сжатия т.е.?

[kirilloid]

Зачем? Всё равно фотки для просмотра в браузере будут делать в jpg.

[naum]

Да и результаты могли немного отличаться. Тем более не стоит забывать про многочисленные возможности png-оптимизации.

[Starnger]

Еще вспомним пиксельную графику.

[Starnger]

Вспомним же.

[nikitasius]

Сиськи в субботу = плюсы в воскресенье, ай да хабр!.. но суровый понедельник расставит все на свои места.

[AmdY]

ппц.
топик ни о чём от автора который нифига не понимает в форматах и в комментах можно увидеть его эпик фэйл habrahabr.ru/blogs/design/118026/#comment_3844072. в итоге полсотни в избранном и +73.
а в комментах картинок больше чем на фишках. а пост с тремя большими фотками девушки в неглиже не относится вообще к теме, но уже +39 habrahabr.ru/blogs/design/118026/#comment_3844093.

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

[kirilloid]

Пора создать свой хабр с блэкджеком и без картинок с девками. Читайте

[kirilloid]

… блин. Читайте stackoverflow. Его можно именно читать как ленту — полезно бывает.

[AmdY]

здесь клёвый ресурс, клёвые авторы, клёвые статьи, но мусора развелось больше чем спама на мэйле.

я, кстати, на SO, и здесь на QA, и на phpclub не только читать, но и помогаю по мере возможности, но большая часть времени уходит на поиск чего-то интересного в тоннах интернет мусора.

[nikitasius]

добавил в избранное — чтобы на трезвую голову завтра просмотреть комменты и решить что с ним делать:)
Время то 3:55 по МСК.

[giner]

Именно поэтому появился вот этот топик: habrahabr.ru/blogs/habrahabr_ideas/116857/

[shaida]

Я не говорю, что этот мой пост отличный.
Вообще, меня удивило то, что он стал лучшим за сутки. Но раз стал, значит это кому-то нужно.

Я против системы ППА. Разве эти суммы могут кого-то стимулировать? 500-700 рублей…
Автор должен получать удовольствие от того, что его читают.
Эти поощрения, лично для меня, как ложка негатива в бочке удовлетворения.

Очень не хотел постить в профильный блог, но другого подходящего не нашёл.
В оффтопик кидать было жалко.

[giner]

Думаю что такой топик лучше в персональные блоги постить. А если в профильный писать, то нужно его делать более развёрнутым: задача, начальные условия, результаты экспериментов, результат — ну что-то вроде этого.
А тут, судя по голосованию, у нас просто получился холивар: плюсы за топик поставили те, кто любит PNG, а так же те, кто согласен с вами в данном вопросе. Минусы поставили те, кто не любит PNG и те, кто считает топик пустым или очевидным. Вот вам и голосовалка получилась.

[Nashev]

Картинка-то полезная, но вот чуток не качественная. Подправьте, плиз, чтоб она безусловно полезная стала!

(я про habrahabr.ru/blogs/design/118026/#comment_3845941)

[nikitasius]

Что плюсы достались другому — нечего ныть. Данный проект посещяет множество человеков, подмножество из этого множество на нем сидит. Группе из 45 (уже 45, а не 39) данный пост понравился. 8-ми понравился твой.
Люди заработали плюсы на статьях и комментах и отдали ему. Откровенный рейтингодроч — это уже ММОРПГ'ом попахивает:)
Главное набрать прожиточный минимум для возможности писать статьи и ничего более.
Тем более не все логинятся каждый раз, а уж тем более чистях кукисы, а дети/{младшие, старшие}{браться, сестры} есть у многих, и мнение владельца аккаунта не всегда совпадает с тем, кто этот аккаунт использует.
Ты можешь даже решить, что этот пост писал не я:)

[Nordvind]

Топик года =) Веб-дизайн для самых маленьких.

[root_sashok]

Никого не смущает, что у автора в посте все картинки — PNG? :)

[shaida]

Выше уже обсуждалось.
PNG — без потерь.

[sigmatik]

На самом деле это была реклама сайта wallbase.cc? ))

[nikitasius]

автор отмазался, предоставив рабочую полную версию девушки.

[glazs]

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

[padonaque]

ограниченная политра :)

[shaida]

Тогда уж «ограничение — поллитра» :)

[yvanko]

А вот по-моему, идеальный пост =)

[glazs]

Деактивировать!

[NickyX3]

А вообще даже 8-bit GIF & PNG сравнивая на простом таком градиенте. Все сохранялось в 32 цвета, ибо картинко 32x32
habreffect.ru/files/d28/48c6e786c/test.png

продолжаю использовать PNG

[AntonDiaz]

> Для текста оптимален формат PNG

А мне казалось, что для текста оптимальны txt, rtf, doc…)