🖼️画像の最適化
なぜ最適化するのですか?
の通常ページでは、ほとんどのJSファイルを除いて、バイトは画像です. の高解像度画像を使用するとともに、Web性能を向上させる方法を考慮すべきである.<メリット>
ブラウザでダウンロードするバイトが減少します. サーバは、より少ないストレージスペースを必要とします. のコンテンツをダウンロードする速度が速く、Webページのロード速度が向上しました. サイトのパフォーマンスを向上させることができます. 最適化された画像は、ユーザ体験に良好な影響を及ぼす.画像の最適化方法
画像サイズの調整
画像のサイズを指定し、ロード速度を速めることができます. 画像のサイズを減らすことで、サーバからのダウンロード速度を減らすことができます.適切なファイル形式を選択
画像のタイプ設定フォーマットに従って、画像最適化を行うことができる. JPEG:写真とリアル画像 PNG:ラインアート、テキスト密集型画像、およびほとんど色のない画像コメントドキュメント✅ CSS - Image Sprite
複数の画像は、単独ではなく単一の画像として合成され、次いで、調整
positionによって単一の画像として使用される.
Web最適化の利点のうち、最大の利点は、サーバへの要求を低減できることである.イメージは一度サーバに要求するだけなので、イメージは一度サーバに要求するだけで使用できます. サーバから送信された画像のbackground-position属性を利用して、特定の部分のみが露出される. の下の画像は、NAVERメイン画面上のsprite画像です.画像の位置を現在の画面になるように適宜調整します.
無損圧縮と無損圧縮
無損画像圧縮オリジナル画像の情報損失は許可されていません. 解凍時に元のデータが生成されます.
画像圧縮の損失が移動可能な形態を形成するために、情報損失が許容される. 解凍時に、元のデータに近いデータが生成される. データの減少量が高い. は、通常、マルチメディアデータ(オーディオ、ビデオ、画像)を圧縮するために使用される.
コメントサイト ✅ Lazy Loading
1つのテクニックでは、ページ内の実際の画像を画面に表示する必要があるときにロードできます.
ユーザーがWebページを開くと、ページ全体のコンテンツがダウンロードされ、レンダリングされます. では、ブラウザはWebページをキャッシュできますが、ユーザーがダウンロードしたすべてのコンテンツを見ることは保証されません.例えば
は,ライブラリ全体をダウンロードしたが,ユーザが1枚目の画像だけを見て出かけたとき,ウェブページに不要なサーバ要求が発行される. であるため、現在の画面に表示されない画像をロードする必要はなく、必要に応じてロードするだけでサーバ要求を削減することができる. も必要なイメージのみを要求するため、ユーザーがロードするバイト数が減少します.<Lazy Loadingメソッド>
1.img tagについて
イメージのロードを回避するために、img tagのsrcプロパティを空にします. jsを使用すると、ユーザは、画像部分をスクロールするときにイベントをトリガーすることができる.2. Intersection Observer API
APIは、要素がビューポートに入ることを検出する.したがって、画像がビューポートに入ると、isIntersectionプロパティを使用してsrcプロパティに値を割り当てることができます.
ただし、Intersection Observer APIはすべてのブラウザをサポートしていません.3. Native Lazy Loading
非常に新しいGoogle Chromeブラウザバージョン(Cheroem 76)は、ネイティブの不活性なロードをサポートします. lazy loadingを実現するには、埋め込む画像に「loading」プロパティを追加するだけです.4. CSS - Background Image
層がビューポートに入る前にCSS背景画像属性を適用しない方法. ドキュメントの領域に背景画像が適用されていない場合、ブラウザは背景画像をロードしません.CSSルールが適用されている場合、ブラウザは画像をロードします.
コメントサイト レスポンス画像
モバイル画像が
デスクトップと一致する場合は、2～4倍のデータが必要です. マシンに対して異なる画像サイズを提供することが望ましい. 2srcsetプロパティの使用 src setプロパティは、「画像ソースのセット」を表します. は、同じ割合の異なる大きさの同一画像の少なくとも2つ以上を示す属性である. で指定されたサイズによって画像サイズが変化します. <img src="꽃-대형.jpg"
srcset="
꽃-작은.jpg 480w,
꽃-중간.jpg 800w
꽃-대형.jpg 1080w"
/>
2@media(メディアクエリ)プロパティの使用
指定したサイズに応じて異なるCSSを適用して、データ損失を減らす方法. 750 px以下で@media内部で作成したCSS属性を使用します.従って、imageは、対応するブロック内部で調整するでもよい.
@media screen and (max-width: 750px) {
body {
background-color: lightgreen;
}
}
オンライン画像圧縮サイト
optimizilla RECOMPRESSOR