Web サイトの最適化では、画像が適切に最適化されていれば、ページの読み込み速度が向上し、Web サイトのユーザー エクスペリエンスが向上するだけでなく、画像の最適化によって Web サイトの帯域幅も節約できます。では、ページ構築エンジニアとして、UI を確実に復元できるだけでなく、画像を最も合理化できる画像の最適化にはどのような方法を使用すべきでしょうか。私の個人的な経験に基づいて、画像の最適化方法を簡単に紹介します。まず、画像のいくつかの側面を理解します。
1. ベクターグラフィックスとビットマップ。
ベクターグラフィックス: どれだけ近づいて見てもグラフィックの最小単位が見えない、歪みなく拡大縮小や回転が可能な画像形式。保存されるファイルは小さくなりますが、色の階調が豊かでリアルな映像効果を表現するのは困難です。真円、放物線、その他の形状として理解できます。
ビットマップ：ラスターマップ、ピクセルマップとも呼ばれ、最小単位はピクセルで構成され、拡大縮小や回転を行うと歪みが生じます。たとえば、ビットマップはクロスステッチのようなもので、遠くから見ると繊細でカラフルな絵が描かれ、近くで見ると各ステッチの色の変化がわかります。
クロスステッチ クロスステッチの拡大 次の表は、ベクター画像とビットマップの比較を示しています。
2. 非可逆圧縮と可逆圧縮。
非可逆圧縮: 色の段階的な変化、つまり人間の目で観察される現実世界の突然の変化を維持し、近くの色を使用してグラデーションまたはその他の形式で塗りつぶすことを特徴とします。ピクセルのデータ情報のため、記憶容量が削減され、画像の復元品質には影響しません。 JPG は非可逆圧縮形式であり、画像を保存する場合、画像は 8*8 ピクセルのグリッドに分解され、個別に最適化されます。たとえば、小さな白いブロックは 8*8 ピクセルで、黒い背景のブロックは 32*32 ピクセルです。小さな白いブロックが純粋な白ではなくなると、次の図に示すように、その周りの小さな白いブロックが非常に鮮明になります。
右上隅の白いグリッドは 8*8 ピクセルのグリッド ユニットにないため、保存すると、周囲の 8*8 グリッド ユニットと色がブレンドされます。下の図の効果です。
JPG 画像を保存すると画像がぼやけるのはこれが原因です。以下は、いくつかのカラー画像の部分的な比較結果です。
ロスレス圧縮: データの統計的冗長性を使用して圧縮し、画像上の各ピクセルのデータ情報を正確に記録します。彼の原理は、まずどの色が同じでどの色が異なるかを判断し、同じ色のデータ情報を圧縮して記録し、異なるデータを別々に保存するというものです。何度保存しても画質が劣化しません。
可逆圧縮された画像も歪むのはなぜですか? 彼の圧縮原理は、画像上の同じ領域の色をインデックス化することによって圧縮および復元することであるためです。つまり、画像内の色の数が少ない場合にのみ当てはまります。画像を保存して復元できる色の数を指定しないと、一部の画像情報が失われます。たとえば、PNG-8 形式と GIF 形式は次のとおりです。
PNG24 はトゥルー カラーであるため、カラー テーブルは空であり、歪みません。
3. PNG、GIF、JPG 画像の比較。
画像の最適化手法に進む前に、画像形式に関する技術的な詳細を学ぶ必要があります。各グラフィック形式には独自の長所と短所があり、それを理解することで、より良いビジュアル品質と圧縮品質を得ることができます。
Web ページの画像の最適化は、Web ページの高速化において非常に重要なステップです。画像を圧縮すると、帯域幅を節約できるだけでなく、Web ページの速度も向上します。一般的に使用されている画像編集ソフトウェアは画像を圧縮できます。
PNG-8 の高い圧縮率 画像を切り取る場合、PNG-8 を選択すると、より高い圧縮率が得られる場合があります。 PNG-24 ではなく PNG-8 であることに注意してください。ただし、場合によっては GIF または JPG の方がサイズが小さいため、最適な解決策を選択するには実際の状況に応じてデバッグする必要があります。
ポスタライゼーションを使用した PNG-24 の最適化のヒント:
Weibo の左側のナビゲーションにある小さなアイコンを例として、圧縮画像サイズの比較は次のとおりです。
PS トーン分離の手順は次のとおりです。
サイズを比較:
ツールの最適化を使用すると、サイズを小さくできる可能性があります。
上の画像は元々 GIF 形式であったことに注意してください
PNG形式に変更されました
したがって、ツールを使用して最適化する場合は、最適化されていない画像の欠落を避けるために、ファイル形式が変更されているかどうかを確認する必要があります。
Weibo ホームページでの画像最適化の適用:
1. グラフィック タイプと写真タイプ 画像形式を選択するときは、画像の使用シナリオや機能も考慮する必要があります。これらは、グラフィック タイプと写真タイプの 2 つのカテゴリに要約できます。グラフィック タイプ: 高度に凝縮されたグラフィック シンボル。少ない色数で素早く情報を伝えることができ、覚えやすい特徴があります。
グラフィック クラスは通常、PNG 形式または GIF 形式を使用します。最適化する場合、PNG 形式は PNG8 または PNG24、品質は 32 にできます。色抜けがある場合、品質は 64 または 128 にできます。
たとえば、ホームページの左側のナビゲーションにあるアイコン、フィード領域のアイコン、メダルの写真、絵文字アニメーションはすべてグラフィックです。
写真カテゴリ: 通常、写真には滑らかな色の遷移やグラデーションを含む何百万もの色が含まれており、グラフィックスがより複雑な場合は、実際の写真が写真に表示されることがあります。
写真には通常、PNG と JPG が使用されます。画像の色の濃さによって判断できます。
PNG の品質は通常 128 です。 JPG の品質は通常、ノイズの程度によって決まりますが、70 ～ 80 の間になります。
例: スキンの背景画像、発行者、ボタンの背景、発行者の下にあるヒント、右側の広告、ユーザーのアバター、ユーザーが投稿した写真。
2. 一般カテゴリとランダム カテゴリは、ホームページ上の写真の頻度に応じて、一般カテゴリとランダム カテゴリに分類されます。 一般カテゴリ: ホームページ上のアイコン、ボタン、小さな背景がすべての人に表示されます。
たとえば、上部トレイ アイコン、左側のガイド アイコン、フィード領域アイコン、発行者アイコン、ID アイコン、操作アイコン、ステータス アイコン、ボタンなどです。できるだけ PNG 形式で保存すると、ファイルが比較的小さくなります。
下の図は、Weibo のボタンと左側のナビゲーション アイコンのサイズを GIF および PNG 形式で比較したものです。
下の図は、GIF 形式と PNG 形式で保存された Weibo のボタンの背景画像のサイズ比較を示しています。
ランダム カテゴリ: 何を定義して公開するかによって異なります。
A. 絵文字GIF
FireWorks または ImageReady を使用できますが、ImageReady をお勧めします。
これらの式の色の値は比較的小さく、より大きな色を使用するとストレージ容量が大きくなるため、手動で 1 つずつ調整するのが最善です。
さらに、バッチ処理には処理に 1 つのフォルダーが必要です。式用のフォルダーが多すぎるため、基本的にバッチ処理は依然として非常に遅いです。 FireWorks をバッチ処理に使用すると、一部のアニメーションが高速になったり、エッジが欠けたりします。
手動で処理する場合、インデックスカラーの数に応じて格納するのが一般的で、4～128色となります。
B. 皮膚の再表面化の写真:
JPG形式またはPNG形式を使用してください。
スキンのメインの背景画像に実際の写真やテキストが含まれている場合は、デザインに近づけるために、JPG 形式にすることができます。85 以上の高品質の圧縮画像を使用する必要があります。背景画像のカラー スパンが小さい場合は、PNG 形式にすることができます。
C. メダルカテゴリー:
現在、GIF と PNG の 2 つの形式があり、GIF は小さい画像、PNG は中および大きい画像です。品質を重視して 128 を選択してください。
このディレクトリのバッチ処理が高速になります。それらはすべて同じフォルダー内にあるためです。ただし、手動で使用すると小さくなります。
D. さまざまな広告:
ヒント、右側の広告、サイト運営者の下部にある広告。 JPG形式またはPNG形式を使用してください。
E. ユーザー関連のグラフ:
ユーザーが投稿したアバターや画像は、バックグラウンドで圧縮品質を制御する必要があります。 JPG形式またはPNG形式を使用してください。
画像最適化ツール Smush.it の紹介
Smush.it は、YUI チームによって作成された YUI に基づくオンライン画像最適化ツールです。
以下の 4 つの画像最適化提案に基づいたサービスです。
JPGからメタデータを削除します。
JPGの圧縮率を最適化します。
特定の GIF 画像をインデックス可能な PNG 形式の画像に変換します。
インデックス可能なイメージから未使用のカラー情報を削除します。
そのため、Smush.it を使用して画像を圧縮すると、画像の視覚効果や品質を変えることなく、画像から余分なバイトを削除できます。
実際の使用で見つかったもの:
一部の JPG 画像を PNG 画像に変換することもできます。
PNG24 トゥルー カラー画像の場合、肉眼では検出できない一部の色情報を削除でき、PNG24 画像を最適化できない Photoshop や Firework の欠点を補うことができます。
GIFアニメーション画像を最適化できます。
Smush.itの利用方法1：FirefoxプラグインYslowのツールツールにあるSmush.itをすべて利用する
Weibo ホームページを例に挙げます。
Firebug、Yslow ツールを使用し、実行後に [ツール] を選択します
[すべての Smush.it] をクリックすると、自動的に http://www.smushit.com/ysmush.it/ にジャンプし、次の画像が表示されます。
「Download Smusshed Images」ボタンをクリックすると、zip ファイルがダウンロードされます。
方法 2: Smush.it Web サイトに直接ログインし、圧縮する必要がある画像の URL を入力ボックスに貼り付け (またはローカル コンピューターから画像を選択し)、[Smush] をクリックして画像を圧縮し、[Smuch] をクリックします。最適化レポートを提供し、画像の圧縮率と節約されたバイト数を表示し、圧縮された画像ファイルを含むダウンロード可能な圧縮パッケージを提供します。
以下の図は、オンライン URL (カンマ区切り) を直接入力する方法を示しています。
次の図は、ローカル コンピューターから画像を選択する方法を示しています。
以下の図は、最適化の結果を示しています。
誘導：
重要なポイントをもう一度確認してみましょう。
1. 適切な形式を選択します。写真の保存には JPG を使用し、アニメーションの保存には GIF を使用し、その他の画像の保存には PNG を使用し、可能な限り PNG8 を使用します。
2. PNG24 画像の圧縮技術。
3. Smush.itの使用。