{"id":61,"date":"2009-02-20T02:45:16","date_gmt":"2009-02-19T15:45:16","guid":{"rendered":"http:\/\/xhva.net\/log\/?p=61"},"modified":"2009-02-20T04:51:12","modified_gmt":"2009-02-19T17:51:12","slug":"graphic-improvements","status":"publish","type":"post","link":"https:\/\/xhva.net\/log\/2009\/02\/graphic-improvements\/","title":{"rendered":"Graphic Improvements"},"content":{"rendered":"<p>A long stand\u00ading prob\u00adlem with graph\u00adic files on the web is that there\u2019s no lossy for\u00admat with trans\u00adparen\u00adcy options. Three options are incom\u00ading, all real\u00adis\u00adti\u00adcal\u00adly long-term if you\u2019re devel\u00adop\u00ading for the entire web and not one par\u00adtic\u00adu\u00adlar platform.<\/p>\n<p><img class=\"right\" src=\"http:\/\/xhva.net\/log\/wp-content\/uploads\/2009\/02\/trans-kitty1.png\" alt=\"Alpha Trans Kitty 2\"><\/p>\n<p>JPEG + <abbr title=\"Scalable Vector Graphics\"><a href=\"https:\/\/developer.mozilla.org\/en\/SVG\">SVG<\/a><\/abbr> <a href=\"http:\/\/weblogs.mozillazine.org\/roc\/archives\/2009\/02\/svg_filter_effe.html\">Fil\u00adters in HTML<\/a> = masked lossy images. Allows for both raster and vec\u00adtor mask\u00ading, but only for Fire\u00adfox 3.1 for now. This brings the addi\u00adtion\u00adal ben\u00ade\u00adfits of the entire <a href=\"http:\/\/weblogs.mozillazine.org\/roc\/archives\/2008\/06\/applying_svg_ef.html\">SVG fil\u00adter line\u00adup avail\u00adable any\u00adwhere in HTML<\/a>.<\/p>\n<p>Webkit\u2019s <a href=\"http:\/\/webkit.org\/blog\/181\/css-masks\/\">CSS Masks<\/a> applic\u00ada\u00adble to any visu\u00adal ele\u00adment entire\u00adly using CSS pro\u00adter\u00adties. Allows for a raster mask or ref\u00ader\u00adenc\u00ading an SVG. Isn\u2019t as exten\u00adsive as the SVG Bling approach \u2014 it\u2019s intend\u00aded pure\u00adly for mask\u00ading \u2014 but has low\u00ader bar\u00adri\u00ader for&nbsp;entry.<\/p>\n<p><a href=\"http:\/\/www.maxdesign.com.au\/2009\/01\/31\/jpeg-xr\/\">JPEG-XR<\/a>, a new JPEG for\u00admat seem\u00ading\u00adly unre\u00adlat\u00aded to the orig\u00adi\u00adnal bar the name. High\u00ader qual\u00adi\u00adty, small\u00ader file\u00adsize, options for loss\u00adless encod\u00ading, and an <a href=\"http:\/\/en.wikipedia.org\/wiki\/HD_Photo#Description\">alpha chan\u00adnel<\/a>. Con\u00adspir\u00adacists may ques\u00adtion Microsoft\u00ad\u2019s involve\u00adment after the OpenXML trav\u00ades\u00adty but as long as licenc\u00ading is free and adop\u00adtion high\u00ader than the wavelet-encod\u00aded JPEG stan\u00addard from a few years back, I\u2019m&nbsp;happy.<\/p>\n<p>That which rates a last men\u00adtion is Microsoft\u00ad\u2019s <a href=\" http:\/\/msdn.microsoft.com\/en-us\/library\/ms532984(VS.85).aspx\">Com\u00adpos\u00adi\u00adtor fil\u00adter<\/a>. The doc\u00adu\u00admen\u00adta\u00adtion hints at being able to per\u00adform cal\u00adcu\u00adla\u00adtions using an alpha chan\u00adnel, but I\u2019ve no idea if that trans\u00adlates to final ren\u00addered trans\u00adparen\u00adcy since the exam\u00adples are too com\u00adplex for me to spend time decyphering.<\/p>\n<p>A while back I cre\u00adat\u00aded a test design called <a href=\"http:\/\/xhva.net\/work\/sansserif\">Sans &amp; Serif<\/a> that need\u00aded a large high-colour trans\u00adpar\u00adent image with alpha blend\u00ading (the leaves). PNG 32 did the job, but it\u2019s non-lossy so the file size was ~210k. I end\u00aded up con\u00advert\u00ading the leaves to 8\u2011bit with some visu\u00adal trick\u00adery to hide the aliased edges. I\u2019m look\u00ading for\u00adward to doing this properly.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A long stand\u00ading prob\u00adlem with graph\u00adic files on the web is that there\u2019s no lossy for\u00admat with trans\u00adparen\u00adcy options. Three options are incom\u00ading, all real\u00adis\u00adti\u00adcal\u00adly long-term if you\u2019re devel\u00adop\u00ading for the entire web and not one par\u00adtic\u00adu\u00adlar plat\u00adform. JPEG + SVG Fil\u00adters in HTML = masked lossy images. Allows for both raster and vec\u00adtor masking,&nbsp;[\u2026]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"wp_typography_post_enhancements_disabled":false,"ngg_post_thumbnail":0},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/xhva.net\/log\/wp-json\/wp\/v2\/posts\/61"}],"collection":[{"href":"https:\/\/xhva.net\/log\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/xhva.net\/log\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/xhva.net\/log\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xhva.net\/log\/wp-json\/wp\/v2\/comments?post=61"}],"version-history":[{"count":0,"href":"https:\/\/xhva.net\/log\/wp-json\/wp\/v2\/posts\/61\/revisions"}],"wp:attachment":[{"href":"https:\/\/xhva.net\/log\/wp-json\/wp\/v2\/media?parent=61"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xhva.net\/log\/wp-json\/wp\/v2\/categories?post=61"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xhva.net\/log\/wp-json\/wp\/v2\/tags?post=61"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}