Будущее формата CSS image

Лого в CSS (38.79КиБ) Мои эксперименты с картинками на чистом CSS внезапно дали следующий результат. Я взял для экспериментов логотип студии Лебедева в первом попавшемся цвете и перегнал его в CSS image при помощи своего конвертора, используя все префиксы браузеров: «webkit», «moz», «o» и «ms» («Конкерор» включать не стал, доля этого браузера исчезающе мала).

Оказалось, что если сжать получившийся файл (браузеры же понимают сжатый CSS), то получившийся файл будет размером меньше, чем та же картинка в формате PNG: 2,5КБ против 6,7. Файл с лого Студии я пропускал через онлайновый оптимизатор PNG (punypng), так что он вряд ли неоптимален.

Чем объяснить такой разврыв между форматом, предназначенном для эффективного сжатия графики, и неэффективным текстовым, с огромной избыточностью, сжатым обычным гзипом я не знаю.

Добавлено позднее: в комментариях картинку «утоптали» в 448 байт. Непонятно почему у меня такой плохой PNG получился.
12 ноября 2011 15:06

bolk (bolknote.ru)
12 ноября 2011, 15:31

Вот, на всякий случай лого, с которым я эксперементирую:

logo.pnghttp://fotki.yandex.ru/users/bolknote/view/360422/?page=1

А это файл, который получился (в браузере его открывать не нужно, там один и тот же HTML несколько раз, повторенный с разными префексами, а не реальное демо): http://zalil.ru/32042119 (будет лежать около 10 дней).

zg (zg.livejournal.com)
12 ноября 2011, 15:44, ответ предназначен bolk (bolknote.ru):

«Конкерор» — это вообще что и где? в убунте нашёл rekonq, но это точно не то, там обычный вебкит.

Гость (инкогнито)
12 ноября 2011, 15:49

Вы раскрыли тайну тотального контроля за людьми))))

sergey larionov (инкогнито)
12 ноября 2011, 15:57

зависит от самой картинки, если сохранить в svg - будет еще меньше.

javaorca (инкогнито)
12 ноября 2011, 16:06

Если сохранить логотип в gif (с палитрой в 4-8 цветов), то будет ещё меньше.

bolk (bolknote.ru)
12 ноября 2011, 16:23, ответ предназначен zg (zg.livejournal.com):

http://ru.wikipedia.org/wiki/Konqueror

bolk (bolknote.ru)
12 ноября 2011, 16:24, ответ предназначен javaorca

Если сохранить логотип в gif (с палитрой в 4-8 цветов), то будет ещё меньше.
Думаю, если потом пересохранить в PNG, то станет ещё меньше :) GIF в исключительно редких ситуациях даёт выигрыш. А картинка-то не исказится от 4-8 цветов?

Максим Зотов (maxim-zotov.livejournal.com)
12 ноября 2011, 16:59, ответ предназначен bolk (bolknote.ru):

Открыл страницу artlebedev.ru
Логотип на ней это картинка http://img.artlebedev.ru/f/global/i/_logo_2.png
размером 777 байт. Откуда 7-килобайтная?
лого, с которым я эксперементирую
размер файла http://img-fotki.yandex.ru/get/5820/35419492.5b/0_57fe6_45bd8ec2_orig
7126 байт, а не 6895, как в скриншоте сообщения. Если взять этот файл и пересохранить в графическом редакторе, получится 984 байт.

То, что в файл можно записать данные неэффективно, без сжатия, с какой-нибудь кучей левой информации или еще не знаю как - так себе открытие.

smbdy (инкогнито)
12 ноября 2011, 17:00

Пересохранил логотип в PNG, получил на выходе файл в 860 байт. Можно еще меньше.

Максим Зотов (maxim-zotov.livejournal.com)
12 ноября 2011, 17:05

Если взять этот файл и пересохранить в графическом редакторе
Конкретно Gimp при открытии этого файла пишет, что в файле есть собственный Color profile и предлагает сконвертить в RGB. Судя по всему, этот профиль и занимает основной объём файла.

anwerso (инкогнито)
12 ноября 2011, 17:07

http://anwerso.com/junk/logo.png (448 bytes) - не все еще потеряно для png.

bolk (bolknote.ru)
12 ноября 2011, 17:30, ответ предназначен anwerso

Вот уж не знаю почему у меня так плохо всё получилось и даже онлайн оптимизатор не помог :)

bolk (bolknote.ru)
12 ноября 2011, 17:33, ответ предназначен Максим Зотов (maxim-zotov.livejournal.com):

Логотип на ней это картинка http://img.artlebedev.ru/f/global/i/_logo_2.png
размером 777 байт. Откуда 7-килобайтная?
Это я сохранил её с фоном.
размер файла http://img-fotki.yandex.ru/get/5820/35419492.5b/0_57fe6_45bd8ec2_orig
7126 байт, а не 6895, как в скриншоте сообщения. Если взять этот файл и пересохранить в графическом редакторе, получится 984 байт.
Какие-то странности кругом…

zg (zg.livejournal.com)
12 ноября 2011, 17:49, ответ предназначен bolk (bolknote.ru):

про офсайт я в курсе. в какой ос этот броузер увидеть-то можно, без лишних телодвижений?

bolk (bolknote.ru)
12 ноября 2011, 17:57, ответ предназначен zg (zg.livejournal.com):

В любой, где есть KDE, насколько я понимаю.

bolk (bolknote.ru)
12 ноября 2011, 19:25

На лого в 448 байт в три раза больший объём получается для CSS image:
-rw-r--r-- 1 bolk staff 1305 12 ноя 20:24 logo.html.gz
-rw-r--r--@ 1 bolk staff 448 12 ноя 20:23 logo.png

Артур (инкогнито)
12 ноября 2011, 22:55

Чтобы уменьшить размер .пнг-файлов, использую Yahoo! Smush.it (http://www.smushit.com/ysmush.it/) — очень хороший сервис, сам проверял, говна не посоветую. (601 bytes получилось от картинки в первом каменте.)

bolk (bolknote.ru)
12 ноября 2011, 22:58, ответ предназначен Артуру

Ага, спасибо. Разочаровался в punypng.

SiMM (mr-simm.livejournal.com)
13 ноября 2011, 10:41, ответ предназначен Артуру

У меня в PNG занял 447 байт - достаточно было уменьшить глубину цвета с 24 бит до байта в IrfanView'е.

Сергей Чикуёнок (chikuyonok.ru)
15 ноября 2011, 15:21

В твоём тестовом файле зашит ICCP-профиль размером в 6000 байт. Если на Маке, то рекомендую использовать утилитку ImageOptim, жмёт не хуже чем punypng.

bolk (bolknote.ru)
15 ноября 2011, 16:56, ответ предназначен Сергей Чикуёнок (chikuyonok.ru):

Спасибо! Я не догадался посмотреть чанки, думаю — подозрительно много картинка занимает, но доверился punypng :)

Andrey Nikanorov (инкогнито)
15 ноября 2011, 20:02

Конкерор - это пять!

unclebyte.livejournal.com (инкогнито)
15 декабря 2011, 14:10

Набрел случайно на блог. Решил тоже немного поэкспериментировать с картинкой. В итоге вот - http://i30.fastpic.ru/big/2011/1215/be/efbecc2d47c8081d74a3f57c8f0c44be.png
426 байт после Fireworks + ImageCatalyst/

Ваше имя или адрес блога (можно OpenID):

Текст вашего комментария, не HTML:

Кому бы вы хотели ответить (или кликните на его аватару)