From c330fa542bf46a11d684309da03a70695b2cadbd Mon Sep 17 00:00:00 2001 From: yusasa16 Date: Tue, 19 Dec 2023 01:18:27 +0900 Subject: [PATCH 01/11] i18n(ja): Update /guides/images.mdx --- src/content/docs/ja/guides/images.mdx | 170 ++++++++++++++++++++++++-- 1 file changed, 163 insertions(+), 7 deletions(-) diff --git a/src/content/docs/ja/guides/images.mdx b/src/content/docs/ja/guides/images.mdx index c14c9366bb85e..d04e5e6e53cda 100644 --- a/src/content/docs/ja/guides/images.mdx +++ b/src/content/docs/ja/guides/images.mdx @@ -5,6 +5,8 @@ i18nReady: true --- import Since from '~/components/Since.astro'; import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; +import Badge from '~/components/Badge.astro'; +import RecipeLinks from "~/components/RecipeLinks.astro"; Astroでは、プロジェクト内にローカルに保存された画像、外部URLにリンクされた画像、CMSやCDNで管理されている画像などについて、これらをサイト上で使用するためのいくつかの方法を提供しています。 @@ -83,10 +85,6 @@ import myImage from "../assets/my_image.png"; // 画像は1600x900 /> ``` -現在、組み込みのassets機能には``コンポーネントは含まれていません。 - -代わりに、[アートディレクションやレスポンシブ画像を作成する](https://developer.mozilla.org/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#アートディレクション)ために、HTMLの画像属性`srcset`と`sizes`または``タグを使用して、[`getImage()`により画像やカスタムコンポーネントを生成](#getimageで画像を生成する)できます。 - #### プロパティ ##### src (必須) @@ -145,6 +143,87 @@ import myImage from "../assets/my_image.png"; // 画像は1600x900 ただし、リモート画像と`public/`フォルダに保存されている画像については、Astroはこれらのファイルを解析できないため、両プロパティは必須となります。 +##### densities + +

Experimental

+ +A list of pixel densities to generate for the image. + +If provided, this value will be used to generate a `srcset` attribute on the `` tag. Do not provide a value for `widths` when using this value. + +Densities that are equal to widths larger than the original image will be ignored to avoid upscaling the image. + +```astro title="src/components/MyComponent.astro" +--- +import { Image } from 'astro:assets'; +import myImage from "../assets/my_image.png"; +--- +A description of my image. +``` + +```html +A description of my image. +``` + +##### widths + +

Experimental

+ +A list of widths to generate for the image. + +If provided, this value will be used to generate a `srcset` attribute on the `` tag. A [`sizes` property](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes) must also be provided. + +Do not provide a value for `densities` when using this value. Only one of these two values can be used to generate a `srcset`. + +Widths that are larger than the original image will be ignored to avoid upscaling the image. + +```astro +--- +import { Image } from 'astro:assets'; +import myImage from "../assets/my_image.png"; // Image is 1600x900 +--- +A description of my image. +``` + +```html +A description of my image. +``` + ##### format オプションで、使用する[画像ファイルタイプ](https://developer.mozilla.org/ja/docs/Web/Media/Formats/Image_types#一般的な画像ファイルの種類)の出力を指定できます。 @@ -209,6 +288,78 @@ const {src, ...attrs} = Astro.props; ``` +### `` + + Experimental + +Use the built-in `` Astro component to display a responsive image with multiple formats and/or sizes. + +```astro title="src/pages/index.astro" +--- +import { Picture } from 'astro:assets'; +import myImage from "../assets/my_image.png"; // Image is 1600x900 +--- + + +``` + +```html + + + + + A description of my image. + +``` + +#### Properties + +`` accepts all the properties of the `` component, plus the following: + +##### `formats` + +An array of image formats to use for the `` tags. Entries will be added as `` elements in the order they are listed, and this order determines which format is displayed. For the best performance, list the most modern format first (e.g. `webp` or `avif`). By default, this is set to `['webp']`. + +##### `fallbackFormat` + +Format to use as a fallback value for the `` tag. + +Defaults to `.png` for static images, `.gif` for animated images, and `.svg` for SVG files. + +##### `pictureAttributes` + +An object of attributes to be added to the `` tag. + +Use this property to apply attributes to the outer `` element itself. Attributes applied to the `` component directly will apply to the inner `` element, except for those used for image transformation. + +```astro +--- +import { Picture } from "astro:assets"; +import myImage from "../my_image.png"; // Image is 1600x900 +--- + +``` + +```html + + + A description of my image. + +``` ### `` [Astroテンプレートの構文](/ja/core-concepts/astro-syntax/)では、最終的な出力を完全に制御可能な``タグを直接書くこともできます。これらの画像は処理されず、最適化もされません。 @@ -259,7 +410,7 @@ interface ImageMetadata { ### ``と``の選択 -``コンポーネントは、画像を最適化し、また（ローカル画像の場合は）オリジナルのアスペクト比に基づいて幅と高さを推測することでCLSを回避します。ただし、特定のフォーマットのみに対応しており、``要素はなく、`srcset`もサポートしていません。 +``コンポーネントは、画像を最適化し、また（ローカル画像の場合は）オリジナルのアスペクト比に基づいて幅と高さを推測することでCLSを回避します。 以下のような``コンポーネントを使用できない場合に、HTMLの``要素を使用してください。 - サポートされていない画像フォーマット @@ -485,8 +636,13 @@ const optimizedBackground = await getImage({src: myBackground, format: 'avif'}) ```js { - options: {...} // 渡されたオリジナルのパラメータ - src: "https//..." // 生成された画像へのパス + rawOptions: {...}, // Original parameters passed + options: {...}, // 渡されたオリジナルのパラメータ + src: "https//...", // 生成された画像へのパス + srcSet: { + values: [...], // Generated values for srcset, every entry has a url and a size descriptor + attribute: "", // Generated srcset attribute from the values + } attributes: {...} // 画像をレンダリングするために必要な追加のHTML属性（width、height、styleなど） } ``` From d068cb480c9747bc14c061fbd43fe761c3d3d99e Mon Sep 17 00:00:00 2001 From: yusasa16 Date: Wed, 20 Dec 2023 01:22:39 +0900 Subject: [PATCH 02/11] i18n(ja): Update /guides/images.mdx translate --- src/content/docs/ja/guides/images.mdx | 69 ++++++++++++--------------- 1 file changed, 31 insertions(+), 38 deletions(-) diff --git a/src/content/docs/ja/guides/images.mdx b/src/content/docs/ja/guides/images.mdx index d04e5e6e53cda..bedf2b9218624 100644 --- a/src/content/docs/ja/guides/images.mdx +++ b/src/content/docs/ja/guides/images.mdx @@ -6,7 +6,6 @@ i18nReady: true import Since from '~/components/Since.astro'; import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; import Badge from '~/components/Badge.astro'; -import RecipeLinks from "~/components/RecipeLinks.astro"; Astroでは、プロジェクト内にローカルに保存された画像、外部URLにリンクされた画像、CMSやCDNで管理されている画像などについて、これらをサイト上で使用するためのいくつかの方法を提供しています。 @@ -145,20 +144,20 @@ import myImage from "../assets/my_image.png"; // 画像は1600x900 ##### densities -

Experimental

+

実験的

-A list of pixel densities to generate for the image. +生成する画像のピクセル密度の配列です。 -If provided, this value will be used to generate a `srcset` attribute on the `` tag. Do not provide a value for `widths` when using this value. +この値を指定すると、``タグの`srcset`属性を生成するために使用されます。この値を使用する場合は`widths`を使用しないでください。 -Densities that are equal to widths larger than the original image will be ignored to avoid upscaling the image. +元の画像以上の濃度になる値が指定されると、画像のアップスケーリングを避けるために無視されます。 ```astro title="src/components/MyComponent.astro" --- import { Image } from 'astro:assets'; import myImage from "../assets/my_image.png"; --- -A description of my image. +説明文 ``` ```html @@ -168,7 +167,7 @@ import myImage from "../assets/my_image.png"; /_astro/my_image.hash.webp 1.5x /_astro/my_image.hash.webp 2x " - alt="A description of my image." + alt="説明文" width="800" height="450" loading="lazy" @@ -178,15 +177,15 @@ import myImage from "../assets/my_image.png"; ##### widths -

Experimental

+

実験的

-A list of widths to generate for the image. +生成する画像のピクセル密度の配列です。 -If provided, this value will be used to generate a `srcset` attribute on the `` tag. A [`sizes` property](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes) must also be provided. +この値を指定すると、``タグの`srcset`属性を生成するために使用されます。また、[`sizes` プロパティ](https://developer.mozilla.org/ja/docs/Web/API/HTMLImageElement/sizes)も指定する必要があります。 -Do not provide a value for `densities` when using this value. Only one of these two values can be used to generate a `srcset`. +この値を使用する場合は`densities`を使用しないでください。`srcset`属性を生成するために使用できるのは、どちらかひとつの値になります。 -Widths that are larger than the original image will be ignored to avoid upscaling the image. +幅が元の画像以上の値が指定されると、画像のアップスケーリングを避けるために無視されます。 ```astro --- @@ -197,7 +196,7 @@ import myImage from "../assets/my_image.png"; // Image is 1600x900 src={myImage} widths={[240, 540, 720, myImage.width]} sizes={`(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, ${myImage.width}px`} - alt="A description of my image." + alt="説明文" /> ``` @@ -216,7 +215,7 @@ import myImage from "../assets/my_image.png"; // Image is 1600x900 (max-width: 1600px) 720px, 1600px " - alt="A description of my image." + alt="説明文" width="1600" height="900" loading="lazy" @@ -290,9 +289,9 @@ const {src, ...attrs} = Astro.props; ### `` - Experimental + 実験的 -Use the built-in `` Astro component to display a responsive image with multiple formats and/or sizes. +Astro組み込みの``コンポーネントを使用することで、複数のフォーマットやサイズでのレスポンシブな画像を表示できます。 ```astro title="src/pages/index.astro" --- @@ -300,7 +299,7 @@ import { Picture } from 'astro:assets'; import myImage from "../assets/my_image.png"; // Image is 1600x900 --- - + ``` ```html @@ -314,37 +313,37 @@ import myImage from "../assets/my_image.png"; // Image is 1600x900 height="900" decoding="async" loading="lazy" - alt="A description of my image." + alt="説明文" /> ``` -#### Properties +#### プロパティ -`` accepts all the properties of the `` component, plus the following: +``コンポーネントでは ``コンポーネントの全てのプロパティと, 以下のプロパティが使用できます。 ##### `formats` -An array of image formats to use for the `` tags. Entries will be added as `` elements in the order they are listed, and this order determines which format is displayed. For the best performance, list the most modern format first (e.g. `webp` or `avif`). By default, this is set to `['webp']`. +``タグに使用するフォーマットの配列です。 この配列の順番で``要素として追加され、表示するフォーマットが決定されます。最適なパフォーマンスのためには、最新のフォーマット(例：`webp`や`avif`)を最初に追加してみてください。デフォルトでは`['webp']`が設定されています。 ##### `fallbackFormat` -Format to use as a fallback value for the `` tag. +``タグのフォールバック値として使用するフォーマットです。 -Defaults to `.png` for static images, `.gif` for animated images, and `.svg` for SVG files. +それぞれデフォルトとして、静止画像の場合は`.png`、アニメーション画像の場合は`.gif`、そしてSVGファイルの場合は`.svg`が設定されています。 ##### `pictureAttributes` -An object of attributes to be added to the `` tag. +``タグに追加する属性のオブジェクト。 -Use this property to apply attributes to the outer `` element itself. Attributes applied to the `` component directly will apply to the inner `` element, except for those used for image transformation. +このプロパティは、外側の``要素自体に属性を適用するために使用します。直接``コンポーネントに適用される属性は、画像変換に使用されるものを除き、内側の``要素に適用されます。 ```astro --- import { Picture } from "astro:assets"; import myImage from "../my_image.png"; // Image is 1600x900 --- - + ``` ```html @@ -352,7 +351,7 @@ import myImage from "../my_image.png"; // Image is 1600x900 A description of my image. ``` -4. 既存の``コンポーネントを削除します。 - - 現在、組み込みのアセット機能には``コンポーネントは含まれていません。 - - 代わりに、HTMLの画像属性`srcset`と`sizes`、または``タグを使用して、[アートディレクションやレスポンシブ画像を作成](https://developer.mozilla.org/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#アートディレクション)できます。 - -5. デフォルトの画像サービスを選択します。 +4. デフォルトの画像サービスを選択します。 [Sharp](https://github.com/lovell/sharp)は、`astro:assets`で使用されるデフォルトの画像サービスとなりました。Sharpを使用する場合は、特に設定は必要ありません。 From 53d1e22fb6c7b8dd48a5adb3040c2b22dfe726aa Mon Sep 17 00:00:00 2001 From: yusasa16 Date: Sun, 24 Dec 2023 01:31:19 +0900 Subject: [PATCH 03/11] i18n(ja): Update /guides/images.mdx --- src/content/docs/ja/guides/images.mdx | 52 +++++++++++++++++++-------- 1 file changed, 38 insertions(+), 14 deletions(-) diff --git a/src/content/docs/ja/guides/images.mdx b/src/content/docs/ja/guides/images.mdx index bedf2b9218624..c47c0ab60c3cc 100644 --- a/src/content/docs/ja/guides/images.mdx +++ b/src/content/docs/ja/guides/images.mdx @@ -6,6 +6,7 @@ i18nReady: true import Since from '~/components/Since.astro'; import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; import Badge from '~/components/Badge.astro'; +import RecipeLinks from "~/components/RecipeLinks.astro"; Astroでは、プロジェクト内にローカルに保存された画像、外部URLにリンクされた画像、CMSやCDNで管理されている画像などについて、これらをサイト上で使用するためのいくつかの方法を提供しています。 @@ -30,7 +31,7 @@ Astroは、APIを使用してリモートからデータを取得したり、画 ## `.astro`ファイル内の画像 -`.astro`ファイルでローカル画像を使用するには、ファイルにインポートする必要があります。リモートと`public/`の画像はインポートする必要はありません。 +`.astro`ファイルでローカル画像を使用するには、**ファイルにインポートする必要があります**。リモートと`public/`の画像はインポートする必要はありません。 `astro:assets`からAstro組み込みの``コンポーネントをインポートして使用すると、画像を最適化できます。また、Astro構文ではHTMLの``タグを直接書くこともできますが、画像処理はスキップされます。 @@ -48,6 +49,10 @@ import localBirdImage from '../../images/subfolder/localBirdImage.png'; 鳥。 ``` +`src/`フォルダーから動的に画像を読み込むには,次のレシピを参考にしてください: + + + ### `` (`astro:assets`) Astro組み込みの``コンポーネントを使用して、ローカル画像と[設定済みのリモート画像](#リモート画像の許可)の最適化版を表示できます。 @@ -190,7 +195,7 @@ import myImage from "../assets/my_image.png"; ```astro --- import { Image } from 'astro:assets'; -import myImage from "../assets/my_image.png"; // Image is 1600x900 +import myImage from "../assets/my_image.png"; // 画像は1600x900 --- ` - 実験的 + Astro組み込みの``コンポーネントを使用することで、複数のフォーマットやサイズでのレスポンシブな画像を表示できます。 ```astro title="src/pages/index.astro" --- import { Picture } from 'astro:assets'; -import myImage from "../assets/my_image.png"; // Image is 1600x900 +import myImage from "../assets/my_image.png"; // 画像は1600x900 --- @@ -308,7 +313,7 @@ import myImage from "../assets/my_image.png"; // Image is 1600x900 `要素自体に属性を適用するために使用します。直接``コンポーネントに適用される属性は、画像変換に使用されるものを除き、内側の``要素に適用されます。 -```astro +```astro title="src/components/MyComponent.astro" --- import { Picture } from "astro:assets"; -import myImage from "../my_image.png"; // Image is 1600x900 +import myImage from "../my_image.png"; // 画像は1600x900 --- ``` @@ -371,7 +376,7 @@ import myImage from "../my_image.png"; // Image is 1600x900 たとえば、CLSを回避しCore Web Vitalsを改善するために、画像の`height`と`width`プロパティを使用します。 -```astro "myDog.width" "myDog.height" +```astro title="src/pages/posts/post-1.astro" "myDog.width" "myDog.height" --- // ローカル画像のインポート import myDog from `../../images/pets/local-dog.jpg` @@ -618,6 +623,8 @@ import stars from "~/stars/docline.png"; `getImage()`関数は、たとえば[APIルート](/ja/core-concepts/endpoints/#サーバーエンドポイントapiルーティング)など、HTML以外の場所で使用する画像を生成することを目的としています。また、これを使って独自のカスタム``コンポーネントも作成できます。 + + `getImage()`は、（`alt`を除く）[Imageコンポーネントと同じプロパティ](#プロパティ)をもつオプションオブジェクトを受け取ります。 ```astro @@ -625,7 +632,7 @@ import stars from "~/stars/docline.png"; import { getImage } from "astro:assets"; import myBackground from "../background.png" -const optimizedBackground = await getImage({src: myBackground, format: 'avif'}) +const optimizedBackground = await getImage({src: myBackground, format: 'webp'}) ---
@@ -658,6 +665,16 @@ const optimizedBackground = await getImage({src: myBackground, format: 'avif'}) [Sharp](https://github.com/lovell/sharp)は、`astro:assets`で使用されるデフォルトの画像サービスです。 +:::note +`pnpm`のような[厳格なパッケージマネージャー](https://pnpm.io/pnpm-vs-npm#npms-flat-tree)を使用している場合は、Astroの依存関係であるにもかかわらず、プロジェクトにSharpを手動でインストールする必要があるかもしれません。 + +```bash +pnpm install sharp +``` +::: + +### Squooshの設定 + 画像を変換するために[Squoosh](https://github.com/GoogleChromeLabs/squoosh)を使用したい場合は、以下のように設定を更新してください。 ```js title="astro.config.mjs" ins={4-6} @@ -670,13 +687,20 @@ export default defineConfig({ }); ``` -:::note -`pnpm`のような[厳格なパッケージマネージャー](https://pnpm.io/pnpm-vs-npm#npms-flat-tree)を使用している場合は、Astroの依存関係であるにもかかわらず、プロジェクトにSharpを手動でインストールする必要があるかもしれません。 +### no-opパススルーサービスの設定 -```bash -pnpm install sharp +もし使用している[`server`または`hybrid`モードのアダプター](https://astro.build/integrations/?search=&categories%5B%5D=adapters)が、Astroの組み込みのSquooshおよびSharp画像最適化（Deno、Cloudflareなど）をサポートしていない場合、``や``コンポーネントが使用できるようにno-op画像サービスを設定することができます。Astroはこれらの環境では画像の変換や処理をおこないませんが、Cumulative Layout Shift（CLS）がなくなること、`alt`属性が必須であること、一貫したコードの書き心地など、`astro:assets`を使用した場合の他の利点は享受することができます。 + +SquooshとSharpの画像処理を回避する`passthroughImageService()`の設定: + +```js title="astro.config.mjs" ins={4-6} "passthroughImageService" +import { defineConfig, passthroughImageService } from 'astro/config'; +export default defineConfig({ + image: { + service: passthroughImageService() + } +}); ``` -::: ## コミュニティインテグレーション From 785ca808d926ec3b5832b2a79d62a45fe0931a31 Mon Sep 17 00:00:00 2001 From: Yusaku <64148343+yusasa16@users.noreply.github.com> Date: Sun, 24 Dec 2023 17:00:07 +0900 Subject: [PATCH 04/11] Update src/content/docs/ja/guides/images.mdx Co-authored-by: Shinya Fujino --- src/content/docs/ja/guides/images.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/ja/guides/images.mdx b/src/content/docs/ja/guides/images.mdx index c47c0ab60c3cc..122a7e1d3321b 100644 --- a/src/content/docs/ja/guides/images.mdx +++ b/src/content/docs/ja/guides/images.mdx @@ -689,7 +689,7 @@ export default defineConfig({ ### no-opパススルーサービスの設定 -もし使用している[`server`または`hybrid`モードのアダプター](https://astro.build/integrations/?search=&categories%5B%5D=adapters)が、Astroの組み込みのSquooshおよびSharp画像最適化（Deno、Cloudflareなど）をサポートしていない場合、``や``コンポーネントが使用できるようにno-op画像サービスを設定することができます。Astroはこれらの環境では画像の変換や処理をおこないませんが、Cumulative Layout Shift（CLS）がなくなること、`alt`属性が必須であること、一貫したコードの書き心地など、`astro:assets`を使用した場合の他の利点は享受することができます。 +もし使用している[`server`または`hybrid`モードのアダプター](https://astro.build/integrations/?search=&categories%5B%5D=adapters)が、Astroの組み込みのSquooshおよびSharp画像最適化（Deno、Cloudflareなど）をサポートしていない場合、``や``コンポーネントを使用できるようにno-op画像サービスを設定することができます。Astroはこれらの環境では画像の変換や処理をおこないませんが、Cumulative Layout Shift（CLS）がなくなること、`alt`属性が必須であること、一貫したコードの書き心地など、`astro:assets`を使用した場合の他の利点は享受することができます。 SquooshとSharpの画像処理を回避する`passthroughImageService()`の設定: From b3e1113a72dd5c79d83e996b4ba11b82d6c2b334 Mon Sep 17 00:00:00 2001 From: Yusaku <64148343+yusasa16@users.noreply.github.com> Date: Sun, 24 Dec 2023 17:00:33 +0900 Subject: [PATCH 05/11] Update src/content/docs/ja/guides/images.mdx Co-authored-by: Shinya Fujino --- src/content/docs/ja/guides/images.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/ja/guides/images.mdx b/src/content/docs/ja/guides/images.mdx index 122a7e1d3321b..51dce73119e17 100644 --- a/src/content/docs/ja/guides/images.mdx +++ b/src/content/docs/ja/guides/images.mdx @@ -49,7 +49,7 @@ import localBirdImage from '../../images/subfolder/localBirdImage.png'; 鳥。 ``` -`src/`フォルダーから動的に画像を読み込むには,次のレシピを参考にしてください: +`src/`フォルダーから動的に画像を読み込むには、次のレシピを参考にしてください: From 35f65cc80962c026f393c1c20cbc8d5064568f8e Mon Sep 17 00:00:00 2001 From: Yusaku <64148343+yusasa16@users.noreply.github.com> Date: Sun, 24 Dec 2023 17:00:43 +0900 Subject: [PATCH 06/11] Update src/content/docs/ja/guides/images.mdx Co-authored-by: Shinya Fujino --- src/content/docs/ja/guides/images.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/ja/guides/images.mdx b/src/content/docs/ja/guides/images.mdx index 51dce73119e17..032ed01560ea5 100644 --- a/src/content/docs/ja/guides/images.mdx +++ b/src/content/docs/ja/guides/images.mdx @@ -294,7 +294,7 @@ const {src, ...attrs} = Astro.props; ### `` - +

Astro組み込みの``コンポーネントを使用することで、複数のフォーマットやサイズでのレスポンシブな画像を表示できます。 From 1a09120c71555da9788e317195baf25d733d35e0 Mon Sep 17 00:00:00 2001 From: Yusaku <64148343+yusasa16@users.noreply.github.com> Date: Sun, 24 Dec 2023 17:01:11 +0900 Subject: [PATCH 07/11] Update src/content/docs/ja/guides/images.mdx Co-authored-by: Shinya Fujino --- src/content/docs/ja/guides/images.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/ja/guides/images.mdx b/src/content/docs/ja/guides/images.mdx index 032ed01560ea5..454a83723e654 100644 --- a/src/content/docs/ja/guides/images.mdx +++ b/src/content/docs/ja/guides/images.mdx @@ -184,7 +184,7 @@ import myImage from "../assets/my_image.png";

実験的

-生成する画像のピクセル密度の配列です。 +生成する画像の幅の配列です。 この値を指定すると、``タグの`srcset`属性を生成するために使用されます。また、[`sizes` プロパティ](https://developer.mozilla.org/ja/docs/Web/API/HTMLImageElement/sizes)も指定する必要があります。 From 2ca1f05251ce7159ade6392b966a9cc3eee71002 Mon Sep 17 00:00:00 2001 From: Yusaku <64148343+yusasa16@users.noreply.github.com> Date: Sun, 24 Dec 2023 17:01:50 +0900 Subject: [PATCH 08/11] Update src/content/docs/ja/guides/images.mdx Co-authored-by: Shinya Fujino --- src/content/docs/ja/guides/images.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/ja/guides/images.mdx b/src/content/docs/ja/guides/images.mdx index 454a83723e654..fdc5e80f39997 100644 --- a/src/content/docs/ja/guides/images.mdx +++ b/src/content/docs/ja/guides/images.mdx @@ -186,7 +186,7 @@ import myImage from "../assets/my_image.png"; 生成する画像の幅の配列です。 -この値を指定すると、``タグの`srcset`属性を生成するために使用されます。また、[`sizes` プロパティ](https://developer.mozilla.org/ja/docs/Web/API/HTMLImageElement/sizes)も指定する必要があります。 +この値を指定すると、``タグの`srcset`属性を生成するために使用されます。また、[`sizes`プロパティ](https://developer.mozilla.org/ja/docs/Web/API/HTMLImageElement/sizes)も指定する必要があります。 この値を使用する場合は`densities`を使用しないでください。`srcset`属性を生成するために使用できるのは、どちらかひとつの値になります。 From cb508e606c0ad1aa99741c4bcbacda3120331019 Mon Sep 17 00:00:00 2001 From: Yusaku <64148343+yusasa16@users.noreply.github.com> Date: Sun, 24 Dec 2023 17:02:23 +0900 Subject: [PATCH 09/11] Update src/content/docs/ja/guides/images.mdx Co-authored-by: Shinya Fujino --- src/content/docs/ja/guides/images.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/ja/guides/images.mdx b/src/content/docs/ja/guides/images.mdx index fdc5e80f39997..71dc1e2827de4 100644 --- a/src/content/docs/ja/guides/images.mdx +++ b/src/content/docs/ja/guides/images.mdx @@ -190,7 +190,7 @@ import myImage from "../assets/my_image.png"; この値を使用する場合は`densities`を使用しないでください。`srcset`属性を生成するために使用できるのは、どちらかひとつの値になります。 -幅が元の画像以上の値が指定されると、画像のアップスケーリングを避けるために無視されます。 +元の画像以上の幅が指定されると、画像のアップスケーリングを避けるために無視されます。 ```astro --- From 8e2648fe9ac2d5fa8e48473101605732fd8d436e Mon Sep 17 00:00:00 2001 From: Yusaku <64148343+yusasa16@users.noreply.github.com> Date: Sun, 24 Dec 2023 17:02:33 +0900 Subject: [PATCH 10/11] Update src/content/docs/ja/guides/images.mdx Co-authored-by: Shinya Fujino --- src/content/docs/ja/guides/images.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/ja/guides/images.mdx b/src/content/docs/ja/guides/images.mdx index 71dc1e2827de4..436db3b8d4eb9 100644 --- a/src/content/docs/ja/guides/images.mdx +++ b/src/content/docs/ja/guides/images.mdx @@ -325,7 +325,7 @@ import myImage from "../assets/my_image.png"; // 画像は1600x900 #### プロパティ -``コンポーネントでは ``コンポーネントの全てのプロパティと, 以下のプロパティが使用できます。 +``コンポーネントでは``コンポーネントの全てのプロパティと、以下のプロパティが使用できます。 ##### `formats` From efc47ff52575020e8f8bccc85a38a727b89075f8 Mon Sep 17 00:00:00 2001 From: Yusaku <64148343+yusasa16@users.noreply.github.com> Date: Sun, 24 Dec 2023 17:02:43 +0900 Subject: [PATCH 11/11] Update src/content/docs/ja/guides/images.mdx Co-authored-by: Shinya Fujino --- src/content/docs/ja/guides/images.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/ja/guides/images.mdx b/src/content/docs/ja/guides/images.mdx index 436db3b8d4eb9..7e80c16926984 100644 --- a/src/content/docs/ja/guides/images.mdx +++ b/src/content/docs/ja/guides/images.mdx @@ -329,7 +329,7 @@ import myImage from "../assets/my_image.png"; // 画像は1600x900 ##### `formats` -``タグに使用するフォーマットの配列です。 この配列の順番で``要素として追加され、表示するフォーマットが決定されます。最適なパフォーマンスのためには、最新のフォーマット(例：`webp`や`avif`)を最初に追加してみてください。デフォルトでは`['webp']`が設定されています。 +``タグに使用するフォーマットの配列です。この配列の順番で``要素として追加され、表示するフォーマットが決定されます。最適なパフォーマンスのためには、最新のフォーマット(例：`webp`や`avif`)を最初に追加してみてください。デフォルトでは`['webp']`が設定されています。 ##### `fallbackFormat`