PNGではなくJPEGを透明に使用する
JPEGはPNGよりもサイズが小さくなります。そう。 jpegfileの「背景」をいくつかのコードで透明にできれば、数キロバイト節約できると思いました。
では、たとえば、画像の色「_d67fff」をPHPまたはJSで透明にする方法はありますか？
JPEGのサイズは必ずしもPNGより小さいとは限りません。各形式には用途があります。 JPEGは、写真のような複雑な画像に最適であり、写真を圧縮する場合、PNGよりもファイルサイズが小さくなります。 PNGはロゴやボタンに最適で、これらの種類の画像を圧縮するときはJPEGよりも小さくなります。
JPEGは透明度をサポートしていないため、望んでいることはできません。この種の画像に理想的なPNGを使用してください。
" アルファチャネルをJPEG画像に追加する際 "では、PNGアルファレイヤーをメタデータとしてJPEG画像に埋め込み、Javascriptを使用して<img>タグを<canvas>に変換する必要があります。そのアルファ層を処理します。
彼の例はFirefoxおよびWebkitブラウザーで動作しますが、私のIE8では動作しません。
IE8での作業量（PNGアルファレイヤーを持つJPEGファイルの準備）と問題を考えると、これはお勧めしません。代わりに、OptiPNGを使用してPNGサイズを最適化できます。
JPEG圧縮アーティファクトは、＃d67fffになると予想される多くのピクセルがそうではないことを意味します-ロスレスJPEGを使用しない限り、その場合、明示的に必要な圧縮の利点が得られません。
将来的には、CSSクリップを使用してこれを実行できる可能性がありますが、現時点では、任意のポリゴンがサポートされていないようです。
私が見ることができるJPEGでこれを達成する最良の方法は、SVGを使用することです。 JPEGをパターン画像として使用してポリゴンを塗りつぶすか、ポリゴンクリップを作成します。
lossy PNG を開発して、このようなハッキングを不要にしました。あなたは小さなファイルと透明度とケーキも持つことができます。