最適化された画像表示のサンプル

このページでは、画像最適化機能を使った表示方法を紹介します。

基本的な最適化画像

カスタムサイズ指定

レスポンシブ画像（幅を指定）

通常のMarkdown画像（比較用）

画像最適化の利点

1. 複数フォーマット: WebPとJPEGを自動生成
2. 複数サイズ: デバイスに応じた最適なサイズを配信
3. 遅延読み込み: loading="lazy"で表示速度を改善
4. 非同期デコード: decoding="async"でパフォーマンス向上

使い方

{％ image "画像パス", "代替テキスト", "sizesの値（オプション）" ％}

または

{％ responsiveImage "画像パス", "代替テキスト", "幅1,幅2,幅3", "sizesの値" ％}