はてなブックマーク - [JS]透過処理をした写真画像の転送量を軽くする方法

(閉じる)

はてなブックマーク > コンピュータ・IT > [JS]透過処理をした写真画像の転送量を軽くする方法...

[JS]透過処理をした写真画像の転送量を軽くする方法 | コリス

coliss.com

タグ : javascript 画像 canvas HTML5 webデザイン png web制作 image web HTML

コンピュータ・IT 89 users

通常、透過処理をした写真画像を使用する際のフォーマットはPNGを使用することが多いと思います。これを写真画像にJPEG、その上にマスクのPNGを使用してトータルの容量を軽減する方法を紹介します。デモでは、PNGのみで127KB、JPEG with PNGで42KB、と約1/3容量が軽減しています。上記の画像にHTML5のcanvasを使用して、一枚の画像のように表示します。使用するスクリプトは下記のようになります。 JavaScript ;(function() { var create_alpha_... > このページを見る

最終更新時間: 2010年10月06日10時17分

▼ブログで紹介する

みんなのブックマーク人気（0）新着

pypupypa canvas, flashcanvas
へぇ、画像を2つにわけて合成するのか 2012/02/09
kawawara png, jpeg, javascript
透過処理した画像を軽く転送 2011/09/08
osanpo_u png, jpeg, javascript
透過処理した画像を軽く転送 2011/09/07
nors javascript
http://blog.jackadam.net/2010/alpha-jpegs/ 2010/10/07
tofu-kun webデザイン
なるほど。 2010/10/06
ginpei web, 画像
圧縮率の高いJPGEとマスク専用のPNGとを、canvasで組み合わせて「透過JPEG」にする。すごい発想！ 2010/10/06
kuroazuki 画像, html, webデザイン
要は適材適所って方法ですね。 2010/10/06
tsutomura 画像, js-lib, css
昔、透過GIFを試しに何重も重ねていたのを思い出しました…。 2010/10/06
authority-site link
[JS]透過処理をした写真画像の転送量を軽くする方法 | コリス 2010/10/06
n2s オフトピ
「HTMLではimg要素にマスクのPNGを配置する独自の属性を使用します」独自の属性使うアプローチって案外使われないよね。hoverをjavascriptで実装してるやつとかもそうすれば自然なのに。/ HTML validを気にするなら駄目だけど。 2010/10/06
kkeisuke
canvasを使用してJPEG上にマスクのPNGを使用してトータルの容量を軽減する 2010/10/06
tarchan javascript, canvas
＞写真画像にJPEG、その上にマスクのPNGを使用してトータルの容量を軽減する方法 2010/10/06
nevlib Web, 技術, Web開発
HTML5。ホントなんでも出来るね！2つのファイルを使うってところに、少し違和感があるけど新しい手法ってみんなそんなもんだ。 2010/10/06