PNGを解析してJavaScriptでPNGを描く·png.js MOONGIFT
png.jsはJavaScriptを使ってPNGを解析し、その結果をCanvasタグにレンダリングするライブラリ。 png.jsはHTML5/JavaScript製のオープンソース・ソフトウェア。Web上で扱われる画像のフォーマットと言えば、GIF/JPEG/PNGだ（WebPもあるか）。個人的な主観としてGIFはアニメーションやアイコン、JPEGは写真やサイズの大きな画像、その中間がPNGに向いていると感じている。 レコード画像を描く 写真を取り扱うサイトでは、そのメタデータを解析して撮影した機種や撮影場所、露出といったデータをEXIFから得ている。同様のPNGを解析するJavaScriptライブラリがpng.jsだ。 png.jsはPNGをJavaScriptで解析し、その結果をCanvasタグを使って画像として表示する。つまり表示されるのはPNG画像であり、単純にWebブラウザでim
最適な画像の書き出しは、JPG, GIF, PNG、どれを使うべきか
最適な画像の書き出しは、JPG, GIF, PNG、どれを使うべきか 2011-07-26 デザインされたものをコーディングする上で、画像はサイトのパフォーマンスにも影響する重要な要素の1つです。 画像形式には、jpg, gif, pngなど種類があり、それぞれの特性を理解した上で選定できているでしょうか？ 画像形式についてまとめてみます。 画像の種類 JPEG インターネットでよく使用される画像形式で、静止画像を圧縮する方法の1つです。 ブロック単位で圧縮変換を行うため、圧縮率を上げるとブロックノイズというノイズが生じます。 特に小さくすると赤の部分でノイズが発生しやすい。 IE6～8(IE9は未確認)において#02050aというバグがあり、 JPEG画像でopacityを使用すると#02050aの部分が透過jpgになるバグがあります。 上記の点を注意する必要がありますが、1670万色ま
PNGの画質を劣化せず極限までファイルサイズを落とす、たった1つの方法 | フリーソフトラボ.com
ウェブ上で使用される画像ファイルのフォーマットには、主にJPEG、GIF、PNGという3種類の圧縮形式があり、この中で可逆圧縮かつフルカラー、つまり元画像の画質を見た目上一切劣化させることなくファイルサイズを縮小できるのがPNGですが、欠点は高画質な分ファイルサイズが大きくなってしまいがちなこと。 このため、フルカラーのPNGをウェブ上で使用する場合は専用ツール（有名なものではAzConvPNGなど）を使用してファイルサイズの最適化を行い、画質を劣化せずにできる限りサイズを落とした上でサーバーにアップロードされることがよくありますが、それでも削減できるファイルサイズは良くて1割といったところでしょう。 実は、一般にはほとんど知られていませんが、この他にもフルカラーPNGを画質劣化なしに、さらに大幅にファイルサイズを削減できる裏技的な方法が存在します。やり方は少し面倒ですが、うまく使えば非常
Flash制作に欠かせない3つのツール・道家編 | _level0 - KAYAC Front Engineer Blog
※このエントリーのJSXおよびJSFLは個人的に使うレベルで作りこまれていません。何か製作中のファイルに不具合が起こっても責任を負いかねますのであらかじめご了承ください！ その1・PSDファイルのレイヤーをすべてPNGで書き出すJSX PhotoshopのデザインデータをFlashに効率よくインポートするために、レイヤーやレイヤーグループをすべてPNGに書き出す自作JSXを使います。完全にFlash用なのでPNGの余白カット&1px確保までします。 PNGファイルはPSDと同名のディレクトリに保存されます。グループ名_レイヤー名.pngのようになるのでレイヤー名をきちんとするといい感じに書き出せます。デザイナーと命名規則を共有すれば素材の更新も効率よくできるかもしれません。 ただし、即席かつ強引に行っているので書き出し自体はとても遅いです。100以上レイヤーを書き出すのはマシン環境によって
jp.ferv.blog » Blog Archive » Optimized PNGEncoder
Alchemy – asynchronous jpeg encodingで OptimizedJPGEncoder や AlchemyJPGEncoder の処理速度比較をみて、 PNGEncoder も多少最適化できるかなと思ったんでやってみた。 PNGフォーマットはJPGフォーマットのように複雑な変換処理がない単純なフォーマットなので、コード量が少く最適化箇所も少ない。ただ、複数回エンコードしたり、サイズの大きな BitmapData をエンコードする際にはメリットがでてくるんじゃなかろーかと。 Optimized PNGEncoder – wonderfl build flash online 処理速度比較の為に as3corelib の PNGEncoder と同じく PLTE チャンクは実装せず、フィルタオプションは ‘None’ 一択で実装してる。 as3corelib にはな
PNG (Portable Network Graphics) Specification
PNG (Portable Network Graphics) Specification, Version 1.2 For list of authors, see Credits. この文書の状態 これは RFC-2083 として発表され、W3C 勧告である PNG 1.0 仕様書の改訂版です。改訂は PNG 開発グループによって公開されましたが、標準化団体に認可されていません。 PNG 仕様書は ISO/IEC JTC 1 SC 24 の条項下で標準化中であり、最終的に ISO/IEC International Standard 15948 として公開されることが期待されています。この仕様書の下位互換性を維持することが標準化団体の意図です。開発者は現在の PNG の文書の状態を定期的に PNG のオンラインリソース（Online Resources を参照してください）でチェックす
続：PNG画像をより美しく、より軽量に最適化するテクニック | コリス
上記のように半透明な箇所がある画像の場合、PNGで保存する前にモードをグレースケールにすることは非常に重要です。 グレースケールモード：[イメージ]-[モード]-[グレースケール] 2. 色数はより少なく 画像のカラーを減らす方法として、前回紹介したポスタリゼーションに代わる方法を紹介します。 この方法は256色限定で、カラーを最適化できます。 半透明の画像からイメージ箇所のみを抽出し（半透明は削除）、インデックスカラーに変換しマスクを適用します。 詳しい手順は下記の通り。 画像を開き、[イメージ]-[複製]で画像を複製します。 複製した画像に、[フィルタ]-[PhotoWiz]-[Remove Transparency]で透明箇所を取り除きます。 ※「PhotoWiz」はRemove Transparencyを参照ください。 [イメージ]-[モード]-[インデックスカラー]を選択し、イン
IE6で透過PNGを高速に描画する DD_belatedPNG | エンタープライズ | マイコミジャーナル
DD_belatedPNG: better PNG background-image support in IE6 YSlow開発者であり高速Webサイト構築テクニック紹介者であるStoyan Stefanov氏はこれまで5回に渡って画像最適化方法を紹介してきた。簡単に要約すると写真にはJPEGを使いそれ以外にはPNG8を使う、適切な画像処理ツールを使って画像データの最適化を行う方法がお薦めということになる。 第1弾 画像を最適化してページ表示速度を高速化する方法を知りたいなら 第2弾 最良の画像フォーマットはPNG8、GIFはアニメーション、JPEGは写真に 第3弾 Stefanov氏、画像サイズを縮小化する4つの手順を紹介 - 画質劣化一切なし 第4弾 JPEGをプログレッシブにするかどうかの分かれ目は10KB 第5弾 AlphaImageLoaderで透過PNGは重い、PNG8工夫で
OptiPNG(PNG画像の容量[ファイルサイズ]をを小さくする) インストール ガイド
このソフトは拡張子が.pngのPNG形式と呼ばれる画像の容量を小さくします。 画質や画像の縦・横のサイズは変わりません。 ただし、画像のサイズが小さくならない場合もありますが、大きくなることはありません。 コマンドラインより実行します。 Fireworksなどのプロ向けツールで作成したPNG画像に対しても多少の効果はあります。 フリーのコンバーターなどで変換したPNGだとかなりファイルの容量が小さくなります。 OptiPngをGUIで使いたい人はこちら 1.ダウンロード 1-1.アクセス URL http://www.cs.toronto.edu/~cosmin/pngtech/optipng/ アクセスします。 1-2.ダウンロード Click 画面の中央optipng-0.4.3.exe.zipをクリックしてファイルをダウンロードします。 2.展開 2-1.圧縮ファイルの展開 Extr
IE6にPNG画像のアルファチャンネルを効かせる方法のまとめ | Blog hamashun.com
最近はアルファチャンネルを含むPNG画像を利用したサイトが増えてきたように感じます。 2008年9月号のWeb Designing誌でも特集が組まれたりと、関心も高まっているようです。 ただ、そこで問題となるのはIE6のアルファチャンネル問題。 何らかの手段でこれを解決する必要があります。 少し前の仕事でこの問題を解決する必要があり、いくつかのライブラリを試してみたので、それをまとめてみます。 なお、img要素ではなく、CSSの背景画像で使用する場合として検証しました。 img要素にだけ適用したい場合には、もっとシンプルな方法があるかもしれません。 概ね共通する事 標準準拠のCSSのみでは不可能 IEの独自拡張の、filterプロパティを使う必要があります。 CSS内に記述する方法やhtcファイルを使う方法、JavaScriptを使う方法でも、結果的にはこのfilterプロパティのAlph
ムービーテレビ
本日は、ダンスしてかせぎながら、おしゃべりして、ぱらぱらアニメ方式画像を動かすのができたー。やっほー。 Flashで作ったこんなムービーを仮想現実なセカンドライフの中でもみせられる。 やりかたは、 256x256サイズでFlashムービーを作る。フレーム数１６。 pngに書き出し。 photoShopで、１枚ずつ50%に縮小。 ひとつのファイルに16枚を並べてjpg保存。512x512サイズ。 10$L払ってアップロード。 プリムにテクスチャーとして貼付け。 アップした画像は、こんなかんじ。 番号順に表示される。 スクリプト default { state_entry() { llSetTextureAnim(ANIM_ON | LOOP, ALL_SIDES,4,4,0,0,16); } } 4x4で16コマあるってこと。 3x3で9コマなら、 llSetTextureAnim(ANIM
[JS]超軽量で設置も簡単な、透過PNGをIE6で表示するスクリプト -Unit PNG Fix | コリス
Unit Interactiveのエントリーから、透過PNG画像をIE6で表示する、超軽量(2KB)の設置も簡単なスクリプトを紹介します。
IE でも透過する PNG 画像を Gimp で作る - World Wide Walker
IE でも透過する PNG 画像を Gimp で作る Posted by yoosee on Web at 2005-11-23 23:42 JST1 IE でも透過する PNG 画像を Gimp で作るやり方IE でも透過する透過PNG の Gimp での作り方を忘れていて難儀したのでメモ。画像 > モード > インデックス → 最適化パレット(255色)レイヤツール > アルファチャネル → 選択色から領域を選択 → 選択 → 編集 > 消去(Ctrl-K)ファイル > 名前を付けて保存 > xxx.png単純に背景を透明にして保存しただけでは駄目で、インデックスカラーにするのとアルファチャネルを使うというのが必要らしい。imagemagick の convert -transparent では駄目だった。Firefox では適当に作っても透過するんだけど、IE は IE7 にならない
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.designwalker.com/2009/12/image-optimization.html
IDEA * IDEA
透過をきれいに使ったウェブデザインいろいろ - DesignWalker
http://slcom.jp/modules/xhnewbb/viewtopic.php?topic_id=581
IEでアルファチャンネルPNGを表示する （iepngfix.htc） - youmos