{"id":7135,"date":"2015-11-07T17:16:14","date_gmt":"2015-11-07T21:16:14","guid":{"rendered":"http:\/\/www.useragentman.com\/blog\/?p=7135"},"modified":"2015-11-09T02:18:13","modified_gmt":"2015-11-09T06:18:13","slug":"creating-alpha-channel-jpegs-using-svg","status":"publish","type":"post","link":"http:\/\/www.useragentman.com\/blog\/2015\/11\/07\/creating-alpha-channel-jpegs-using-svg\/","title":{"rendered":"Creating Alpha Channel JPEGs Using SVG"},"content":{"rendered":"\r\n
\r\n\r\n \r\n \r\n \r\n \r\n <\/picture>\r\n<\/div>\r\n<\/div>\r\n

The image of the sun above is not a PNG<\/strong> on top of the animated stars, it is a plain-old JPEG with an alpha channel.<\/strong> This was created by embedding an SVG and alpha channel inside of an SVG and compressing it to form an SVGZ file. The types of SVG files are much smaller than their lossless PNG<\/strong> equivalents and are a great fallback\/alternative to JPEG-XR, JPEG 2000 and WEBP, which support both lossy compression and alpha channeling as well (see my previous blog post on the subject for more details<\/a>). It even works in Firefox,<\/strong> where the other image formats don’t:<\/p>\n\r\n\r\n\r\n\r\n\r\n
<\/th>WEBP<\/th>JPEG-2000<\/th>JPEG-XR<\/th>JPEG embedded in SVG<\/th>\r\n<\/tr>\r\n<\/thead>\r\n
Chrome<\/th>\u2714<\/td><\/td>\u2714<\/td><\/tr>\r\n
Safari<\/th><\/td>\u2714<\/td><\/td>\u2714<\/td><\/tr>\r\n
IE9+<\/th><\/td><\/td>\u2714<\/td>\u2714<\/td><\/tr>\r\n
Firefox<\/th><\/td><\/td><\/td>\u2714<\/td><\/tr>\r\n<\/tbody>\r\n<\/table>\r\n

Since it looks like Firefox won’t support any of the other formats any time soon<\/a>, this is a really good cross-browser solution to optimize your alpha-channeled images. <\/p>\n

Dirk Weber<\/a> details how he did this with Adobe Photoshop<\/a> by using an SVG and two JPEGs. This was a great start, but making one asset into three is not optimal since it adds a bit of HTTP overhead. I then saw Mario Klingemann<\/a>‘s web application Zorro SVG<\/a>, which uses base64 encoding to combine the files into the SVG code. It then compresses the SVG into an SVGZ file using gzip. I took the ideas from both posts and incorporated them into my html5ImageConverter<\/a> so I can create these images quickly on the command line (which is great for mass batch conversions).<\/p>\n

How To Create Them<\/h2>\n

Using ZorroSVG<\/h3>\n

The quickest way to play around with these images without installing any software is by using the Zorro SVG<\/a> website. Just upload your image via the form and download the resultant SVG file. This is great, quick way to start off playing with these files but if you have lots of files to convert, this can take quite a bit of time. <\/p>\n

Using The Command Line html5ImageConverter<\/h3>\n

In order to speed up the batch conversion of multiple files, I created a tool, createAlphaJPEG.sh<\/code>, as part of my html5ImageConverter<\/a> toolset. Download the html5ImageConverter and type in the following command:<\/p>\n

\n
\r\ncreateAlphaJPEG.sh --q=50 --compress-svg dice.png\r\n<\/pre>\n<\/blockquote>\n
The --q=50<\/code> is used to control the JPEG compression quality and --compress-svg<\/code> ensures we create a compressed SVGZ version of the file.  If you want to convert more than one PNG file, use the following:<\/p>\n
\n
\r\ncreateAlphaJPEG.sh --q=50 --compress-svg file1.png file2.png file3.png\r\n<\/pre>\n<\/blockquote>\n
How does createAlphaJPEG.sh<\/code> create alpha channeled JPEGs?  How do you make your own command-line tools to generate them?  Read on.<\/p>\n
Using The Command Line without html5ImageConverter<\/h3>\n
If you want to “roll your own” PNG to SVGZ converter, let me walk you through the steps that the html5ImageConverter uses to generate these files:<\/p>\n
    \n
  1. \nLet’s start with a PNG file, like this:
    \n\"PNG<\/li>\n
  2. Next, we use ImageMagick<\/a> to extract the alpha channel from the PNG and convert it to grayscale with this command:
    \n
    \n
    \r\nconvert dice.png -alpha extract -colorspace Gray dice_alpha.png\r\n<\/pre>\n<\/blockquote>\n
    \"dice-320_alpha\"<\/li>\n
  3. We then convert the original image and the extracted alpha channel image to JPEG format:
    \n
    \n
    \r\nconvert dice.png -define quality=80 dice.jpg\r\nconvert dice_alpha.png -define quality=80 dice_alpha.jpg\r\n<\/pre>\n<\/blockquote>\n
    Here is dice.jpg:
    \n\"dice-320\"
    \nand here is dice_alpha.jpg:
    \n\"dice-320\"
    \n(Note:<\/strong> I am using 80% quality here.  You can compress the image even more if you want to).<\/p>\n<\/li>\n
  4. We then create an SVG that will contain the images.
    \n
    \n
    \r\n<svg xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" \r\n  viewBox=\"0 0 320 240\" width=\"320\" height=\"240\" \r\n  xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n  <defs>\r\n    <mask id=\"a\" maskUnits=\"userSpaceOnUse\" \r\n        maskContentUnits=\"userSpaceOnUse\">\r\n      <image width=\"320px\" height=\"240px\" \r\n        xlink:href=\"dice_alpha.jpg\"><\/image>\r\n    <\/mask>\r\n  <\/defs>\r\n  <image style=\"mask: url(#a);\" \r\n    xlink:href=\"dice.jpg\"><\/image>\r\n<\/svg>\r\n<\/pre>\n<\/blockquote>\n<\/li>\n
  5. The problem with the above SVG is that, as said earlier in this post, we will have three assets to download (Mario Klingemann<\/a> mentions on the Zorro SVG<\/a> website that relative URLs are also not handled consistently, so there is an issue with SVG).  In order to fix this, let’s base64 the JPGs using the base64<\/code> command:
    \n
    \n
    \r\ncat dice_alpha.png | base64 | pbcopy\r\n<\/pre>\n<\/blockquote>\n
    (Note:<\/strong> pbcopy<\/code> takes the output of the cat<\/code> command and puts it into the OSX clipboard so you can paste it into the editor that contains your SVG.  If you want to do the same thing for Windows or Linux, use the xclip<\/code> and clip<\/code> command respectively).<\/p>\n
    Using the base64 command on the dice_alpha.jpg<\/code> and dice.jpg<\/code> above, we get the following SVG code:<\/p>\n
    \n
    \r\n<svg xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" \r\n  viewBox=\"0 0 320 240\" width=\"320\" height=\"240\" \r\n  xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n  <defs>\r\n    <mask id=\"a\" maskUnits=\"userSpaceOnUse\" \r\n        maskContentUnits=\"userSpaceOnUse\">\r\n      <image width=\"320px\" height=\"240px\" \r\n        xlink:href=\"data:image\/jpeg;base64,\/9j\/4AAQSkZJRgA...\"><\/image>\r\n    <\/mask>\r\n  <\/defs>\r\n  <image style=\"mask: url(#a);\" \r\n    xlink:href=\"data:image\/jpeg;base64,\/9j\/4AAQSkZJRgABAQAAAQA...\"><\/image>\r\n<\/svg>\r\n<\/pre>\n<\/blockquote>\n
    (Another Note:<\/strong> We only put the first few characters of the base64 code above since it is quite huge).\n<\/li>\n
  6. \nWe save the final SVG file and compress it with gzip<\/code>.  If the resultant SVG is saved in the file dice.svg<\/code>, then we compress the SVG file with this command:<\/p>\n
    \n
    \r\ngzip -9 $stub.svg\r\nmv $stub.svg.gz $stub.svgz\r\n<\/pre>\n<\/blockquote>\n<\/li>\n
  7. \nLoad the image in your webpage with the <picture><\/code> element:<\/p>\n
    \n
    \r\n<picture title='alternative image format' id='alternate-image'>\r\n      <!--[if IE 9]><video style='display: none;'><![endif]-->\r\n      <source srcset='dice.svgz' type='image\/svg+xml'>\r\n      <!--[if IE 9]><\/video><![endif]-->\r\n      <img srcset='dice-320.png'  \/>\r\n<\/picture>\r\n<\/pre>\n<\/blockquote>\n
    (the IE conditional-commented <video><\/code> tags are there to prevent bugs in IE9 and down).  If you are using picturefill, this code will load the SVG in all browser that support it.  If you aren’t, then it will load the SVG in browsers that support it as long as they can natively use the <picture><\/code> tag.  For more information about how to use the <picture><\/code> tag, read the “Use <picture> For Still Images section of my blog postUsing WEBP\/JPEG 2000\/JPEG-XR\/APNG Now With Picturefill and Modernizr<\/a>.  Sara Soueidan<\/a> excellent in-depth article Better SVG Fallback and Art Direction With The <picture> Element<\/a> is a thorough examination of the  <picture><\/code> tag.\n<\/li>\n
  8. \nThe result should be this:
    \n<\/p>\n
    \n\n      
    \n      \n<\/picture>\n<\/div>\n<\/li>\n
  9. \nIf you have troubles loading the SVG into your browser, you may want to make sure your webserver is configured correctly. You can either read the kaioa.com article on How to Configure Apache to Serve SVG\/SVGZ the Right Way<\/a>, or you can put this code into a .htaccess<\/code> file inside the directory that will serve the SVGZ files:<\/p>\n
    \n
    \r\nAddType image\/svg+xml svg svgz\r\nAddEncoding gzip svgz\r\n<\/pre>\n<\/blockquote>\n<\/li>\n<\/ol>\n
    Note that some browsers (e.g. Firefox) need to have their cache cleared<\/strong> in order to see the image after these server tweaks are added.<\/p>\n
    Using Photoshop<\/h3>\n
    As mentioned earlier, Dirk Weber<\/a> details how he did this with Adobe Photoshop<\/a> by using an SVG and two JPEGs.  You can take the two JPEGs created in his tutorial and use steps 5-8 in the commandline tutorial above to put the data into one SVG file. <\/p>\n
    Can You Do Animations?<\/h2>\n
    If you create a “sprite-sheet” containing all of the frames in one still SVG image, You can use CSS steps()<\/code> function to animate through the frames using CSS animations.  Since a previous blog post covered this animation technique with JPEG-XR and JPEG-2000 alpha channeled images<\/a>, I won’t cover it again here.  Instead, drag the animated JPEG\/SVG sun below and see how it works in action.<\/strong><\/p>\n