Comment faire JPG/PNG avec alpha

Question

8 bits hybride Je voudrais mettre un grand (écran presque plein) image alpha transparente sur un site Web, mais j'ai le problème suivant:

• si je JPG utiliser la taille et la compression est OK, mais je ne peux pas le rendre transparent (100 kB)

• si j'utilise PNG-24 est la taille énorme (3-4 Mo)

• si j'utilise PNG- 24 et http://www.8bitalpha.com/ pour le convertir en PNG-8 puis la taille est plus petite mais je ne peux pas repr oduce les graphiques originaux en 256 couleurs. La taille est encore assez grand (700 kB)

Ce que je pensais est ce que si je crée des fichiers PNG-8 seulement pour les zones transparentes et une image JPG pour les régions non transparentes. Et utilisez le positionnement absolu pour mettre les choses en place. Est-ce que quelqu'un a fait quelque chose comme ça?

Ou une autre idée, mais c'est quelque chose que je n'ai pas vraiment l'expérience avec: est-il possible d'utiliser une image JPG et la combiner avec la transparence alpha d'un PNG 8 bits? Je veux dire en utilisant JS ou CSS3 ou Canvas ou quelque chose que je n'ai jamais utilisé auparavant?

Voici la page où j'utilise le PNG-8 maintenant, mais il est assez grand (700 ko) et certaines couleurs sont perdues.

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

Answer 1

Je l'ai utilisé le même JPG + trick PNG avant avec de grandes images d'arrière-plan transparent. Prenez votre grande image et le couper en 2 types de pièces rectangulaires:

1. Ceux qui ne nécessitent pas la transparence (en format JPG sauvegarder)
2. Celles qui ont besoin de transparence (sauf au format PNG)

Le but est d'obtenir autant de détails d'image que possible enregistrés au format JPG.

Ensuite, vous aurez besoin de tout reconstituer de nouveau ensemble en utilisant le positionnement relatif et absolu:

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