Comments 127
UFO just landed and posted this here
сохранить картинку в формате jpg с качеством 100 — это лишнее.
+8
Из всякого правила есть исключения. В данном случае, даже качество 100% дает потери. На 95% они еще более видны.
+1
А не должно.
ЕМНИП, по стандарту JPEG при 100% «качестве» к потоку данных применяется только алгоритм Хаффмана без разбиения на квадратики 8*8 пикселей и квантования.
Значит реализация не придерживается стандарта.
Вроде правильно вспомнил теорию ))
ЕМНИП, по стандарту JPEG при 100% «качестве» к потоку данных применяется только алгоритм Хаффмана без разбиения на квадратики 8*8 пикселей и квантования.
Значит реализация не придерживается стандарта.
Вроде правильно вспомнил теорию ))
+1
Теоретически можно сделать только haffman по всему изображению. На практике это бессмысленно, потому что компрессия будет минимальна. Преимущество jpeg именно в квантовании результатов поблочной DCT трансформации. Выбрасываются ВЧ составляющие, которые глаз не в состоянии увидеть в общем ансамбле. (хотя, это вы, конечно, знаете сами :)
В реальности уровень компрессии определяет только вид матицы квантования, само же разбиение и квантование делают всегда, даже на 100 качества (которые во всех реализациях, кстати, разные).
Вот очень классный ресурс о jpeg.
www.impulseadventure.com/photo/jpeg-compression.html
В реальности уровень компрессии определяет только вид матицы квантования, само же разбиение и квантование делают всегда, даже на 100 качества (которые во всех реализациях, кстати, разные).
Вот очень классный ресурс о jpeg.
www.impulseadventure.com/photo/jpeg-compression.html
+5
Теория, это хорошо, но против эксперимента она бессильна :)
i47.tinypic.com/2lw3o9.png (осторожно, 2 мегабайта).
i47.tinypic.com/2lw3o9.png (осторожно, 2 мегабайта).
+2
Надо было одно изображение отразить горизонтально, для наглядности.
+3
Глазами я ничего не увидел.
Если вам несложно, построите difference для этих двух картинок, чтобы узнать, что происходит на самом деле.
Если вам несложно, построите difference для этих двух картинок, чтобы узнать, что происходит на самом деле.
-2
А я по вашему, что сделал?
+2
Вы нарисовали две картинки горизонтально.
difference это черно-белое изображение, значение яркости каждого пикселя которого равно, например, abs(r1-r2)+abs(g1-g2)+abs(b1-b2).
difference это черно-белое изображение, значение яркости каждого пикселя которого равно, например, abs(r1-r2)+abs(g1-g2)+abs(b1-b2).
-2
JPEG вообще — формат с потерями. И 100% в нём не означает «без потерь».
+1
в данном случае и при 75% — как я проверил — 8 кб и потери не видны
смотрел при 300%
смотрел при 300%
0
Вы ошибаетесь. При 75% картинка весит 2,3кб, а потери видны даже при 100% качестве на 100% масштабе.
0
Более развёрнутый ответ будет такой.
Да, 100% — это не «качество без потерь», а математический предел сжатия алгоритма. Сжатие есть в любом случае, разница в том, какой получится вес итогового изображения. Для большинства картинок, сжимаемых через JPEG (а это в основном фотографии), разница в качестве изображения не будет заметна, например, при 95% и 100%, а разница в объёме будет существенной.
Но! Данный пример является исключением. Если вспомнить, как происходит сжатие в JPEG, то первым шагом будет преобразования цветовой модели изображения в YCrCb: два цветовых компонента и один компонент для яркости. В последнем хранится самая важная для человеческого глаза информация, и именно сжатию этого компонента уделяется особое внимание в JPEG.
Вся суть приведённого примера как раз заключается в изменении яркости, там нет какой-то другой информации, которая могла бы визуально компенсировать недостатки (на фотографиях это цветовые переходы). Поэтому любое, даже небольшое вмешательство в канал яркости будет очень заметным. В данном случае ситуацию усугубляет небольшая разница в яркости между самым светлым участком и самым тёмным: если разложить в фотошопе картинку по YCrCb, то можно увидеть, что разница составляет порядка 30 уровней.
Да, 100% — это не «качество без потерь», а математический предел сжатия алгоритма. Сжатие есть в любом случае, разница в том, какой получится вес итогового изображения. Для большинства картинок, сжимаемых через JPEG (а это в основном фотографии), разница в качестве изображения не будет заметна, например, при 95% и 100%, а разница в объёме будет существенной.
Но! Данный пример является исключением. Если вспомнить, как происходит сжатие в JPEG, то первым шагом будет преобразования цветовой модели изображения в YCrCb: два цветовых компонента и один компонент для яркости. В последнем хранится самая важная для человеческого глаза информация, и именно сжатию этого компонента уделяется особое внимание в JPEG.
Вся суть приведённого примера как раз заключается в изменении яркости, там нет какой-то другой информации, которая могла бы визуально компенсировать недостатки (на фотографиях это цветовые переходы). Поэтому любое, даже небольшое вмешательство в канал яркости будет очень заметным. В данном случае ситуацию усугубляет небольшая разница в яркости между самым светлым участком и самым тёмным: если разложить в фотошопе картинку по YCrCb, то можно увидеть, что разница составляет порядка 30 уровней.
+5
UFO just landed and posted this here
А так же, если уж взялись за такие пляски над размерами градиентов, то глупо забывать про оптимизаторы. С одним простым optipng -o7 размер самого первого градиетна уменшьлся на 20% (1764 -> 1401), а последний на 16% (53716 -> 44726) и не факт, что это лучший случай и лучший оптимизатор.
+2
UFO just landed and posted this here
UFO just landed and posted this here
UFO just landed and posted this here
UFO just landed and posted this here
UFO just landed and posted this here
UFO just landed and posted this here
UFO just landed and posted this here
UFO just landed and posted this here
UFO just landed and posted this here
UFO just landed and posted this here
UFO just landed and posted this here
UFO just landed and posted this here
UFO just landed and posted this here
UFO just landed and posted this here
UFO just landed and posted this here
UFO just landed and posted this here
Но и это неважно, так как размер сетевого пакета обычно от 512 байт.А можно поподробнее?
Означает ли это, что скачать 100 файлов, каждый размером 100 байт, посредством HTTP (отправляя по одному запросу на файл) займёт столько же времени, сколько скачать 100 размером по 500 байт? Или я что-то недопонял?..
И если можно, пожалуйста ссылочку где можно поподробнее об этом почитать.
0
UFO just landed and posted this here
Случайно не в курсе, wap порталы с мобильных так-же поддерживают css-спрайты, png24 и кеширование?
0
Я бы вообще запретил банальные домик, конвертик и карту сайта в шапке.
0
UFO just landed and posted this here
Жаль что на моем мониторе эти два серых квадрата выглядят абсолютно одинаково :(
+16
Не знаю, утешит это вас, или еще больше расстроит, но они зеленые :)
+44
Блин… сраный дальтонизм… ))))
+1
UFO just landed and posted this here
Какие квадраты, о чём вы вообще? На странице не единой картинке же.
+1
интересно провести было бы статистику башэффекта
0
UFO just landed and posted this here
Один я вижу красные круги??
+5
У меня тоже два одинаковых.
Видимо, уже наконец, пора поменять монитор :)
Видимо, уже наконец, пора поменять монитор :)
+4
спасибо, кэп х)
-10
«Правда и вести он» → «весит»
+1
а не лучше ли сделать однопиксельную по ширине полоску и клонировать ее средствами css по горизонтали? например, вот как тут: www.getballpark.com/
+5
Это зависит от того, на сколько вы хотите заморочиться с версткой.
Ну а в целом, это не решает никаких проблем, если вырежете один пиксель из dither градиента, ничего хорошего не получится. Если вырежете пиксель из не-dither градиента там, где цветности не хватает и нужны более мягкие переходы, в общем-то тоже.
Ну а в целом, это не решает никаких проблем, если вырежете один пиксель из dither градиента, ничего хорошего не получится. Если вырежете пиксель из не-dither градиента там, где цветности не хватает и нужны более мягкие переходы, в общем-то тоже.
+1
Однопиксельную делать не стоит, т.к. браузер сделает сотни копий и каждую будет отрисовывать отдельно, что может привести к тормозам при перерисовке страницы.
0
Если особо не приглядываться, то полосок не видно. Но само качество градиента разительно отличается: на первом квадрате лично я вообще градиента почти не вижу. Но у меня с оттенками зелёного плохо :) Спасибо за информацию, полезно.
+1
UFO just landed and posted this here
Прогнал вашу PNG-картинку размером 1 764 байт через OptiPNG (оптимизация палитры, настройки по-умолчанию), получилось 1 417 байт. Ваша картинка давала уменьшение объема на 96.8%, моя — на 97.43% от исходной. Нет предела совершенству…
0
Для джепег качество в 60% также будет вполне приемлемо.
А почему бы не сделать одну картинку в ПНГ с уголками и одну в 1 пиксель шириной — собственно сам фон? Кажется мне, что это оптимальный вариант количество запросов/размер загружаемых изображений. Выйдет 2 изображения размером ок. 5кб. Может я конечно неправ, ибо не верстальщик.
А почему бы не сделать одну картинку в ПНГ с уголками и одну в 1 пиксель шириной — собственно сам фон? Кажется мне, что это оптимальный вариант количество запросов/размер загружаемых изображений. Выйдет 2 изображения размером ок. 5кб. Может я конечно неправ, ибо не верстальщик.
0
так часто и делают. Вверху писали, что зависит от того, как хочется заморачиваться с версткой. Только делают не один пиксель, а потолще, а то иногда бывают эффекты заполнения.
+1
Эгей! Ребята! Это же сайт Microsoft, а не приюта для бездомных животных! Все должно говорить о профессионализме. Не хочется заморачиваться с версткой? Не хочется заморачиваться с разработкой софта, не хочется заморачиваться с поддержкой пользователей и выпуском обновлений. К чему это приведет? Сайт — лицо компании! Хотя, опять-таки, может я не прав.
+6
Вы пишете «Для джепег качество в 60% также будет вполне приемлемо.». Скажите вы сами это проверяли для данного случае, или вы где-то что-то когда-то про это услышали?
Один пиксель не решает никаких проблем.
Один пиксель не решает никаких проблем.
0
в данном случае не проверял, но когда необходимо было сохранять фрагменты дизайна, я сохранял с 60% качества, на глаз ухудшения качества не видно, но если увеличить масштаб, то, возможно, ухудшения будут заметны.
-1
в данном случае не проверял, но когда-то что-то про это слышалНу дак зачем вы тогда это пишете?
0
-1
Да, большая. Вы её можете не видеть, «ибо не верстальщик». Я её вижу, особено на верхнем градиенте, потому что там увеличение цвета меньше чем 1 единица на пискель.
0
UFO just landed and posted this here
Разница между верхними квадратами очень большая, правый неприлично полосит. На нижних разница едва заметна. Монитор нек 2190юкси. Тест www.xrite.com/custom_page.aspx?PageID=77 прохожу без ошибок.
0
у сотрудников MS нетPhotoshop, у них Expression Design ;)
+4
А то, что я вижу полоски градиента на первом примере — это хорошо или плохо?
+1
сотрудники Microsoft не занимаются созданием сайтов, сайты для MS делают рекламные агентства.
+3
вот вот, и эти самые агентства, в лучших традициях хабра
1) научились говорить заказчику «нет»
2) всегда знают лучше, чем заказчик
3) работают не над одним заказом, а получают весь пул заказов из определенной области (веб, раздатка, печать, проведение мероприятий и т.д.), т.е. у сотрудника МС нет выбора, даже при наличии предложений с заявленой ценой в сто раз ниже
4) имеют это не на уровне страны (России), а делают для всех отделений МС
5) как результат имеют огромный входной поток, так что сроки выполнения проектов вечные
6) как результат на исправление каких-либо недочетов времени уже тупо нет
и тд и тп
Вообще смешно, что люди думают, будто в российском МС сидят другие люди, которым платят за градиенты на сайте. В российском МС сидят люди, отвечающие за продажи в России, т.е. за деньги. И тревожит их всего два вопроса — это деньги и доли рынков. Если веб-сайт не помогает заработать денег — то его, скорее всего, даже делать не будут. Ну если только он помогает в краткосрочной или долгосрочной перспективе защищать/наращивать долю рынка. МС — это огромная машина по зарабатыванию денег. И люди там работают очень сфокусированные. Именно поэтому МС никогда не будет выпускать идеальные продукты, вместо этого они будут выпускать продукты хорошие лишь настолько, чтобы выполнить поставленный план.
1) научились говорить заказчику «нет»
2) всегда знают лучше, чем заказчик
3) работают не над одним заказом, а получают весь пул заказов из определенной области (веб, раздатка, печать, проведение мероприятий и т.д.), т.е. у сотрудника МС нет выбора, даже при наличии предложений с заявленой ценой в сто раз ниже
4) имеют это не на уровне страны (России), а делают для всех отделений МС
5) как результат имеют огромный входной поток, так что сроки выполнения проектов вечные
6) как результат на исправление каких-либо недочетов времени уже тупо нет
и тд и тп
Вообще смешно, что люди думают, будто в российском МС сидят другие люди, которым платят за градиенты на сайте. В российском МС сидят люди, отвечающие за продажи в России, т.е. за деньги. И тревожит их всего два вопроса — это деньги и доли рынков. Если веб-сайт не помогает заработать денег — то его, скорее всего, даже делать не будут. Ну если только он помогает в краткосрочной или долгосрочной перспективе защищать/наращивать долю рынка. МС — это огромная машина по зарабатыванию денег. И люди там работают очень сфокусированные. Именно поэтому МС никогда не будет выпускать идеальные продукты, вместо этого они будут выпускать продукты хорошие лишь настолько, чтобы выполнить поставленный план.
+3
Это все Firefox и IE… Для вебкита делается -webkit-gradient, для оперы фон в svg (кстати, мой сниппет на js: pastebin.com/f76aa9ed6 )
-2
В ие можно делать градиенты с незапамятных времен. Я сам, правда, не пробовал, там как обычно, могут быть проблемы со сглаженными шрифтами.
А использовать JS для таких целей не очень хорошо.
А использовать JS для таких целей не очень хорошо.
+1
угу а для IE тоже самое на VML
+1
Т.к мы работаем с МС, то немного в теме по поводу ихних верстаков:
1. Верстальщики там полуфрилансеры (ну уж точно не профессионалы)
2. Верстальщик, который работал с одним из наших дизайнеров просил ему высылать слои отдельно т.к (внимание!) им не разрешают пользоваться Фотошопом!
3. Свёрстанные сайты обычно отдалённо напоминают дизайны
Вот такие у них верстальщики!
1. Верстальщики там полуфрилансеры (ну уж точно не профессионалы)
2. Верстальщик, который работал с одним из наших дизайнеров просил ему высылать слои отдельно т.к (внимание!) им не разрешают пользоваться Фотошопом!
3. Свёрстанные сайты обычно отдалённо напоминают дизайны
Вот такие у них верстальщики!
+3
Кстати, только сейчас заметил что на скриншоте съехала Bing'овская форма поиска. Т.к я и сам занимался вёрсткой сайтов для МС, то помню как один раз я почти день потратил на то, чтобы эта форма корректно отображалась в IE7 и в IE8 mode IE7, даже написал про это статью (http://habrahabr.ru/blogs/webdev/66293/). Так вот о чём я, в гайдах МС есть готовая вёрстка этой формы, я её не юзал, т.к поздно заметил её (или её тогда ещё не было в гайдах, уже точно не помню), и сверстал сам, а теперь вот вижу, что похоже правильно сделал, потому что форму верстали те же люди.
+1
UFO just landed and posted this here
Спасибо за полезный комментарий.
Про то, что картинку размером 1764 бафт можно и дальше оптимизировать, я уже отвечал.
Про «Во-вторых»:
Можете подробно написать, что нужно сделать в CQ чтобы получить PNG, 237 цветов, 10.4 Кб? Я не смог разобраться.
Про то, что картинку размером 1764 бафт можно и дальше оптимизировать, я уже отвечал.
Про «Во-вторых»:
которая смотрелась, на мой взгляд, лучше первой, но неотличимо от большой.Вы видите различие между картинками 55 211 байт и 1 764 байт на глаз? Я не вижу. Ну а программа, как я понял, сделал то же самое, сгладила градиент. Просто ваша инструкция подразумевает «нажми на кнопку и будет магия», моя объясняет что и почему.
Можете подробно написать, что нужно сделать в CQ чтобы получить PNG, 237 цветов, 10.4 Кб? Я не смог разобраться.
+1
UFO just landed and posted this here
UFO just landed and posted this here
UFO just landed and posted this here
Различие все равно есть, поэтому любое мнение будет субъективным.
Мне кажется, что выглядит всеже получше, чем Jpeg-вариант. Хотя, возможно дома, на более ярком мониторе, у меня будет другое мнение. На этом мониторе «эти два серых квадрата выглядят абсолютно одинаково»© :)
Мне кажется, что выглядит всеже получше, чем Jpeg-вариант. Хотя, возможно дома, на более ярком мониторе, у меня будет другое мнение. На этом мониторе «эти два серых квадрата выглядят абсолютно одинаково»© :)
0
UFO just landed and posted this here
Sign up to leave a comment.
Articles
Change theme settings
Оптимизация градиентов в Фотошопе