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

Лого в CSS (38.79КиБ)

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

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

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

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

программированиеcss

Комментарии 23

Евгений Степанищев (bolknote.ru) автор № 1
Вот, на всякий случай лого, с которым я эксперементирую:
http://img-fotki.yandex.ru/get/5820/354194 … Fpage%3D1#

А это файл, который получился (в браузере его открывать не нужно, там один и тот же HTML несколько раз, повторенный с разными префексами, а не реальное демо): http://zalil.ru/32042119 (будет лежать около 10 дней).
javaorca № 5
Если сохранить логотип в gif (с палитрой в 4-8 цветов), то будет ещё меньше.
Евгений Степанищев (bolknote.ru) автор № 7
Если сохранить логотип в gif (с палитрой в 4-8 цветов), то будет ещё меньше.

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

Максим Зотов (maxim-zotov.livejournal.com) № 8

Комментарий для Евгения Степанищева:

Открыл страницу artlebedev.ru
Логотип на ней это картинка http://img.artlebedev.ru/f/global/i/_logo_2.png
размером 777 байт. Откуда 7-килобайтная?

лого, с которым я эксперементирую

размер файла http://img-fotki.yandex.ru/get/5820/354194 … d8ec2_orig
7126 байт, а не 6895, как в скриншоте сообщения. Если взять этот файл и пересохранить в графическом редакторе, получится 984 байт.

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

Максим Зотов (maxim-zotov.livejournal.com) № 10
Если взять этот файл и пересохранить в графическом редакторе

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

Евгений Степанищев (bolknote.ru) автор № 13

Комментарий для maxim-zotov.livejournal.com:

Логотип на ней это картинка http://img.artlebedev.ru/f/global/i/_logo_2.png
размером 777 байт. Откуда 7-килобайтная?

Это я сохранил её с фоном.

размер файла http://img-fotki.yandex.ru/get/5820/354194 … d8ec2_orig
7126 байт, а не 6895, как в скриншоте сообщения. Если взять этот файл и пересохранить в графическом редакторе, получится 984 байт.

Какие-то странности кругом…

zg (zg.livejournal.com) № 14
Комментарий для Евгения Степанищева:

про офсайт я в курсе. в какой ос этот броузер увидеть-то можно, без лишних телодвижений?
Евгений Степанищев (bolknote.ru) автор № 15
Комментарий для zg.livejournal.com:

В любой, где есть KDE, насколько я понимаю.
Евгений Степанищев (bolknote.ru) автор № 16

На лого в 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
Артур № 17
Чтобы уменьшить размер .пнг-файлов, использую Yahoo! Smush.it ( http://www.smushit.com/ysmush.it/ ) — очень хороший сервис, сам проверял, говна не посоветую. (601 bytes получилось от картинки в первом каменте.)
SiMM (mr-simm.livejournal.com) № 19
У меня в PNG занял 447 байт — достаточно было уменьшить глубину цвета с 24 бит до байта в IrfanView'е.
Сергей Чикуёнок (chikuyonok.ru) № 20
В твоём тестовом файле зашит ICCP-профиль размером в 6000 байт. Если на Маке, то рекомендую использовать утилитку ImageOptim, жмёт не хуже чем punypng.
Евгений Степанищев (bolknote.ru) автор № 21
Спасибо! Я не догадался посмотреть чанки, думаю — подозрительно много картинка занимает, но доверился punypng :)