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