Как сделать гибрид JPG / PNG с 8-битной альфа - PullRequest
Новая
       13

Как сделать гибрид JPG / PNG с 8-битной альфа

0 голосов
/ 22 сентября 2011

Я хотел бы разместить большое (почти полноэкранное) альфа-прозрачное изображение на сайте, но у меня есть следующая проблема:

  • , если я использую JPG, размер и сжатиеХорошо, но я не могу сделать его прозрачным (100 кБ)

  • , если я использую PNG-24, размер ОГРОМ (3-4 МБ)

  • если я использую PNG-24 и http://www.8bitalpha.com/ для преобразования его в PNG-8, тогда размер меньше, но я не могу воспроизвести исходную графику в 256 цветах.Размер все еще довольно большой (700 кБ)

Я думал о том, что если я создаю файлы PNG-8 только для прозрачных областей и изображение JPG для непрозрачныхрегионы.И используйте абсолютное позиционирование, чтобы переместить вещи на место.Кто-нибудь сделал что-нибудь подобное?

Или другая идея, но с этим у меня действительно нет опыта: возможно ли использовать изображение JPG и объединить его с альфа-прозрачностью из 8-битного PNG ?Я имею в виду использование JS, CSS3, Canvas или чего-то такого, чего я никогда раньше не использовал?

Вот страница, на которой я сейчас использую PNG-8, но она довольно большая (700 КБ) и некоторые цвета теряются.

http://ilhaamproject.com/sand-texture-2/

1 Ответ

1 голос
/ 22 сентября 2011

Ранее я использовал тот же трюк JPG + PNG с большими прозрачными фоновыми изображениями. Возьмите свое большое изображение и нарежьте его на 2 типа прямоугольных частей:

  1. Те, кому не нужна прозрачность (сохранить в формате JPG)
  2. Те, кому нужна прозрачность (сохранить как PNG)

Цель - сохранить как можно больше деталей изображения в формате JPG.

Далее вам нужно собрать все воедино, используя относительное и абсолютное позиционирование: 

<div class="bg">
    <div class="content">
        http://slipsum.com
    </div>

    <div class="section top"></div>
    <div class="section middle"></div>
    <div class="section bottom"></div>
</div>

.bg {
    width: 600px; /* width of your unsliced image */
    min-height: 800px; /* height of your unsliced image, min-height allows content to expand */
    position: relative; /* creates coordinate system */
}

/* Your site's content - make it appear above the sections */
.content {
    position: relative;
    z-index: 2;
}

/* Define the sections and their background images */
.section {
    position: absolute;
    z-index: 1;
}

.section.top {
    width: 600px;
    height: 200px;
    top: 0;
    left: 0;
    background: url(top.png) no-repeat 0 0;
}

.section.middle {
    width: 600px;
    height: 400px;
    top: 200px;
    left: 0;
    background: url(middle.jpg) no-repeat 0 0;
}

.section.bottom {
    width: 600px;
    height: 200px;
    top: 600px;
    left: 0;
    background: url(bottom.png) no-repeat 0 0;
}
...