パフォーマンス最適化のための画像圧縮、読み込み、フォーマット選択について

元のリンク:パフォーマンス最適化のための画像圧縮、読み込み、フォーマット選択について

画像の最適化を理解する前に、まず【2進数】と【演色性】の関係を理解しましょう。

2 進数と色

コンピュータでは、ピクセルは一般に 2 進数で表されます。異なる画像形式では、ピクセルと 2 進数の対応関係が異なります。ピクセルが対応する 2 進数が多いほど、表現できる色の種類が豊富になり、画像効果がより洗練され、画像に必要な記憶領域が大きくなります。

現在、画像の圧縮、正しいフォーマットの選択、CDN アクセラレーション、遅延読み込みなど、市場には画像リソースを最適化する方法がたくさんあります。

画像の圧縮

画像の圧縮は、誰もが考える最初の解決策であると考えられています。私たちがよく知っているTinpngのように、その原理は、画像に保存される色の数を「選択的に」減らすことによって、画像によって保存されるメモリを減らすことです。

「 PNG (Portable Network Graphics) ファイルをアップロードすると、画像内の類似した色が結合されます。この手法は「量子化」と呼ばれます。色の数を減らすことで、24 ビットの PNG ファイルをより小さな 8 ビットのインデックス付きカラーイメージに変換できます。」

例を見てみましょう：

詳細を表示：

画像フォーマット

マインドマッピング

JPEG / JPG

JPEG は、最も一般的に使用される画像ファイル形式です。

アドバンテージ

非常に高い圧縮率をサポートしているため、ファイル転送、ダウンロード、およびプレビューを大幅に高速化できます。
ファイルサイズは、可変圧縮率で制御できます。
1600 万色を簡単に扱えるため、フルカラーの画像を非常によく再現できます。

欠陥

JPGの非可逆圧縮は、カルーセルや背景画像の表示に傷がつきにくいのですが、ベクターグラフィックやロゴなど、線や色のコントラストが強い画像を処理すると、人為的な圧縮による画像のぼやけがかなり大きくなります。明らかです。そのため、この形式を使用して高精細で線の強い画像を表示するのには適していません。

さらに、JPG は透過性が必要な画像の表示をサポートしていません.透明な、別の方法を見つける必要があります.

ビジネスシーン

JPG は、豊富な色の画像を表示するのに適しています. 私たちの日常の開発では、JPG 画像は、大きな背景画像、カルーセル画像、またはプレビュー画像として表示されることがよくあります. ECサイトのホームページを開くと、大きな画像はほとんどJPGで処理されていることがわかります。

PNG-8 および PNG-24

png は、ロスレス圧縮アルゴリズムを使用したビットマップ形式です。

アドバンテージ

無損失圧縮
アルファ透明度の完全サポート。
画質を落とさずに繰り返し保存できます。

欠点

大きすぎる

ビジネスシーン

理論的には、 PNG-24 は、最適な表示効果 (詳細な表示写真、拡大が必要な写真、写真作品など) を追求し、ストレージサイズや必要な帯域幅を気にしない場合に使用できます。しかし実際には、過度のファイルサイズの問題を回避するために、より複雑な画像を処理するために PNG を使用することは通常ありません。PNGに適したシーンに遭遇した場合は、小さいPNG-8も優先します。

または、透過性や明確な線を含む画像を処理する必要がある場合は、PNG も使用されます。ウェブサイトのメインロゴなど:

SVG

厳密に言えば、オープンスタンダードなベクターグラフィックス言語である必要があります。

アドバンテージ

スケーラブル、無限拡大をサポート可能
プログラム可能

欠点

すべてのブラウザーが SVG をサポートしているわけではありません。IE8 以前のバージョンではプラグインが必要です。
複雑な画像はレンダリングを遅くします (小さな画像のみがサポートされています)。

ビジネスシーン

SVG はテキストファイルです。コードを書くように SVG を定義し、HTML で記述して DOM の一部にすることができます。Iconfontがより頻繁に使用されます。fillモジュールのプロパティを設定することで、アイコンのスキニング機能に簡単に適応し、そのfont-sizeサイズを調整できます。

Base64

64 の印刷可能な文字に基づいてバイナリデータを表す方法。

アドバンテージ

ネットワークリクエストを減らす
リアルタイムで動的に生成された画像の場合、画像をサーバーに保存してサーバーリソースを占有する必要はありません。

欠点

小さい画像のみに適用されます。
頻繁に差し替えが必要な画像をコードごと差し替えると、保守性が低下します。

ビジネスシーン

Sprite と同様に、Base64 は小さなアイコンソリューションとして存在します。

「Base64は、8Bitのバイトコードを伝送するためのエンコード方式です。画像をBase64でエンコードすることで、エンコード結果を直接HTMLやCSSに書き込めるため、HTTPリクエストの回数を減らすことができます。」

Elements で「base64」キーワードを検索すると、Base64 も多くの場所で使用されていることがわかります。また、対応する画像が占有するメモリが少なくなります。

Base64 はとても良いので、すべての画像に Base64 を使用しましょう。

Base64 エンコード後、画像サイズは元のファイルの 4/3 に拡大されます ( Base64 エンコードの原則)。大きな画像も HTML や CSS ファイルにエンコードすると、後者のサイズが大幅に増加します. HTTP リクエストを減らしても、この巨大なサイズによるパフォーマンスのオーバーヘッドを補うことができません. つまり、私たちが犠牲にするレンダリングリソースリクエストパフォーマンスよりも大きく、それだけの価値はありません。

Base64 でエンコードされた画像のほとんどが小さな画像であることがわかります。

WebP

非可逆圧縮と可逆圧縮 (可逆) の両方を提供する画像ファイル形式。

アドバンテージ

ロスレスとロスレス
小さな足跡
透明性をサポートできます

欠点

互換性が悪い

ビジネスシーン

JPEG/JPGと同じ。現在は互換性が良くないため、JPEG/JPGと併用するのが一般的です。

CDN を使用した OSS

写真などのリソースをプロジェクトに入れ、オンラインでパッケージ化するのが私たちの独自の方法です。

これの欠点は、パッケージ化されたパッケージが大きく、ユーザーがリソースを要求する速度も制限されることです。たとえば、サーバーが中国南部にある場合、中国北部のユーザーからのリクエストは少し遅くなります。大量の同時実行が発生した場合、デプロイサーバーからインターフェイスとリソースを要求することは、サーバーに過剰な負荷をかけることに他なりません。一時的に写真を差し替えたい場合は、パッケージを作り直してオンラインで公開する必要があり、非常に面倒です。

イメージを OSS に配置し、CDN で高速化したところ、この問題は非常にうまく解決されました。さまざまな地域のユーザーが最も近いサーバーにアクセスでき、繰り返されるリクエストによってキャッシュが生成され、OSS トラフィックの浪費を回避できます。この記事も参照できます: OSS と CDN の違い

画像の遅延読み込み

最初の画面のデータが多すぎて読み込みが遅い場合は、遅延読み込みを検討する必要があります。ユーザーがプレビュー位置までスクロールすると、画像データのリクエストが進行中です。ピリオドは、スケルトン画面またはサムネイルに置き換えられます。

window.onload = function () {
    // 获取图片列表，即 img 标签列表
    var imgs = document.querySelectorAll('img');
    // 获取到浏览器顶部的距离
    function getTop(e) {
        return e.offsetTop;
    }
    // 懒加载实现
    function lazyload(imgs) {
        // 可视区域高度
        var h = window.innerHeight;
        // 滚动区域高度
        var s = document.documentElement.scrollTop || document.body.scrollTop;
        for (var i = 0; i < imgs.length; i++) {
            //图片距离顶部的距离大于可视区域和滚动区域之和时懒加载
            if ((h + s) > getTop(imgs[i])) {
                // 真实情况是页面开始有2秒空白，所以使用 setTimeout 定时 2s
                (function (i) {
                    setTimeout(function () {
                        // 不加立即执行函数i会等于9
                        // 隐形加载图片或其他资源，
                        // 创建一个临时图片，这个图片在内存中不会到页面上去。实现隐形加载
                        var temp = new Image();
                        temp.src = imgs[i].getAttribute('data-src');//只会请求一次
                        // onload 判断图片加载完毕，真是图片加载完毕，再赋值给 dom 节点
                        temp.onload = function () {
                            // 获取自定义属性 data-src，用真图片替换假图片
                            imgs[i].src = imgs[i].getAttribute('data-src')
                        }
                    }, 2000)
                })(i)
            }
        }
    }
    lazyload(imgs);
    // 滚屏函数
    window.onscroll = function () {
        lazyload(imgs);
    }
}

参照リンク:
パフォーマンスの最適化 - 画像の圧縮、読み込み、および形式の選択
 Alibaba Cloud CDN を使用して OSS アクセスを加速する