目次
1 はじめに
最新の Web アプリケーションでは、画像は不可欠な要素です。ただし、画像が大きいか最適化されていないと、サイトの読み込みが遅くなり、ユーザー エクスペリエンスに影響を与える可能性があります。したがって、フロントエンド開発において、画像処理と最適化は非常に重要なタスクです。このブログでは、Web サイトのパフォーマンスとユーザー エクスペリエンスを向上させるための、画像圧縮、遅延読み込み、遅延読み込み、レスポンシブ画像やその他のテクノロジーを含む、フロントエンドで画像処理と最適化を実行する方法を段階的に説明します。
2. 画像圧縮
2.1 圧縮ツールの使用
他の画像の最適化を行う前に、まず画像自体のサイズができるだけ小さいことを確認します。TinyPNG、ImageOptim などのプロ仕様の画像圧縮ツールを使用して、画像を最適なサイズに圧縮できます。これにより、画像のファイル サイズが小さくなり、画像の読み込みが速くなります。
2.2 WebP形式の使用
WebP は、Google によって開発された、可逆圧縮および非可逆圧縮をサポートする画像形式です。通常、JPEG および PNG 形式よりも小さく、同様の視覚品質を維持します。一部の主要な画像を WebP 形式に変換して、読み込みを高速化できます。
<picture>
<source srcset="path/to/image.webp" type="image/webp">
<img src="path/to/image.jpg" alt="Image">
</picture>
上記のコードでは、<picture>要素を使用して、さまざまな形式の画像の代替を提供します。ブラウザは、画像をロードするためにサポートされている最適な形式を選択します。
3. 画像の遅延読み込み
遅延読み込みは、ページのスクロール時にすべての画像を一度に読み込むのではなく、表示可能な領域内の画像のみを読み込むことを可能にする最適化手法です。これにより、最初のページの読み込み時間が短縮され、ユーザー エクスペリエンスが向上します。
3.1 基本的な実装
windowオブジェクトのscrollイベントをリッスンすることで画像が可視領域に入ったかどうかを判断し、画像を動的にロードできます。
<img src="path/to/placeholder.jpg" data-src="path/to/image.jpg" alt="Image">
const images = document.querySelectorAll('img[data-src]');
function lazyLoad() {
images.forEach((img) => {
if (img.getBoundingClientRect().top <= window.innerHeight) {
img.src = img.dataset.src;
img.removeAttribute('data-src');
}
});
}
window.addEventListener('scroll', lazyLoad);
上記のコードでは、data-srcプロパティを使用して実際の画像へのパスを保存し、srcプロパティをプレースホルダー画像に設定します。画像が表示されると、data-srcの値を to に割り当てsrc、実際の画像を読み込みます。
3.2 遅延読み込みの最適化
上記の実装は、単純な遅延読み込みが可能ですが、場合によっては問題が発生する可能性があります。たとえば、ユーザーがページを速くスクロールすると、多数の画像が同時に読み込まれ、ページのパフォーマンスに影響を与える可能性があります。この状況を回避するには、Intersection Observer API遅延読み込み効果を最適化するために使用できます。
const images = document.querySelectorAll('img[data-src]');
const options = {
rootMargin: '0px',
threshold: 0.1,
};
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.removeAttribute('data-src');
observer.unobserve(img);
}
});
}, options);
images.forEach((img) => observer.observe(img));
上記のコードでは、Intersection Observer API画像が表示可能領域に入るかどうかを観察するために使用します。画像が表示可能領域に入ると、IntersectionObserverコールバック関数がトリガーされて実際の画像がロードされます。
4. レスポンシブ画像
レスポンシブ画像とは、デバイスの画面サイズと解像度に応じて、異なるサイズの画像を動的にロードすることを指します。これにより、大画面に大きすぎる画像が読み込まれることがなくなり、パフォーマンスとユーザー エクスペリエンスが向上します。
4.1<picture>要素
<picture>要素を使用すると、さまざまな画面サイズや解像度に合わせて複数の画像バージョンを提供できます。
<picture>
<source srcset="path/to/image-small.jpg" media="(max-width: 768px)">
<source srcset="path/to/image-medium.jpg" media="(max-width: 1024px)">
<source srcset="path/to/image-large.jpg" media="(min-width: 1025px)">
<img src="path/to/image-default.jpg" alt="Image">
</picture>
上記のコードでは、画面サイズごとに異なる画像バージョンを提供しています。ブラウザは、画面サイズに基づいて最適な画像を読み込みます。
4.2srcset性質とsizes特性
srcsetこの属性を使用すると、代替画像のセットを指定でき、ブラウザーは画面サイズと解像度に基づいて最適な画像を選択します。
<img src="path/to/image.jpg"
srcset="path/to/image-small.jpg 320w,
path/to/image-medium.jpg 640w,
path/to/image-large.jpg 1024w"
sizes="(max-width: 768px) 320px,
(max-width: 1024px) 640px,
1024px"
alt="Image">
上記のコードでは、srcset属性を通じて代替画像とそれに対応する幅サイズを指定しました。sizesこの属性は、ブラウザーが最適な画像を正しく選択できるように、さまざまな画面サイズでの画像の幅を指定します。
5. 画像最適化のヒント
5.1 画像のプリロード
ページ上の重要な画像については、プリロード技術を使用してこれらの画像を事前にロードできるため、ユーザーが表示する必要があるときにすぐに表示できます。
<link rel="preload" href="path/to/image.jpg" as="image">
上記のコードでは、<link>要素の属性を使用してpreload、プリロードされた画像のパスとタイプを指定します。
5.2 レスポンシブ画像のプロパティ
一部の最新のブラウザでは、loading属性を使用して画像の読み込み動作を指定できます。
<img src="path/to/image.jpg" alt="Image" loading="lazy">
loading="lazy"イメージがすぐにロードされるのではなく、オンデマンドでロードされることを示します。
5.3 画像最適化ツール
圧縮ツールの使用に加えて、SVG 画像の最適化、PNG 画像の透明度の最適化、JPEG 画像のプログレッシブ読み込みなど、いくつかの最適化ツールを使用して画像をさらに最適化することもできます。
6. まとめ
画像の処理と最適化は、フロントエンド開発の非常に重要な部分です。このブログの実践的なデモンストレーションを通じて、画像圧縮、WebP 形式、画像遅延読み込み、レスポンシブ画像などのテクノロジーを使用して、フロントエンド画像を最適化し、Web サイトのパフォーマンスとユーザー エクスペリエンスを向上させる方法を学びました。
画像処理と最適化は幅広いトピックです。この記事では、一般的に使用されるいくつかのテクノロジのみを取り上げます。読者がこれらのテクノロジを詳しく学び、実際のプロジェクトに適用し、特定のシナリオと組み合わせてより詳細な最適化を実行できることを願っています。