This method allows you to combine JPG and a PNG file which can be used as an Alpha Channel. This combinaison is used to genere a new PNG32 file, made in client side.
|
|
| JPG loaded, PNG generated | PNG |
| 1 HTTP request (11023 Bytes) | 1 HTTP request (76445 Bytes) |
| 85,58 % (65422 Bytes) | |
 |
 |
| JPG loaded, PNG generated | PNG |
| 1 HTTP request (9509 Bytes) | 1 HTTP request (73197 Bytes) |
| 87,01 % (63688 Bytes) | |
|
 |
| JPG File used | PNG File used as Alpha Channel |
As you can see, two files are used. Both of them can be get from a PNG32. The most simple way to do that is to use ScriptRST, which can get those file automatically.
Just Drag-and-Drop your PNG32 file, and select option 7, called JPG and Alpha
. It will give you two output files, JPG and PNG-alpha. At this time, you can pass to HTML integration.
If output files quality is not correct, try to modify it by editing ScriptRST file. Change AlphaQuality and / or JpgQuality options.
<img alt="description" src="image.jpg" data-alpha-src="alpha.png">
You should use src attribute to load the JPG file, and data-alpha-src to get the image used as an Alpha Channel. If you have converted it to base64 coding, paste the code as below :
<img alt="description" src="image.jpg" data-alpha-src="data:image/png;base64,IMAGEDATA">
Finally, you have to use the JPG Alpha Channel script. To get the best performance, you should insert it just before the </body> tag, at the end of the HTML document.
Step 1 : To genere the JPG File, ScriptRST extract the RGB data from the PNG32 file, then it forces a background (color: 0,0,0) to the file, and finally convert it to JPG (with full optimization), with default quality setting to 80.
Step 2 : To genere the PNG File used as Alpha Channel, ScriptRST extract the Alpha Channel data from the PNG32 file, then it inverses colors (which have for effect to inverse transparency too), and finally reduce the number of colors in this file. The goal is to get a paletted or grayscale file which have few colors only. File is optimized by lot of trials and compressed by KFlate algorithm.
Step 3 : You can save a HTTP request by converting the binary data of PNG to base64. To do that, you can use an online service, or a PHP server with this command :
<?php echo base64_encode(file_get_contents("image-alpha.png")) ?>
This command will display lot of characters, which represent the PNG file. You have to copy all those characters, and paste it instead of IMAGEDATA.
<img alt="description" src="image.jpg" data-alpha-src="data:image/png;base64,IMAGEDATA">
Step 4 : You have to integre a script JavaScript which will do all the rest automatically. The script will produce a new PNG32 file, from JPG and PNG used as an Alpha Channel. This file is produced in base64 too. The main advantage is the new file is generated directly by browser, on client side (this is not performed by server), so it's very fast, and if you have converted the PNG used as an Alpha Channel, you have only 1 HTTP request (the JPG File) which is loaded fastly too.
Instead of using JavaScript method, you can also convert a PNG32 file to JPG, including the background with it. To do that, just include the PNG File, and display it. Take a screenshot, crop the image, and record it to JPG.
 |
 |
 |
| PNG | JPG, screen capture from PNG | JPG, quality 90 (option 2 - ScriptJPG) |
| 59619 Bytes | 29811 Bytes | 11405 Bytes |
| 80,87 % (48214 Bytes) | ||
Keep the PNG file, because if one day you want to change the background, you'll have to do it again.