JPEG сжатие картинки с альфа-каналом или SVG masks

[@miolini]

Гениально!

[@0n1y_0ne]

Ох ты ж как охренительно!!!

[@Lure_of_Chaos]

Не знал, что jpeg может быть прозрачным.
Только не понял, альфа-маска сохраняется как растровое или векторное изображение? По идее, она выглядит очень «геометрично», т.е. для построения нетрудно составить формулу, а значит, и описать векторно?
Еще больше можно, теоретически, сэкономить, применив сжатие самого svg, т.к. xml формат сильно избыточен.

Поправьте меня, если ошибаюсь.

[@nazarpc]

Обычное растровое изображение.
Если маска простая — думаю, пару строк на js через canvas может ещё больше сократить объем (можно ещё масштабирование маски под исходный размер сделать).

[@Alexufo]

Дело в том что
1) Геометрическая маска это лишь пример. На деле она такая не всем нужна нужна.
2) Расчет прозрачности ведется по пикселям — я думаю это очевидно. XML тут придется рендерить в растр для расчета в любом случае.Хотя теоретически и так рендерит это в растр для отображения на экране сам браузер или кто там… тут не знаю. см пунк 1. =)

Мне лично кажется что на ява скрипте было бы куда удобнее, но возможно не быстрее…

[@PaulZi]

Как хранить маску — решать вам. Хотите, используйте растровую маску, хотите — используйте всю мощь SVG для отрисовки маски (фигуры, полигоны и многое другое), хотите с помощью JavaScript — ничто вас здесь не ограничивает. Я показал лишь пример, что применять лучше — зависит от задач. Если у вас есть большая картинка с прозрачным фоном, на котором аккуратно вырезан человек — тут «геометрии» в маске мало. А если нужна просто аватарка вырезанная в форме «звезды», то конечно выгоднее использовать векторную маску.

[@nazarpc]

Последняя Opera Next — не работают только примеры с «css background». Ubuntu.

[@sky_lord]

Автор, а не пробовали ради любопытства все же IE через VML и что-то типа этого поковырять? В связи со временем суток мозг уже не соображает, поэтому сам осознать не могу — реально это или нет. :-)

[@PaulZi]

На сколько я знаю, в VML нет аналогов SVG Mask, поэтому наложить растровый альфа-канал не получится, максимум что можно сделать — это использовать векторную маску. Поправьте меня если я не прав.

[@Athari]

Ха-ха-ха! Internet Explorer — единственный браузер, который смог отобразить картинку всеми способами. Ненавистники ИЕ, можете начинать скрипеть зубами. :-D

ФФ 13, Хром 19, Сафари 5 не одолели внешние файлы при CSS background и img; Опера 12 не одолела CSS background. А вот ИЕ 9 добросовестно отобразил все до единой картинки. Вроде, у всех браузеров автообновление не трогал, поэтому версии должны быть актуальные.

Есть, разумеется, один традиционный нюанс, который портит вся ляпоту — ИЕ 9 привязан к оси, до которой не все форточники обновились.

[@PaulZi]

Судя по консоли Firefox, внешние изображения не грузятся по соображениям «безопасности»:

Попытка нарушения системы безопасности: содержимое «http://paulzi.ru/habr/svg-alpha/out.svg» не имеет права загружать данные из paulzi.ru/habr/svg-alpha/mask.jpg.

[@Athari]

Вы не в курсе, чем это может быть вызвано? Не гуглится чего-то.

И вообще, я не понимаю, как включение JPEG'а в SVG может быть уязвимостью, особенно если файлы находятся на одном сервере в одной директории.

[@theOnlyBoy]

Можно упомянуть также для новых версий вебкита:
-webkit-mask (background)
-webkit-mask-attachment (background-attachment)
-webkit-mask-clip (background-clip)
-webkit-mask-origin (background-origin)
-webkit-mask-image (background-image)
-webkit-mask-repeat (background-repeat)
-webkit-mask-composite (background-composite)
-webkit-mask-box-image (border-image)

[@PaulZi]

Спасибо! Хотя не понял причём тут «сложная маска»? В качестве маски в статье используется изображение, и оно может быть каким угодно сложным. Кроме того для работы метода не требуется включённый JavaScript (по крайней мере в браузерах где есть поддержка SVG).

[@kalininmr]

так тут в принципе любая маска будет работать. даже если не ошибаюсь картинкой.
btw всегда удивляло отсутствие в jpg альфаканала

[@kalininmr]

хм… интересный подход. както боролись с аналогичной траблой.
в эту сторону както и не подумали.