만들려면 하이브리드 JPG/PNG 8 비트 알파

Question

내가 웹 사이트에 큰 (거의 전체 화면) 알파 투명 이미지를 넣어 싶지만, 나는 다음과 같은 문제가

:

• 나는 경우를 JPG를 크기를 사용하고 압축은 OK입니다,하지만 난 PNG-24를 사용하는 경우 그 크기가 나는 PNG-를 사용하는 경우 (3-4 MB)

• 거대한 (100 KB)

• 입니다 투명하게 만들 수 없습니다 24 및 http://www.8bitalpha.com/을 PNG-8로 변환하면 크기가 작아 지지만 repr을 사용할 수 없습니다. 원본 그래픽을 256 색으로 표현할 수 있습니다. 크기는 여전히 (700 KB) 매우 큰

내가 약 무슨 생각 난 그냥 투명 영역과 불투명 영역의 JPG 이미지를 PNG-8 파일을 생성합니다. 그리고 절대 위치 지정을 사용하여 사물을 제자리로 이동하십시오. 아무도 이런 짓하지 않았 니?

또는 다른 아이디어가 있는데, 실제로 경험이없는 것 같습니다 : JPG 이미지를 사용하고 8 비트 PNG 012 투명도와 결합 할 수 있습니까?? JS 또는 CSS3 또는 Canvas를 사용하거나 이전에 사용하지 않은 것을 사용하고 싶습니까?

여기는 PNG-8을 사용하고있는 페이지이지만 크기가 매우 큽니다 (700KB). 일부 색상이 손실됩니다.

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

Answer 1

나는 큰 투명 배경 이미지와 함께 이전과 동일한 JPG + PNG의 트릭을 사용했습니다. 당신의 큰 이미지를 가지고 두 직사각형 조각의 종류로 그것을 잘라 :

1. 투명성을 필요로하지 않는 사람들의 투명성을 필요로 할 그
2. 사람들을 (JPG로 저장)

(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; 
}