Smart AVIF, WebP, PNG and JPEG Compression for Faster Websites
Smart AVIF, WebP, PNG and JPEG Compression for Faster Websites
ウェブ上で使用される画像ファイルのフォーマットには、主にJPEG、GIF、PNGという3種類の圧縮形式があり、この中で可逆圧縮かつフルカラー、つまり元画像の画質を見た目上一切劣化させることなくファイルサイズを縮小できるのがPNGですが、欠点は高画質な分ファイルサイズが大きくなってしまいがちなこと。 このため、フルカラーのPNGをウェブ上で使用する場合は専用ツール（有名なものではAzConvPNGなど）を使用してファイルサイズの最適化を行い、画質を劣化せずにできる限りサイズを落とした上でサーバーにアップロードされることがよくありますが、それでも削減できるファイルサイズは良くて1割といったところでしょう。 実は、一般にはほとんど知られていませんが、この他にもフルカラーPNGを画質劣化なしに、さらに大幅にファイルサイズを削減できる裏技的な方法が存在します。やり方は少し面倒ですが、うまく使えば非常
IE6,5.5で透過pngを表示させるため、今まで様々なスクリプトが開発されてきましたが、 とうとう決定版が出現。 ■ DD_belatedPNG http://www.dillerdesign.com/experiment/DD_belatedPNG/ ここからダウンロード。 /js/ に D_belatedPNG.jsをアップロードして、 <!--[if lte IE 6]> <script type="text/javascript" src="./js/DD_belatedPNG.js"></script> <script type="text/javascript"> /* EXAMPLE */ DD_belatedPNG.fix('.png_bg'); </script> <![endif]--> とするだけでOK。 DD_belatedPNG.fix('.png
Smashing Magazine - WE SMASH YOU WITH THE INFORMATION THAT WILL MAKE YOUR LIFE EASIER, REALLY. Sergey Chikuyonok氏がSmashing Magazineにおいて「Clever PNG Optimization Techniques」のタイトルのもと、PNG画像を最適化するためのいくつかのテクニックを紹介している。このテクニックは、PNGエンコーダがどのようにデータを保存するかを調査することで得られたテクニックだと説明されている。 記事の中でSergey Chikuyonok氏は、まず、PNGで導入された機能のうち、特に次の2つを理解しておくことが重要だと説明。 スキャンラインフィルタリング (データフィルタ) ピクセルのカラーを別のピクセルから得る方法。全ピクセルにカラー情報を持た
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers YSlow, Stoyan Stefanov氏によればWebページに採用する画像の種類は写真データにはJPEGを採用し、それ以外にはPNG8にするのが妥当だとされている。しかしPNG8に透過データを含める場合には注意が必要だ。Net Applicationsの報告によれば2008年11月現在でIE6のシェアは22%弱はある。純減を続けているとはいえ、それでもなお第2シェアのFirefoxの合計シェア21%弱よりも多い。このIE6はPNG8の透過情報をうまく扱えない。 IE6で透過データを含んだPNG8を表示すると、GIFと同じように透過かそうでないかまで透過表現が低下してしまう。このため透過情報を含んだPNG8をIE6で表示する場合には何らかの追
alphafilter.jsが透過pngのロールオーバーに対応 IE6用の透過pngライブラリ「alphafilter.js」が透過pngのロールオーバーに対応しました。 透過機能はIE6で画像の拡張子がpngの場合のみですが、ロールオーバーはすべてのブラウザ、jpg、gif、png形式の画像で利用いただけます。 img要素の場合class属性に「btn」と付ければロールオーバーの処理を行います。 <img src="./sample.png" class="btn" alt="" /> sample.pngの場合はsample_on.pngのように拡張子の前に「_on」が付いた画像をロールオーバー時に表示します。 透過機能と合わせて利用する場合は、以下のように指定します。 <img src="./sample.png" class="alphafilter btn" alt="" />
IE6で透過pngを表示する「DD_belatedPNG」 Check Tweet 配布元：Medicine for your IE6/PNG headache! ライセンス：MIT License. DD_belatedPNGはIE6で透過pngを表示するJavaScriptライブラリだ。background-positionやbackground-repeatなどのプロパティや:hover擬似クラスなどにも対応している。 その上、AlphaImageLoaderではなくVMLにより実装されている為、比較的早くに動作する。 使い方 ダウンロードしたDD_belatedPNGをhead要素などで読み込みます。その際に条件付コメントでIE6のみで読み込まれるようにしてください。 次にD_belatedPNG.fix(‘透過にしたい要素をCSSセレクタで指定’);といったJavaScriptを
コンサルティング/Web広告/Webプランニング/Web制作/システム開発 ※ignis[イグニス]：篝火の意(ラテン語) ちょっと複雑なレイアウトを組む際、キレイにHTMLコーディングするために、透過（透明）GIFや透過（透明）PNGを利用するのですが、透過PNGのブラウザ対応状況が微妙で調べてみたのだけど、あまりまとまっているサイトがなかったためメモを残してみる。（GIF形式でも透過処理はできるのだけど、さまざまな背景の上でもドロップシャドウなどををキレイに見せるにはアルファチャンネルのPNG画像である必要があるため） ≪透過（透明）PNGブラウザ対応状況≫ IE6以下：PNG8→角が荒い（PNG24→透過できず） IE7[for Win]：キレイにいける Gecko/Mozilla(Sleipnir)[for Win]：キレイにいける Safari2.0.4[for Mac]：キレイ
IE6でも気にせずPNGを使えるようになったので、画像をPNGに差し替えようと作業していて気づいたんだけど。 PhotoshopでPNGファイルを作成して、IEで表示すると、元の画像と異なった色で表示されるのね。全体的に色が明るいというか。画像単体では気づかなかったけど、他の要素と並べると、はっきり色が違う？？ いろいろググって調べてみたんだけど、PNG内部のチャンクに保存されているガンマ情報が原因らしい。 このガンマ情報を削除してやればちゃんと表示されるんだけど、Photoshopでは、この情報を削除することができない（ーー）。 Fireworksなどで保存しなおしてやればいいんだけど、それだけのために他のソフトを立ち上げるのもなあ～。つか、こんな問題、世界中で困ってるはずだから、プラグインがあるんじゃないの？ …で、見つけたのが、Photoshop用のプラグイン「SuperPNG」。
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
以前もこの「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
★↓jQueryでは無かった事が判明。 PNG Fixで検索していていつのまにかこちらにシフトしてしまったみたい（恥） jQueryのはまた書くお。 ･･････････････････････････････････････････････････････････････････････ 透過PNGでIE6対策のんを探していて jQueryのん使って〜といわれたので Webdesigning 2008年9月号にものってたし んじゃ〜メジャーなんでしょうって事で、png fixでやる。 ■PNG Fix 2.0 http://www.twinhelix.com/css/iepngfix/ IE PNG Fixを使って透過PNGを表示させる場合CSSファイルに1行設定を追加するだけでよく、HTMLの記述を変更しなくていくて、CSS中に読み込ませるだけでIE5.5、IE6で透過PNGを実現。さ
We write programs to acquire, sort, and filter large amounts of data. Our programs, refered to as “crawlers” or “spiders” get your information quickly, accurately, and effectively. Whether you are looking to obtain a few hundred records, or millions, our crawlers are designed to collect your information automatically. Our crawlers development team will build a program to get the data you need spec
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
