PNG8とPNG24とPNG32で書き出しの違い | Cappee Design
こんにちは、@cappeeです。 最近はGIFやJPEGではなく背景透過じゃなくてPNGで書き出すほうが多くなってきましたね。 IEのバージョンの自動更新がだいぶ影響してます。 改めてPNG8とPNG24とPNG32の違いを検索。 PNG-8 8ビットカラー（256色）。 透明可。 IE6でもjsなどでの対応なく透過できるけど、グラデを使用してて「すべての色を割り付け」が対応できなかった場合はPNG32にする必要あり。 PNG-24 24ビットカラー（フルカラー）。 透明不可。 透明にしない場合はPNG32よりPNG24の方が少し容量を抑えて書き出すことができる。 PNG-32 24ビットカラー（フルカラー）。 透明可。 IE6で透過を実現したい場合はjsなどの対応が必要だが、昨今はIEの自動アップデートがあるので透過できなくても問題なく表示されていれば問題ないと判断するケース
PNG画像を劣化させずに圧縮できるPNGGauntletがすごい便利！
今回紹介するのは、PNG画像を劣化させずに圧縮できる「PNGGauntlet」というソフトウェアです。このPNGGauntletというソフトは、画像に付加された情報やデータを最適化することで、見た目は変わらずに品質は損なわずにファイルサイズのみを圧縮して小さくすることが可能です。 また、このソフトはPNGファイルの圧縮以外にもJPG、GIF、TIFF、BMPといった画像ファイルをPNGに変換する機能もあるので、画像の圧縮目的以外にも変換するソフトウェアとしても活用できます。 PNGGauntletnoPNG画像圧縮の効果について PNGGauntletがPNG画像圧縮にどれくらい効果があるかというと、このソフトを使うことで画像のファイルサイズは大体70％～80%くらいに小さくできます。今まで見た中では最高は20％くらいまで削ってくれた画像もありました。もちろん画像によって差がありますが、か
これは便利！Googleの画像検索で透過画像を見つけ出す -Alpha Finder
Alpha Finder Alpha Finderのインストール Alpha Finderの使い方 Alpha Finderのインストール Alpha Finderのインストールは簡単で、下記ページにChromeでアクセスし機能拡張をインストールしてください。 Chrome ウェブストア - Alpha Finder インストールが完了したら、Googleの画像検索へアクセス！ Google 画像検索 「.com」にアクセスしてください。 「.co.jp」では利用できません。画像の検索自体はどちらも同じだと思います。 Alpha Finderの使い方 ChromeでGoogle 画像検索にアクセスします。 とりあえず、「alpha」で画像検索。 目的の画像をホバーすると、拡大表示されます。
WebサイトでPNGを使うのは非常識！？ | poyosicom
誤解を与えるタイトルにしてしまったので、訂正しました。ごめんなさい。 こんにちは@poyosiです。PNGを使いまくってコーディングしてますか？ 会社から「WebサイトでPNGを使うのはNGだからGIFにしとけ」とか言われたことないですか？ そうではなくても、「なんとなくPNG使うくらいならGIFにしといたほうが安心」という方もいるのではないでしょうか？ 今日は画像ファイルフォーマットであるPNGをWebサイトに使うのはどうなの？というお話をしたいと思います。 WebサイトでPNGを使ってもいいんじゃない？ 「WebサイトでPNGを使うのは非常識だろ」という事を言われたのですが、仕様書など特に取り決めがない限りでは、それは違うんじゃないかなと思っています。 私はWebサイトでPNGが使われることについては「どんどん使うべき！」と思っています。 そもそもPNGを使わないほうがよいと言われた理
[IE7|IE8] jQueryのfadeIn/fadeOutした時にpng画像が変になる時のTips - Web 業界の技術屋 | VIVID Labs.
悪名高き IE6 がついに Yahoo さんからも干されてデベロッパー歓喜！となってから、それなりに時間が過ぎましたね。 あなたの会社では IE6 のサポート状況は如何なものでしょう？当社では Yahoo さんもこうしていますよ、せめて IE7 にしましょ？ね？ね？と言う地道な活動を続けて、それなりに効果が出ています。 実際 IE6 をサポートしなければ CSS がシンプルに書けたり、png のアルファチャンネルをプラグイン無しで描画出来…で、き… 出来てないじゃん！ と言う訳で今回は IE7 と IE8 で再現を確認したアルファチャンネルの描画バグをフィックスします、症状は下記のような感じ。 普通に img 要素で描画する分には問題無い 既に描画されている要素の opacity を弄るとアルファチャンネル部分が黒くなる 普通にサイトを作っていて、png ファイルの要素の opacity
IE6用透過png対応策、DD_belatedPNGの使用法と注意点
以前もこの「DD_belatedPNG.js」に関してはエントリーしましたが 『IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」』、あまりの素晴らしさにオススメするだけして使用法とか注意事項など大事な部分に触れずじまいでした。 この素敵な透過png対応策であるDD_belatedPNGちゃんですが、img要素に使用する際にも、div要素やp要素等の背景画像に対して使用する際も、ほんのちょっとしたクセがあります。 なので、今回はこの偉大なる「DD_belatedPNG.js」の使用方法と、使用に関するちょっとした注意点などをエントリーしようと思います。 DD_belatedPNGの使用法と注意点 1.使用するための準備 まずはこの「DD_belatedPNG.js」自体をダウンロードしないコトには始まりません。 配布元のDrew Diller’s bl
今どきのIE用PNG透過事情まとめ - okappublog
August 18, 2010 13:25 カテゴリAJAXWEB全般 今どきのIE用PNG透過事情まとめ Posted by okappu No Comments No Trackbacks Tweet 気になったのでIEのためだけに気になったので現状どんな感じなのかまとめ。 ただ、見るサイト、見るサイトで適当な説明も多く設置方法読むとunitなのにタイトルはpngfix,jsとか…。 まとめてみようと思ったけど…まとまらず。 やはり百聞は一見に… 自分で使ってみないことにはわからないことは多々ありますが全体的に眺めた結果。 DDbelatePNG今のところ一番無難な感じ ■iepngfix.js ・AlphaImageLoaderフィルターを使用するので、描画処理自体は遅く、メモリも大きく消費する。 ・AlphaImageLoaderフィルター使用時の致命的バグである「適応ブロック内の
IE6で透過PNGを使えるようにするjavascript | javascript | understandard.net
IE6でも透過 PNG が使えて、さらに background-image + background-repeat + background-position に対応した JavaScript が Drew Diller’s blog で公開されていました（JavaScript ファイルのダウンロードページ ( http://www.dillerdesign.com/experiment/DD_belatedPNG/#release0.0.8a ) ）。 ※2009年11月19日10時57分 バージョンアップしているので、リンク先を0.0.6a から0.0.8a に変更しました。 IE6で透過 PNG が使えるようになる JavaScript は結構色々ありますが、background-repeat や background-position に対応したものはあまり見かけないので、いざとい
IE6 透過PNG表示、IE PNG Fix 2登場 | エンタープライズ | マイコミジャーナル
17日(米国時間)、IE PNG Fixの最新版となるIE PNG Fix Alpha 2が公開された。IE PNG FixはJavaScriptで開発された透過PNGサポートライブラリ。LGPLのもとで提供されており、透過ライブラリがサポートされていないIE 6やIE 5.5で透過PNGを表示できるようにする。 IE PNG Fixを使って透過PNGを表示させる場合、CSSファイルに1行設定を追加するだけでよく、HTML自身を編集する必要がないという特徴がある。img要素によるバックグランドイメージ表示にも対応している。IE PNG Fix Alpha 2では背景ポジションの指定やリピートもサポートされている。 IE PNG FixはIE 6やIE 5.5に影響を及ぼすが、FirefoxやOperaなどほかのブラウザには影響を及ぼさない。類似したJavaScriptライブラリにはIE7.
IE6対応半透明PNG角丸リキッドボックス
IE6で半透明PNGを使った角丸のリキッドボックスは作れるのか？ 条件はJavaScriptを使わないこと。 問題はbackground-positionが設定できないため右端の画像を配置できない。 しかし意外な方法で解決することができました。 ソース <div class="headL"> <div class="headR"> <div class="headC"> 内容 </div> </div> </div> <div class="bodyL"> <div class="bodyR"> <div class="bodyC"> 内容 </div> </div> </div> <div class="footL"> lt;div class="footR"> <div class="footC"> 内容 </div> </div> </div> 半透明PNGを普通に使えるブラウザ用の
alphafilter.jsライブラリがバージョンアップしました。
alphafilter.jsライブラリがバージョンアップしました。 IE6で透過pngを扱う為のライブラリalphafilter.jsのバージョンアップを行ったので報告しておきます。 今までalphafilter.jsはprototype.jsがなければ動かなかったのですが、これを単体で稼働するように修正しています。 これでjqueryユーザーの方もalphafilter.jsをご利用いただけます。 また、他のライブラリとの相性を良くする為に、objectの汚染についても取り除くよう対応しました。 現状報告いただいてる問題点は 透過するbox要素にpositionが設定されている場合、box内のa要素が動作しない。 backgroundのrepeatなどには対応してない ここらへんは、AlphaImageLoaderの仕様がそうなので、対応方法が思いつかないんですけど分かる人がいたら教えて
アルファ画像を扱う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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
透過PNGをIE6以下のバージョンで綺麗に表示する方法 - DesignWalker
IEでアルファチャンネルPNGを表示する （iepngfix.htc） - youmos