Google Web Fundamentalsによると：
画像の最適化は芸術と科学の両方です。画像の最適化は芸術です。1つの画像を圧縮するための最適なソリューションはないため、画像の最適化が科学である理由は、多くのものが非常によく開発されているためです。優れた方法とアルゴリズムにより、画像のサイズを大幅に縮小できます。画像の最適な設定を見つけるには、フォーマット機能、エンコードされたデータコンテンツ、ピクセルサイズなど、多くの次元で注意深い分析が必要です。
1.画像フォーマット
私たちがよく聞く単語には、ベクトル図、スカラー図、SVG、非可逆圧縮、可逆圧縮などがあります。まず、さまざまな画像形式の特性について説明します
| フォーマット | 圧縮方法 | 透明性 | アニメ | ブラウザ互換 | シーンに適応 |
| JPEG | 非可逆圧縮 | サポートされていません | サポートされていません | 全部 | 複雑な色と形、特に写真 |
| GIF | ロスレス圧縮 | 応援 | 応援 | 全部 | シンプルな色、アニメーション |
| PNG8 | ロスレス圧縮 | 256色+透明をサポート | サポートされていません | 全部 | 透明性が必要な場合 |
| PNG24 | ロスレス圧縮 | 2 ^ 24色+透明をサポート | サポートされていません | 全部 | 透明性が必要な場合 |
| PNG32 | ロスレス圧縮 | 2 ^ 24色+透明をサポート | サポートされていません | 全部 | 透明性が必要な場合 |
| APNG | ロスレス圧縮 | 応援 | 応援 | Firefox Safari iOS Safari | 半透明効果を必要とするアニメーション |
| Webp | より良い圧縮、非可逆圧縮 | 応援 | 応援 | iOS WebView、Chrome Opera Android Chrome Android Browser、Android allには互換性の問題があります | 複雑な色や形のための予測可能なブラウザプラットフォーム |
| Svg | 可逆圧縮、ベクトルイラスト | 応援 | 応援 | すべて（IE8以降） | シンプルなグラフィックス、優れたズームエクスペリエンスが必要画像の効果を動的に制御する必要がある |
その中でも、APNGおよびWebP形式は遅れて出現し、Web標準では採用されていません。これらは、特定のプラットフォームまたはブラウザー環境が予測できる場合にのみ採用されますが、サポートされていない環境では機能が低下する可能性があります。画像形式選択プロセスは次のとおりです。
豊富な写真、JPGは普遍的な選択です
- 人間の目の構造は、JPG圧縮された写真を表示するのに非常に適しています。JPG圧縮された写真は完全に無視して、脳の詳細を埋めることができます。
- 圧縮率が高くない場合にJPGが保持する詳細は良好です
- WebPはJPGと比較してボリュームを30％削減できますが、現在の互換性は不十分です
より一般的なアニメーションが必要な場合は、GIFが唯一の利用可能なオプションです
- GIFは256色の色範囲をサポートし、完全な透明度/完全な不透明度のみをサポートします
- カラフルなアニメーションを表示すると、GIFに不完全な色とギザギザのエッジが表示されることがある
画像が標準の幾何学的図形で構成されている場合、またはプログラムを使用してその表示効果を動的に制御する必要がある場合は、SVG形式を検討できます。
- SVGはXMLを使用して定義されたベクターグラフィックであり、生成された画像はさまざまな解像度で自由に拡大縮小できます
- SVGでは、JavaScriptやその他のインターフェースを介して画像効果を自由に変換でき、一部の要素の自由な回転、移動、色の変更を完了できます。
豊かな色の画像をはっきりと表示する必要がある場合は、PNGの方が適しています
- PNG-8は256色を表示できますが、256レベルの透明度を同時にサポートできるため、色が少ないが半透明が必要なシナリオ（WeChatアニメーションの大きな表現など）では、PNG-8を検討できます。
- PNG-24はトゥルーカラーを表示できますが、透明でカラフルな画像はサポートされていません（スクリーンショット、インターフェース設計図など）。
- PNG-32は、256レベルの透明度をサポートしながらトゥルーカラーを表示できますが、最高の効果ですが最大サイズです。
画像サイズの選択
CSSピクセルとデバイスピクセルという異なるタイプのピクセルを区別する必要があります。CSSピクセルには、複数のデバイスピクセルを含めることができます。画像の場合は、高DPI画面で高解像度の画像を使用する必要があります。Retinaの場合は、2倍の解像度（ほぼ4倍のサイズ）の画像が必要です。
制御できる場所は、目的のサイズの画像を「正確に」表示することです。たとえば、CSSまたはラベルのwihth / height属性を使用して、画面上で200x200の画像のサイズを100x100に調整すると、（200x200）-（100x100）= 30,000ピクセルになり、画像サイズの原因になります。 75％！
使用inline-image
4 kbまたは8 kbより小さい画像のインライン画像により、httpの損失を低減
スプライト
同じページで使用されている画像を大きな画像に配置し、CSSポジショニングで異なる画像を表示し、httpリクエストの数を減らします
自動最適化
自動最適化：CDN
使用CDNは、自動的に海外にI CDNプロバイダー、画像を最適化することはほとんどこのタイプのサービスを見ていないが、同国の2頭の新人CDN追加7頭の牛をして、彼らは撃つ多くの作業を行っているこの地域に。その機能的な方法は、CDNに画像を要求するためのURLパラメーターに画像処理のパラメーター（形式、幅、高さなど）が含まれ、CDNサーバーが要求に従って必要な画像を生成し、それらをユーザーのブラウザーに送信することです。
Qiniu Cloud Storageの画像処理インターフェースは非常に豊富で、以下のような画像の基本的な操作のほとんどをカバーしています。
- 画像のトリミング、複数のトリミング方法のサポート（長辺、短辺、塗りつぶし、ストレッチなど）
- 画像形式の変換、JPG、GIF、PNG、WebPなどのサポート、さまざまな画像圧縮率のサポート
- 画像処理、サポート画像透かし、ガウスぼかし、重心処理など
Qiniu Cloud Storageの画像処理インターフェースの使用は複雑ではありません。たとえば、次の元の画像：
次のURLをリクエストし、中央部分をトリミングし、ズームアウトして200x200のサムネイルを生成します。
http://qiniuphotos.qiniudn.com/gogopher.jpg?imageView2/1/w/200/h/200
自動最適化：Grunt / Gulp / webpck
これが画像最適化のためのGruntコンポーネントです：grunt-image。静的リソースのマージ、JSファイルとCSSファイルの圧縮、SASSのコンパイルなどのフロントエンドエンジニアの反復作業は、Gruntなどの自動化ツールを使用してバッチで完了することができます。
grunt-imageは非常に強力です。著者の紹介によると、内部的に読み込まれる画像最適化ツールには、pngquant、optipng、advpng、zopflipng、pngcrush、pngout、mozjpeg、jpegRecompress、jpegoptim、gifsicle、svgoなどがあります。PNG、JPG、SVG、GIFのバッチ自動最適化をサポートします。速度も良好です。構成方法は、単一の画像の最適化と完全なカタログの最適化をサポートします
自動最適化：Google PageSpeed
Googleの作業スタイルは比較的徹底しています。どのソフトウェアが機能していないかを確認したら、新しいバージョンにフォークするか、単純に書き換えることができます。ウェブの最適化のために、Google はapacheまたはngnixにロードできるGoogle PageSpeedサーバーモジュールをリリースしました。自動最適化のために構成ファイルで設定を行います。画像形式の変換、画像の最適化、さらには画像のLazyLoadにも関連するオプションがあります。展示のこの部分は非常に長くなります。興味のある学生向けのGoogleマニュアルを参照してください。
