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

クリック可能な画像

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

画像をクリック可能にするには、<img>タグを<a>タグで囲みます。例えば、次のようになります:

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

画像キャプション

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

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

画像の最適化

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

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