How to become an author
Search
Write a publication
Pull to refresh

Comments 127

UFO just landed and posted this here
Из всякого правила есть исключения. В данном случае, даже качество 100% дает потери. На 95% они еще более видны.
Total votes 5: ↑3 and ↓2+1
А не должно.

ЕМНИП, по стандарту JPEG при 100% «качестве» к потоку данных применяется только алгоритм Хаффмана без разбиения на квадратики 8*8 пикселей и квантования.

Значит реализация не придерживается стандарта.

Вроде правильно вспомнил теорию ))
Total votes 5: ↑3 and ↓2+1
Теоретически можно сделать только haffman по всему изображению. На практике это бессмысленно, потому что компрессия будет минимальна. Преимущество jpeg именно в квантовании результатов поблочной DCT трансформации. Выбрасываются ВЧ составляющие, которые глаз не в состоянии увидеть в общем ансамбле. (хотя, это вы, конечно, знаете сами :)

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

Вот очень классный ресурс о jpeg.
www.impulseadventure.com/photo/jpeg-compression.html
Total votes 5: ↑5 and ↓0+5
Хм, видимо я запомнил какую-то совсем древнюю версию стандарта :)
Впрочем память уже не та, что раньше. За ссылку спасибо.
Total votes 2: ↑2 and ↓0+2
Теория, это хорошо, но против эксперимента она бессильна :)
i47.tinypic.com/2lw3o9.png (осторожно, 2 мегабайта).
Total votes 2: ↑2 and ↓0+2
Надо было одно изображение отразить горизонтально, для наглядности.
Total votes 3: ↑3 and ↓0+3
Глазами я ничего не увидел.

Если вам несложно, построите difference для этих двух картинок, чтобы узнать, что происходит на самом деле.
Total votes 2: ↑0 and ↓2-2
А я по вашему, что сделал?
Total votes 2: ↑2 and ↓0+2
Вы нарисовали две картинки горизонтально.
difference это черно-белое изображение, значение яркости каждого пикселя которого равно, например, abs(r1-r2)+abs(g1-g2)+abs(b1-b2).
Total votes 2: ↑0 and ↓2-2
Нет, я нарисовал 4 картинки, оригинал, джипег 100%, различие и различие + контраст. Я не знаю, почему вы можете не видеть последние две.
Total votes 4: ↑4 and ↓0+4
JPEG вообще — формат с потерями. И 100% в нём не означает «без потерь».
Total votes 1: ↑1 and ↓0+1
в данном случае и при 75% — как я проверил — 8 кб и потери не видны
смотрел при 300%
Total votes 2: ↑1 and ↓10
Вы ошибаетесь. При 75% картинка весит 2,3кб, а потери видны даже при 100% качестве на 100% масштабе.
Total votes 2: ↑1 and ↓10
Для меня загадка, для чего вы решили сжать в jpg первую картинку, которая с прозрачными областями. Пожалуйста, когда просто так, для себя, что-то сожмете в следующий раз, не пишите «в данном случае», чтобы не вводить людей в заблуждение.
Total votes 5: ↑3 and ↓2+1
вот вы смешной
я как раз о джепеге писал
и во со мной спорили
непонятно — зачем :)
Total votes 5: ↑2 and ↓3-1
я как раз о джепеге писал Поздравляю. Для меня загадка, для чего вы решили сжать в jpg первую картинку.
Total votes 5: ↑3 and ↓2+1
Более развёрнутый ответ будет такой.
Да, 100% — это не «качество без потерь», а математический предел сжатия алгоритма. Сжатие есть в любом случае, разница в том, какой получится вес итогового изображения. Для большинства картинок, сжимаемых через JPEG (а это в основном фотографии), разница в качестве изображения не будет заметна, например, при 95% и 100%, а разница в объёме будет существенной.

Но! Данный пример является исключением. Если вспомнить, как происходит сжатие в JPEG, то первым шагом будет преобразования цветовой модели изображения в YCrCb: два цветовых компонента и один компонент для яркости. В последнем хранится самая важная для человеческого глаза информация, и именно сжатию этого компонента уделяется особое внимание в JPEG.

Вся суть приведённого примера как раз заключается в изменении яркости, там нет какой-то другой информации, которая могла бы визуально компенсировать недостатки (на фотографиях это цветовые переходы). Поэтому любое, даже небольшое вмешательство в канал яркости будет очень заметным. В данном случае ситуацию усугубляет небольшая разница в яркости между самым светлым участком и самым тёмным: если разложить в фотошопе картинку по YCrCb, то можно увидеть, что разница составляет порядка 30 уровней.
Total votes 5: ↑5 and ↓0+5
UFO just landed and posted this here
А так же, если уж взялись за такие пляски над размерами градиентов, то глупо забывать про оптимизаторы. С одним простым optipng -o7 размер самого первого градиетна уменшьлся на 20% (1764 -> 1401), а последний на 16% (53716 -> 44726) и не факт, что это лучший случай и лучший оптимизатор.
Total votes 2: ↑2 and ↓0+2
Забывать, конечно, не стоит, на реальных проектах. Но ведь статья об оптимизации фотошопом ;)
Да и без ±20% в данном случае, хорошо видно, когда размер слишком большой, когда уже приемлем.
This comment wasn’t rated yet0
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
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 байт? Или я что-то недопонял?..

И если можно, пожалуйста ссылочку где можно поподробнее об этом почитать.
This comment wasn’t rated yet0
UFO just landed and posted this here
UFO just landed and posted this here
Случайно не в курсе, wap порталы с мобильных так-же поддерживают css-спрайты, png24 и кеширование?
This comment wasn’t rated yet0
Я бы вообще запретил банальные домик, конвертик и карту сайта в шапке.
This comment wasn’t rated yet0
UFO just landed and posted this here
Жаль что на моем мониторе эти два серых квадрата выглядят абсолютно одинаково :(
Total votes 16: ↑16 and ↓0+16
Не знаю, утешит это вас, или еще больше расстроит, но они зеленые :)
Total votes 46: ↑45 and ↓1+44
Блин… сраный дальтонизм… ))))
Total votes 3: ↑2 and ↓1+1
Специально с баша пришел ваш диалог прочитать =)
Total votes 17: ↑17 and ↓0+17
тоже пришел с баша, помня что цвет был голубой, а квадраты реально зеленые (которые последние)
Total votes 4: ↑4 and ↓0+4
лемминги идут!
и я оттуда же пришел :)
Total votes 1: ↑1 and ↓0+1
и я с баша. а у меня похоже всё ок с моником — зелёные квадраты ^_^
Total votes 1: ↑1 and ↓0+1
И я, всем привет :)
С моником все в порядке.
Total votes 1: ↑1 and ↓0+1
и я с баша пришёл…
млин…
квадраты серые :(
Total votes 1: ↑1 and ↓0+1
UFO just landed and posted this here
Какие квадраты, о чём вы вообще? На странице не единой картинке же.
Total votes 1: ↑1 and ↓0+1
включите отображение картинок в браузере ))
This comment wasn’t rated yet0
UFO just landed and posted this here
Пермские компьютеры смеются над вашей графикой и отображают картинки исключительно в ASCII.
This comment wasn’t rated yet0
интересно провести было бы статистику башэффекта
This comment wasn’t rated yet0
UFO just landed and posted this here
Один я вижу красные круги??
Total votes 11: ↑8 and ↓3+5
У меня тоже два одинаковых.
Видимо, уже наконец, пора поменять монитор :)
Total votes 4: ↑4 and ↓0+4
Не торопитесь. Если у вас LCD монитор, особенно что-то вроде BenQ с очень маленьким откликом, dithering применяется микроконтроллером дисплея для того, чтобы скрыть уменьшенные диапазоны яркостей компонент цвета. Дело в том, что для повышения скорости отклика градации цвета сделали большими.
This comment wasn’t rated yet0
Спасибо. Но лучше в личку.
Total votes 5: ↑4 and ↓1+3
а не лучше ли сделать однопиксельную по ширине полоску и клонировать ее средствами css по горизонтали? например, вот как тут: www.getballpark.com/
Total votes 5: ↑5 and ↓0+5
Это зависит от того, на сколько вы хотите заморочиться с версткой.
Ну а в целом, это не решает никаких проблем, если вырежете один пиксель из dither градиента, ничего хорошего не получится. Если вырежете пиксель из не-dither градиента там, где цветности не хватает и нужны более мягкие переходы, в общем-то тоже.
Total votes 3: ↑2 and ↓1+1
Можно вырезать полоску в несколько пикселей из dither градиента. Особенно это касается градиентных фонов и пр.
Total votes 1: ↑1 and ↓0+1
Однопиксельную делать не стоит, т.к. браузер сделает сотни копий и каждую будет отрисовывать отдельно, что может привести к тормозам при перерисовке страницы.
This comment wasn’t rated yet0
UFO just landed and posted this here
UFO just landed and posted this here
Если особо не приглядываться, то полосок не видно. Но само качество градиента разительно отличается: на первом квадрате лично я вообще градиента почти не вижу. Но у меня с оттенками зелёного плохо :) Спасибо за информацию, полезно.
Total votes 1: ↑1 and ↓0+1
А теперь прокрутите страницу так, чтобы верхний квадрат встал туда, где был нижний. Отличается не качество градиента, а угол обзора разных точек экрана на ЖК мониторах :)
This comment wasn’t rated yet0
Хм, верно ведь :) Тогда я вообще градиента не вижу ни там, ни там. Но полоски всё равно можно различить.
Total votes 1: ↑1 and ↓0+1
UFO just landed and posted this here
В данном случае не лучше использовать гиф. Ни для одной рассмотренной картинки.
Total votes 8: ↑7 and ↓1+6
Прогнал вашу PNG-картинку размером 1 764 байт через OptiPNG (оптимизация палитры, настройки по-умолчанию), получилось 1 417 байт. Ваша картинка давала уменьшение объема на 96.8%, моя — на 97.43% от исходной. Нет предела совершенству…
Total votes 2: ↑1 and ↓10
черт, было чуть выше) вот теперь точно все комменты прочитал.
Total votes 2: ↑1 and ↓10
Для джепег качество в 60% также будет вполне приемлемо.

А почему бы не сделать одну картинку в ПНГ с уголками и одну в 1 пиксель шириной — собственно сам фон? Кажется мне, что это оптимальный вариант количество запросов/размер загружаемых изображений. Выйдет 2 изображения размером ок. 5кб. Может я конечно неправ, ибо не верстальщик.
Total votes 2: ↑1 and ↓10
так часто и делают. Вверху писали, что зависит от того, как хочется заморачиваться с версткой. Только делают не один пиксель, а потолще, а то иногда бывают эффекты заполнения.
Total votes 1: ↑1 and ↓0+1
Эгей! Ребята! Это же сайт Microsoft, а не приюта для бездомных животных! Все должно говорить о профессионализме. Не хочется заморачиваться с версткой? Не хочется заморачиваться с разработкой софта, не хочется заморачиваться с поддержкой пользователей и выпуском обновлений. К чему это приведет? Сайт — лицо компании! Хотя, опять-таки, может я не прав.
Total votes 6: ↑6 and ↓0+6
В этом вы правы. Но о чем можно говорить, если у них даже шапка на это странице с помощью javascript центруется.
This comment wasn’t rated yet0
Вы пишете «Для джепег качество в 60% также будет вполне приемлемо.». Скажите вы сами это проверяли для данного случае, или вы где-то что-то когда-то про это услышали?
image

Один пиксель не решает никаких проблем.
This comment wasn’t rated yet0
в данном случае не проверял, но когда необходимо было сохранять фрагменты дизайна, я сохранял с 60% качества, на глаз ухудшения качества не видно, но если увеличить масштаб, то, возможно, ухудшения будут заметны.
Total votes 1: ↑0 and ↓1-1
в данном случае не проверял, но когда-то что-то про это слышал
Ну дак зачем вы тогда это пишете?
This comment wasn’t rated yet0
Да, большая. Вы её можете не видеть, «ибо не верстальщик». Я её вижу, особено на верхнем градиенте, потому что там увеличение цвета меньше чем 1 единица на пискель.
Total votes 6: ↑3 and ↓30
В таком случае будем делать так: на сайтах для верстальщиков будем использовать несжатую графику, ибо они видят, а для обычных пользователей сжатую (60-70%). ;-)
Total votes 4: ↑1 and ↓3-2
по вашей логике, там где не видно, говном мазать можно
Total votes 5: ↑5 and ↓0+5
можно и там, где видно, это уже на ваш вкус
Total votes 3: ↑0 and ↓3-3
UFO just landed and posted this here
йе богу не вижу, может все дело в мониторе, сейчас в настройках поковыряюсь.
Total votes 4: ↑0 and ↓4-4
Разница между верхними квадратами очень большая, правый неприлично полосит. На нижних разница едва заметна. Монитор нек 2190юкси. Тест www.xrite.com/custom_page.aspx?PageID=77 прохожу без ошибок.
This comment wasn’t rated yet0
у сотрудников MS нетPhotoshop, у них Expression Design ;)
Total votes 8: ↑6 and ↓2+4
А то, что я вижу полоски градиента на первом примере — это хорошо или плохо?
Total votes 1: ↑1 and ↓0+1
сотрудники Microsoft не занимаются созданием сайтов, сайты для MS делают рекламные агентства.
Total votes 3: ↑3 and ↓0+3
вот вот, и эти самые агентства, в лучших традициях хабра
1) научились говорить заказчику «нет»
2) всегда знают лучше, чем заказчик
3) работают не над одним заказом, а получают весь пул заказов из определенной области (веб, раздатка, печать, проведение мероприятий и т.д.), т.е. у сотрудника МС нет выбора, даже при наличии предложений с заявленой ценой в сто раз ниже
4) имеют это не на уровне страны (России), а делают для всех отделений МС
5) как результат имеют огромный входной поток, так что сроки выполнения проектов вечные
6) как результат на исправление каких-либо недочетов времени уже тупо нет

и тд и тп

Вообще смешно, что люди думают, будто в российском МС сидят другие люди, которым платят за градиенты на сайте. В российском МС сидят люди, отвечающие за продажи в России, т.е. за деньги. И тревожит их всего два вопроса — это деньги и доли рынков. Если веб-сайт не помогает заработать денег — то его, скорее всего, даже делать не будут. Ну если только он помогает в краткосрочной или долгосрочной перспективе защищать/наращивать долю рынка. МС — это огромная машина по зарабатыванию денег. И люди там работают очень сфокусированные. Именно поэтому МС никогда не будет выпускать идеальные продукты, вместо этого они будут выпускать продукты хорошие лишь настолько, чтобы выполнить поставленный план.
Total votes 3: ↑3 and ↓0+3
Это все Firefox и IE… Для вебкита делается -webkit-gradient, для оперы фон в svg (кстати, мой сниппет на js: pastebin.com/f76aa9ed6 )
Total votes 4: ↑1 and ↓3-2
В ие можно делать градиенты с незапамятных времен. Я сам, правда, не пробовал, там как обычно, могут быть проблемы со сглаженными шрифтами.

А использовать JS для таких целей не очень хорошо.
Total votes 1: ↑1 and ↓0+1
угу а для IE тоже самое на VML
Total votes 1: ↑1 and ↓0+1
UFO just landed and posted this here
меня приколол сам факт того что вместо поддерживаемого решения на основе CSS, предложили какой то костыль. И это при том, что я еще не видел веб-приложений в которых оптимизации такой ценой были бы актуальны.
Total votes 1: ↑1 and ↓0+1
Т.к мы работаем с МС, то немного в теме по поводу ихних верстаков:
1. Верстальщики там полуфрилансеры (ну уж точно не профессионалы)
2. Верстальщик, который работал с одним из наших дизайнеров просил ему высылать слои отдельно т.к (внимание!) им не разрешают пользоваться Фотошопом!
3. Свёрстанные сайты обычно отдалённо напоминают дизайны

Вот такие у них верстальщики!
Total votes 3: ↑3 and ↓0+3
Кстати, только сейчас заметил что на скриншоте съехала Bing'овская форма поиска. Т.к я и сам занимался вёрсткой сайтов для МС, то помню как один раз я почти день потратил на то, чтобы эта форма корректно отображалась в IE7 и в IE8 mode IE7, даже написал про это статью (http://habrahabr.ru/blogs/webdev/66293/). Так вот о чём я, в гайдах МС есть готовая вёрстка этой формы, я её не юзал, т.к поздно заметил её (или её тогда ещё не было в гайдах, уже точно не помню), и сверстал сам, а теперь вот вижу, что похоже правильно сделал, потому что форму верстали те же люди.
Total votes 1: ↑1 and ↓0+1
UFO just landed and posted this here
Спасибо за полезный комментарий.

Про то, что картинку размером 1764 бафт можно и дальше оптимизировать, я уже отвечал.

Про «Во-вторых»:
которая смотрелась, на мой взгляд, лучше первой, но неотличимо от большой.
Вы видите различие между картинками 55 211 байт и 1 764 байт на глаз? Я не вижу. Ну а программа, как я понял, сделал то же самое, сгладила градиент. Просто ваша инструкция подразумевает «нажми на кнопку и будет магия», моя объясняет что и почему.

Можете подробно написать, что нужно сделать в CQ чтобы получить PNG, 237 цветов, 10.4 Кб? Я не смог разобраться.
Total votes 1: ↑1 and ↓0+1
UFO just landed and posted this here
Я загружаю картинку и она сразу становится такой. Ни о какой оптимизации речи, конечно, не идет. Может быть я что-то уже накрутил? Я бы с радостью сбросил настройки, если бы было понятно, как.
This comment wasn’t rated yet0
UFO just landed and posted this here
UFO just landed and posted this here
UFO just landed and posted this here
Различие все равно есть, поэтому любое мнение будет субъективным.

Мне кажется, что выглядит всеже получше, чем Jpeg-вариант. Хотя, возможно дома, на более ярком мониторе, у меня будет другое мнение. На этом мониторе «эти два серых квадрата выглядят абсолютно одинаково»© :)
This comment wasn’t rated yet0
UFO just landed and posted this here
Sign up to leave a comment.

Articles

Show the best of all time
Change theme settings

Your account

Sections

Information

Services

Support
© 2006–2024, Habr