クリック可能な画像、キャプション、最適化の操作

クリック可能な画像

クリック可能な画像は、ウェブページ上でクリックできる画像であり、通常は別のウェブページへの移動や他のアクションを実行するために使用されます。一般的に、オンラインストアを扱う際にこの方法が必要となります。ユーザーは画像をクリックして、商品の詳細説明や価格が表示されるカードを得ることに慣れています。

画像をクリック可能にするには、<img>タグを<a>タグで囲みます。例：

• View the Code
• Open the Live Page

この例では、<a>タグのhref属性でリンク先のURLを指定し、<img/>タグで表示する画像を指定します。ユーザーが画像をクリックすると、ブラウザはhref属性で指定されたURLに移動します。

画像キャプション

HTMLのfigureおよびfigcaption要素を使用して、ウェブページ上の画像にキャプションを関連付けることができます。以下はその例です。

• figure: 要素は figcaption と img の両方の要素を含む;
• figcaption: キャプションテキストを指定し、ユーザーに表示される;
• img: 表示する画像を指定する。

画像の最適化

大きな画像ファイルはページの読み込み時間を遅くし、ウェブサイトの動作を重く感じさせるため、ウェブページでは最適化が重要。以下のポイントを守ることで、ウェブサイト全体のパフォーマンスとアクセシビリティを向上できる。

• 画像を適切なサイズにリサイズする。HTMLやCSSでリサイズするのではなく、実際に表示するサイズに画像をリサイズしてからアップロードする;
• 適切なファイル形式を使用する。一般的に、写真にはJPEG、グラフィックや透過画像にはPNGを使用。BMPやTIFFなどの大きなファイルは避ける;
• 画像を圧縮する。画質を損なわずに画像を圧縮できるオンラインツールが多数存在する。画像をウェブサイトにアップロードする前に圧縮する。