画像最適化

画像最適化とは、画像を表すバイト数を削減するプロセスです。画像サイズが小さくなればなるほど、ページの読み込み速度が速くなります。画像サイズが小さくなればなるほど、消費される帯域幅が少なくなります。消費される帯域幅が少ないほど、特にモバイルネットワークを使用するユーザーにとって、より良いエクスペリエンスになります。

レスポンシブ画像

Qwikはレスポンシブ画像をサポートしています。

これは、vite-imagetoolsモジュールに依存する組み込み機能であるため、追加のパッケージやコンポーネントをインストールする必要はありません。

動作方法

• srcフォルダから画像をインポートします。
• 画像は複数のwebp画像に変換されます（各ブレークポイントごとに1つ：200px、400px、600px、800px、1200px）。
• 画像は処理され、サイズが縮小されます。
• <img>要素がレンダリングされ、srcset属性を使用して複数の解像度に対する画像ソースが設定されます。
• これで、ブラウザは使用中の解像度に対して最適な画像を読み込みます。

重要なポイント

コミュニティとQwikチームはこのAPIをいくつかの理由で高く評価しています。

• ランタイムなし、JSなし
• デフォルトでプロップスなし、シンプルなAPI
• 404エラーなし、厳密に型付けされたAPI
• レイアウトのリフローなし（幅/高さの自動設定）
• ハッシュ化された画像、不変のキャッシュ
• 自動的な`.webp` / `.avif`形式の最適化
• 自動的な`srcSet`生成
• 拡張可能（任意の`<img>`属性を使用可能）
• デフォルトで遅延読み込みと非同期デコード
• 軽量、HTML内の単一の`<img>`ノード

使用方法

インポートの最後に`?jsx`サフィックスを追加します。

import Image from '[IMAGE_PATH]?jsx';

テンプレートで画像をコンポーネントとして使用します。

<Image />

結果

このスクリプトは、以下の`<img>`要素を生成します。

<img
 
  decoding="async"
  loading="lazy"
  srcset="
    /@imagetools/141464b77ebd76570693f2e1a6b0364f4b4feea7 200w,
    /@imagetools/e70ec011d10add2ba28f9c6973b7dc0f11894307 400w,
    /@imagetools/1f0dd65f511ffd34415a391bf350e7934ce496a1 600w,
    /@imagetools/493154354e7e89c3f639c751e934d1be4fc05827 800w,
    /@imagetools/324867f8f1af03474a17a9d19035e28a4c241aa1 1200w"
  width="1200"
  height="1200"
>

• decoding="async"：画像はデコードされている間、ページのレンダリングをブロックしません。詳細はMDNウェブドキュメントを参照してください。
• loading="lazy"：ブラウザは、画像がビューポートに表示されるまで画像の読み込みを遅らせることができます。これにより、ページの読み込みパフォーマンスが向上します。
• srcset：この属性を使用すると、デバイスの画面サイズと解像度に基づいて、最適な画像を選択できます。
• widthとheight：widthとheight属性を設定することで、レイアウトのリフローを防ぎ、CLSスコアを向上させます。

注記：これらのプロパティの値を手動で設定することで、デフォルトの動作を変更することもできます。

• <Image decoding="sync" loading="eager" />

srcset属性のおかげで、ブラウザはデバイスの解像度に対して最適な画像を読み込みます。

元のソースサイズは1.5MBでしたが、現在は数キロバイトになりました。

例

import { component$ } from '@builder.io/qwik';
import Image from '~/media/your_image.png?jsx';
 
export default component$(() => {
  return (
    <div>
      <Image />
    </div>
  );
});

画像のwidthとheightのカスタマイズ

画像にカスタムwidthを設定する必要がある場合があります。

<Image style={{ width: '300px'}} />

しかし、その場合、伸縮を防ぐためにheightも手動で指定する必要があります。

<Image style={{ width: '300px', height: '200px'}} />

以下に、heightを手動で設定せずに、アスペクト比を維持するための簡単な方法を示します。

ヒント：レイアウトのリフローを防ぐために、常にwidthとheightの値を指定する必要があります。

import { component$ } from '@builder.io/qwik';
import Image from '~/media/emote.png?jsx';
 
export default component$(() => {
  return (
    <>
      <h1>Image Example</h1>
      <div class="image-wrapper" >
        <Image />
      </div>
    </>
  );
});

.image-wrapper {
  width: 300px; /* Set the desired width of the wrapper */
  position: relative; /* Required for absolute positioning */
}
 
.image-wrapper img {
  width: 100%; /* Make the image fill the width of its container */
  height: auto; /* Let the browser calculate the height to maintain aspect ratio */
  display: block; /* Remove any extra white space below the image */
}

@unpic/qwik

• 使用方法の詳細な手順を記載したサイト：@unpic/qwik
• インストール：npm install @unpic/qwik

Unpicは、既存の画像最適化CDNと連携するサードパーティの画像最適化ライブラリです。画像の最適化に使用できるImageコンポーネントを提供します。

import { component$ } from '@builder.io/qwik';
import { Image } from '@unpic/qwik';
 
export default component$(() => {
  return (
    <Image
      src="https://cdn.shopify.com/static/sample-images/bath_grande_crop_center.jpeg"
      layout="constrained"
      width={800}
      height={600}
      alt="A lovely bath"
    />
  );
});

注記：qwik-imageとunpicはCDNではなく、画像をホストしません。既存の画像最適化CDNと連携して動作します。いくつかの一般的なCDNを使用することをお勧めします。

• Cloudinary
• Cloudflare
• Bunny.net
• Vercel / Next.js
• Unsplash、DatoCMS、Sanity、Prismicを含むImgix
• Shopify
• Kontent.ai
• Builder.io
• Contentful
• Storyblok
• WordPress.comとJetpack Site Accelerator

qwik-image

自動最適化による高性能な画像。

npm install qwik-image
or
yarn install qwik-image
or
pnpm install qwik-image

これはプラグ可能なコンポーネントであるため、開発者は異なる画像ローダー（builder.ioやその他のCDNなど）を接続できます。

import { $, component$ } from '@builder.io/qwik';
import {
  Image,
  type ImageTransformerProps,
  useImageProvider,
} from 'qwik-image';
 
export default component$(() => {
  const imageTransformer$ = $(
    ({ src, width, height }: ImageTransformerProps): string => {
      // Here you can set your favorite image loaders service
      return `https://cdn.builder.io/api/v1/${src}?height=${height}&width=${width}&format=webp&fit=fill`;
    }
  );
 
  // Global Provider (required)
  useImageProvider({
    // You can set this prop to overwrite default values [3840, 1920, 1280, 960, 640]
    resolutions: [640],
    imageTransformer$,
  });
 
  return (
    <Image
      layout="constrained"
      objectFit="fill"
      width={400}
      height={500}
      alt="Tropical paradise"
      placeholder="#e6e6e6"
      src={
        'image/assets%2FYJIGb4i01jvw0SRdL5Bt%2Fe5113e1c02db40e5bac75146fa46386f'
      }
    />
  );
});

使用方法とカスタマイズに関する詳細な手順を記載したGitHubリポジトリはこちらです：qwikifiers/qwik-image