PNG画像をより美しく、より軽量に最適化するテクニック | コリス
先日、紹介した「JPEG画像の最適化テクニック」に続いてSmashingMagazineから、PNG画像をより美しく、より軽量に最適化するテクニックを紹介します。 追記：2009/07/27 本エントリには続きがあります。 続：PNG画像をより美しく、より軽量に最適化するテクニック Clever PNG Optimization Techniques 下記、各ポイントをピックアップして紹介します。 最後のはCS3向けで不明だったので、途中省略しています。 はじめに PNG画像フォーマットの概要 1. ポスタリゼーション 2. 手のはいってない透過 3. 透過による分離 4. マスクを活用 はじめに ウェブデザイナーとしてあなたは既にPNGのフォーマットに精通しているかもしれません。PNGは劣化のないフォーマットとして、GIFの非常に良い代わりとなります。 Photoshop（あるいは他の画
IE6にPNG画像のアルファチャンネルを効かせる方法のまとめ | Blog hamashun.com
最近はアルファチャンネルを含むPNG画像を利用したサイトが増えてきたように感じます。 2008年9月号のWeb Designing誌でも特集が組まれたりと、関心も高まっているようです。 ただ、そこで問題となるのはIE6のアルファチャンネル問題。 何らかの手段でこれを解決する必要があります。 少し前の仕事でこの問題を解決する必要があり、いくつかのライブラリを試してみたので、それをまとめてみます。 なお、img要素ではなく、CSSの背景画像で使用する場合として検証しました。 img要素にだけ適用したい場合には、もっとシンプルな方法があるかもしれません。 概ね共通する事 標準準拠のCSSのみでは不可能 IEの独自拡張の、filterプロパティを使う必要があります。 CSS内に記述する方法やhtcファイルを使う方法、JavaScriptを使う方法でも、結果的にはこのfilterプロパティのAlph
アルファ画像を扱うalphafilter.jsライブラリ[to-R]
アルファ画像を扱うalphafilter.jsライブラリ IE6でアルファ画像(透過png)が使えないことにより、コーディングの作業量が大幅に増します。 そこで、IE6で透過pngを扱うjsライブラリを作ってみました。 設定は簡単、head要素内に条件付きコメントを利用してalphafilter.jsで読み込むだけ。 読み込みを高速化させるためdefer属性をの記述を忘れずに行ってください。 <!--[if lte IE 6 ]><script type="text/javascript" defer="defer" src="./alphafilter.js"></script><![endif]--> 透過にしたい画像にclass属性でalphafilterと入れるだけで、なんとIE6でも透過画像の使用が可能になります。 <img src="./sample.png" class="a
![アルファ画像を扱うalphafilter.jsライブラリ[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
私的な日記:PNGファイルを開くとQuickTimeが起動？
woods 01:05 コメントする カテゴリー:PC このBlogは背景画像などにPNG形式の画像を使っているのですが、Sleipnir(IE)で見ると なぜかQuickTimeプラグインで表示しようとしてしまいます。IE5以降ならプラグイン無しでも問題なく PNGファイルは表示されるはずなので、おかしいと思いGoogleで調べてみると、いました！同じ問題を 抱えていると人が。で、結論から言うとQuickTimeの設定に問題があるようです。 どうやらQucikTimeをインストールすると、勝手に！！MIME設定でPNGファイルをQuickTimeに関連づけるようです。余計なことをしてくれるよ、まったく。。。 折角なので関連づけの直し方をメモしておきます。 QuickTimePlayer version6.1.2の場合 1. QuickTimePlayerを起動します。 2. [編集(E)
ヨモツネット[日記] ≫ CSS ファイルだけで IE 6 の背景に設定した png のアルファチャンネルを有効にする
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
わかりやすい PNG の話 for Web
ミケネコ研究所 / 画像研究室 / PNG の話 / 第 3 章 第 3 章 PNG のスペック一覧 PNG (Portable Network Graphics, ピング) フォーマット。 この章では、PNG フォーマットの機能のそれぞれについて、ざっと紹介していきます。しかし、GIF 問題を初めて認識されたあなたにとっては、おそらく PNG の詳しい機能などには興味がないことでしょう。あなたの最も知りたいことは、PNG の高機能性ではなく、本当に GIF の代わりになるのか、ということのはずです。だから、この章はあなたにとって少々たいくつなことでしょう。 幅と高さ カラータイプ 圧縮 フィルタリング フィルター形式 フィルタリングアルゴリズム インターレース Adam7 アルゴリズム GIF との比較 ガンマ補正 透過設定 αチャンネル 透明色 テキスト文字列 背景色 アスペクト比 減
IEと透過PNG
このページはIE7で致命的なエラー出るという情報を頂き、暫く公開を中止して 修正予定のまま放置しておりましたが、ようやく修正致しましたので再び公開します。 PNGのアルファチャンネルによる 透過（半透明）もサポートされていないインターネットエクスプローラ６。 (GIFと同レベルの２５６色での単色透過は問題ありません) バージョン７でようやく半透明PNGがサポートとなりましたが、他のブラウザと比較して 余りにも遅れすぎ…。 更にIE7は、Windows Vista、Windows XP、 Windows Server 2003だけですね。これらより古いWindowsには使えません。 そして2006年末の現時点では、まだまだIE6 のユーザーが圧倒的に多いようです。 WEBサイトを作る側からすれば困った問題ですね。うかつに透過PNGを使ってしまうと、 IE6ユーザーから見ると「透過失敗してる…
Movable Type 4 の透過 PNG ロゴを IE6 以下のブラウザで透過する
デフォルトテンプレートで新しく表示されている Movable Type 4 のロゴは透過PNGのため、IE6以下のブラウザでは透過されず、2色で表示されてしまいます（下）。 ここでは pngfix.js を利用して透過する方法を紹介します。 PNG in Windows IE: How To Use 他にも透過PNGライブラリは色々出回ってます。 AlphaLoader - Public Amachang to-R：アルファ画像を扱うalphafilter.jsライブラリ ユンサンの／융상의／YungSang's：透過PNG と IE と IE7 １．スクリプトのダウンロード・アップロード PNG in Windows IE: How To Use の中間辺りにある pngfix.js のリンクをクリックして、pngfix.js をダウンロード。 ダウンロードした pngfix.js をサ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
lllcolor.com
透過PNGをIE6以下のバージョンで綺麗に表示する方法 - DesignWalker
IEでアルファチャンネルPNGを表示する （iepngfix.htc） - youmos