ウェブサイトのユーザーエクスペリエンス分析: 画像最適化手法についての簡単な説明

ウェブサイトの最適化では、画像が適切に最適化されていれば、ページの読み込み速度が向上し、ウェブサイトのユーザーエクスペリエンスが向上するだけでなく、画像の最適化によってウェブサイトの帯域幅を節約することもできます。では、ページ構築エンジニアは、UI の復元を確実にし、画像をできるだけ簡潔にするために、どのような方法で画像を最適化すればよいのでしょうか。ここでは、私の個人的な経験に基づいて、画像最適化の方法を簡単に紹介します。まず、画像に関する知識を理解しましょう。

1. ベクター グラフィックスとビットマップ グラフィックス。

ベクター グラフィックス: 拡大縮小や回転を行っても画質が損なわれない画像形式。どれだけ近づいても、グラフィックスの最小単位は見えません。保存されるファイルは小さくなりますが、色レベルが豊かなリアルな画像を作成することは困難です。完全な円、放物線、その他の形状として考えることができます。

ビットマップ: ラスター マップまたはピクセル マップとも呼ばれます。最小単位はピクセルで構成されており、拡大縮小または回転すると歪みます。たとえば、ビットマップはクロスステッチのようなものです。離れて見ると絵は繊細で色鮮やかで、近くで見るとステッチごとに色の変化が見られます。

クロスステッチ クロスステッチ 拡大

次の表は、ベクター グラフィックスとビットマップ グラフィックスを比較したものです。

2. 非可逆圧縮と可逆圧縮。

非可逆圧縮: 人間の目で観察される現実世界の突然の変化に基づいて、色の段階的な変化を維持し、その後、近くの色を使用してグラデーションまたはその他の形式で塗りつぶすのが特徴です。ピクセルデータ情報のため、保存容量は削減されますが、画像復元品質には影響しません。 JPG は、画像を 8 x 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 の間になります。

たとえば、スキンの背景画像、パブリッシャー、ボタンの背景、パブリッシャーの下のヒント、右側の広告、ユーザーのアバター、ユーザーが投稿した写真などです。

元のタイトル: ウェブサイトのユーザー エクスペリエンス分析: 画像最適化手法に関する簡単な説明

キーワード: ウェブサイト、ユーザー、エクスペリエンス スコア、簡単な説明、画像、最適化、方法、if、ウェブマスター、ウェブサイトのプロモーション、収益化