ホームページ >バックエンド開発 >PHPチュートリアル >パフォーマンス認識の向上：オンデマンド画像のサイズ変更

パフォーマンス認識の向上：オンデマンド画像のサイズ変更

William Shakespeareオリジナル: 2025-02-08 09:17:09607ブラウズ

この記事は、パフォーマンスベンチマークと最適化のためのサンプルアプリケーションの構築に関するシリーズの一部です。マルチイメージギャラリーブログ - です。（こちらのレポをご覧ください。）

パフォーマンスベンチマークと最適化のために、マルチイメージギャラリーブログ - サンプルアプリケーションを構築しています。この時点で、当社のアプリケーションは、提供されている解像度と画面サイズに関係なく同じ画像を提供します。この画像のサイズ変更チュートリアルでは、ディスプレイサイズに応じて変更されたバージョンを提供するように変更します。

キーテイクアウト

srcsetを使用して、視聴者の画面に基づいてサイズを調整するレスポンシブ画像を有効にし、品質を犠牲にすることなく読み込み時間とパフォーマンスを改善します。

> JavaScriptを使用して画像モーダルにSRCSET属性を動的に適用することにより、ユーザーエクスペリエンスを強化し、さまざまな表示コンテキストで最適な画像サイズが使用されるようにします。
アプリケーションのアーキテクチャにサイズを変更する画像の統合を検討して、帯域幅の使用を削減し、全体的なWebサイトの応答性を向上させます。
目的
これが役立つ可能性のある場所では、すべての画像を応答する必要があります。 1つの場所は、ホームページとギャラリーページのサムネイルです。別の場所は、ギャラリーで個々の画像がクリックされたときのフルサイズの画像です。

をその場でサイズ変更された画像を生成することです。これにより、非人気の画像がハードドライブを汚染することを妨げ、人気のある画像が、その後のリクエストで最適なサイズで提供されることを確認します。

レスポンシブ画像？

この投稿が説明しているように、現代のWebの画像は非常に複雑です。パフォーマンス認識の向上：オンデマンド画像のサイズ変更

の代わりに、昔から、このような狂ったようなものがあります：

私たちの画像は写真であり、常に彼らの親コンテナの最大値を埋めるデフォルトのDOM指定の位置にそれらを望んでいるので、私たちは写真を必要としません（これにより、別の解像度または別の解像度の代替ソースを定義できます。ブラウザのサポート - SVGをレンダリングしようとするなど、SVGがサポートされていない場合はPNGまたはサイズ（画像が占めるべきビューポート部分を定義できます）。 SRCSETを使用するだけで逃げることができます。SRCSETは、画面のサイズに応じて同じ画像の異なるサイズバージョンをロードします。
srcset
の追加
画像が遭遇する最初の場所は、ホームギャラリーのギャラリーリストをレンダリングする部分的なテンプレートであるHome Galleries-Lazy-load.html.twigにあります。

ここでは、画像のリンクがTwigフィルターから取得されていることがわかります。これは、SRC/Twig/ImagerEnderErxension.phpファイルにあります。画像のIDとルートの名前（ImageControllerのServemageactionルートの注釈で定義されています）を取得し、その式に基づいてURLを生成します。 🎜>
```
<picture>
<source media="(max-width: 700px)" sizes="(max-width: 500px) 50vw, 10vw"
srcset="stick-figure-narrow.png 138w, stick-figure-hd-narrow.png 138w">

<source media="(max-width: 1400px)" sizes="(max-width: 1000px) 100vw, 50vw"
srcset="stick-figure.png 416w, stick-figure-hd.png 416w">

<img src="stick-original.png" alt="Human">
</picture>

```
それを次のように変更しましょう：
```
<a class="gallery__link" href="{{ url('gallery.single-gallery', {id: gallery.id}) }}">
 <img src="{{ gallery.images.first|getImageUrl }}" alt="{{ gallery.name }}"
 class="gallery__leading-image card-img-top">
</a>

```
さて、すべての画像URLには、接尾辞としてXがあり、xはサイズです。これは、SRCSETの形でIMGタグにも適用される変更です。変更してみましょう：
```
public function getImageUrl(Image $image)
{
 return $this->router->generate('image.serve', [
 'id' => $image->getId(),
 ], RouterInterface::ABSOLUTE_URL);
}

```
ホームページを更新すると、srcsetの新しいサイズがリストされていることに気付きます。
```
public function getImageUrl(Image $image, $size = null)
{
 return $this->router->generate('image.serve', [
 'id' => $image->getId() . (($size) ? '--' . $size : ''),
 ], RouterInterface::ABSOLUTE_URL);
}

```
これは私たちをあまり助けません。私たちのビューポートが広い場合、これはサムネイルであるにもかかわらず、フルサイズの画像を要求します。したがって、srcsetの代わりに、ここで固定された小さなサムネイルサイズを使用することをお勧めします。
サムネイルオンデマンドがありますが、すでに生成されたときにキャッシュされてフェッチします。
今すぐ他のsrcsetの場所を狩りましょう。

Templates/Gallery/Single Gallery.html.twigでは、以前と同じ修正を適用します。サムネイルを扱っているので、getimageurlフィルターにサイズパラメーターを追加して、ファイルを縮小しましょう。
```
<a class="gallery__link" href="{{ url('gallery.single-gallery', {id: gallery.id}) }}">
 <img src="{{ gallery.images.first|getImageUrl }}"
 alt="{{ gallery.name }}"
 srcset="
 {{ gallery.images.first|getImageUrl('1120') }} 1120w,
 {{ gallery.images.first|getImageUrl('720') }} 720w,
 {{ gallery.images.first|getImageUrl('400') }} 400w"
 class="gallery__leading-image card-img-top">
</a>

```
そして今、SRCSETの実装のために、最後に！

個々の画像ビューは、同じシングルギャラリービューの下部にあるJavaScriptモーダルウィンドウでレンダリングされます。
```
<picture>
<source media="(max-width: 700px)" sizes="(max-width: 500px) 50vw, 10vw"
srcset="stick-figure-narrow.png 138w, stick-figure-hd-narrow.png 138w">

<source media="(max-width: 1400px)" sizes="(max-width: 1000px) 100vw, 50vw"
srcset="stick-figure.png 416w, stick-figure-hd.png 416w">

<img src="stick-original.png" alt="Human">
</picture>

```
IMG要素をモーダルの本体に追加する追加の呼び出しがあります。そのため、SRCSET属性が行かなければなりません。しかし、画像URLは動的に生成されるため、スクリプト内からTwigフィルターを実際に呼び出すことはできません。 1つの選択肢は、SRCSETをサムネイルに追加し、サム要素からコピーしてJSで使用することですが、これにより、サムネイルの背景にフルサイズの画像がロードされるだけではありません（ビューポートが広いため）、しかし、それは各サムネイルのフィルターを4回呼び出し、物事を遅くします。代わりに、各画像の完全なSRCSET属性を生成するSRC/Twig/ImageRendererExtension.phpに新しいTwigフィルターを作成しましょう。
```
<a class="gallery__link" href="{{ url('gallery.single-gallery', {id: gallery.id}) }}">
 <img src="{{ gallery.images.first|getImageUrl }}" alt="{{ gallery.name }}"
 class="gallery__leading-image card-img-top">
</a>

```
このフィルターを登録することを忘れてはなりません：
```
public function getImageUrl(Image $image)
{
 return $this->router->generate('image.serve', [
 'id' => $image->getId(),
 ], RouterInterface::ABSOLUTE_URL);
}

```
これらの値をカスタム属性に追加する必要があります。これは、個々のサムネイルのデータSRCSETを呼び出します。
```
public function getImageUrl(Image $image, $size = null)
{
 return $this->router->generate('image.serve', [
 'id' => $image->getId() . (($size) ? '--' . $size : ''),
 ], RouterInterface::ABSOLUTE_URL);
}

```
最後のステップは、JSを更新してこれを活用することです。
グライドを追加

Glideは、私たちが望むことを行うライブラリです。インストールしてみましょう。
```
<a class="gallery__link" href="{{ url('gallery.single-gallery', {id: gallery.id}) }}">
 <img src="{{ gallery.images.first|getImageUrl }}"
 alt="{{ gallery.name }}"
 srcset="
 {{ gallery.images.first|getImageUrl('1120') }} 1120w,
 {{ gallery.images.first|getImageUrl('720') }} 720w,
 {{ gallery.images.first|getImageUrl('400') }} 400w"
 class="gallery__leading-image card-img-top">
</a>

```
次に、アプリに登録しましょう。これを行います。次のコンテンツでSRC/サービスに新しいサービスを追加します。

このサービスは、Symfonyの新しい自動配線アプローチのために自動噴射される既に宣言されたFileManagerサービスを消費します。入力パスと出力パスの両方をuploadsDirとして宣言し、出力をキャッシュサフィックスに指定し、サーバーを返す方法を追加します。サーバーは基本的に、サイズ変更を行い、サイズ変更された画像を提供するグライドのインスタンスです。
FileManager Publicでgetuploadsdirectoryメソッドを作成する必要があります。現在はプライベートであるためです。
```
<a class="gallery__link" href="{{ url('gallery.single-gallery', {id: gallery.id}) }}">
 <img src="{{ gallery.images.first|getImageUrl('250') }}"
 alt="{{ gallery.name }}"
 class="gallery__leading-image card-img-top">
</a>

```
最後に、ImageControllerのServemageActionメソッドを変更して、次のようになりましょう。
```
<img src="{{ image|getImageUrl(250) }}" alt="{{ image.originalFilename }}"
 class="single-gallery__item-image card-img-top">

```
このメソッドは、イメージIDからイメージIDを分離して、ダブルダッシュで画像IDを爆発させました。 Doctrineがデータベースから画像のFilepathを取得すると、サイズが渡された場合、サイズがファイル名に再び取り付けられます。そうしないと、元の画像が使用されます。この画像が存在しない場合、1つは元のパスから生成され、後で使用するために保存されます。
デモンストレーションの目的では、サイズを追加してアップロードフォルダーに保存することで、この辺りで長い道のりを進め、手動でファイルを生成します。グライドからの出力メソッドを使用して画像を直接出力することもでき、メインアップロードフォルダーのサフィックスで保存されずに、キャッシュサブフォルダーから直接提供されることに注意してください。 MakeImageメソッドを使用して画像を作成し、画像を取得する古いロジックを引き継ぐこともできます。これが以下に選択したアプローチです：
```
<picture>
<source media="(max-width: 700px)" sizes="(max-width: 500px) 50vw, 10vw"
srcset="stick-figure-narrow.png 138w, stick-figure-hd-narrow.png 138w">

<source media="(max-width: 1400px)" sizes="(max-width: 1000px) 100vw, 50vw"
srcset="stick-figure.png 416w, stick-figure-hd.png 416w">

<img src="stick-original.png" alt="Human">
</picture>

```
当社のオンデマンドイメージレジングビジネスは運用可能です。これで、私たちがしなければならないのは、テストすることだけです
テスト

ホームページを更新するとすぐに、今は少し遅くなり、VAR/Uploadsフォルダーで画像が生成され始めます。 2番目のページにスクロールせずにチェックしてみましょう。

確かに、ホームページのすべての画像の小さなサムネイルバージョンがあり、それが提供されている画像です。小さなファイルサイズに注意してください。それでは、ギャラリーにアクセスして画像をクリックしてビッグバージョンを取得しましょう。

ええ、私たちの画像はオリジナルから生成されました。
しかし、モバイルはどうですか？最新のブラウザでは、モバイルモードをオンにするのが簡単です。モバイルビューでギャラリー画像を開いて、その後画像フォルダーをチェックしてみましょう。

方向を変更してフォルダーをチェックしたら？

成功、私たちのイメージのモバイルサイズが正常に生成され、以前からのフル画面画像が再利用されました。これが「モバイル」画面がランドスケープモードの大きさであるためです。オンデマンドSRCSETが正常に実装されました！
これらのアップグレードを備えたアプリは、このリリースとしてタグ付けされています。
結論
この投稿では、写真指向のサイトで配信のために画像を最適化するプロセスを実行しました。最良の結果を得るためにサムネイルを固定サイズに保持し、フルスクリーン画像を使用して、SRCSET（最新のWebサイトへの簡単な追加）を実装することに焦点を当てました。私たち。

しかし、私たちは画像を変更している間、メタデータを削除して品質とサイズのためにそれらを自動化することも賢明ではないでしょうか？そして、ユーザーが待っている間にオンデマンドでサイズを変更することは本当に最良の選択肢ですか、それとも別の、より実用的なアプローチがありますか？次のパートで調べてください。

依存症の画像のサイズ変更に関するよくある質問

オンデマンド画像のサイズ変更により、Webサイトのパフォーマンスがどのように改善されますか？

オンデマンド画像サイズ変更により、画像の負荷時間を短縮することでWebサイトのパフォーマンスを大幅に向上させることができます。フルサイズの画像をロードする代わりに、Webサイトは視聴者の画面に適合するサイズ変更されたバージョンをロードします。これは通常、より小さく、ロードが速くなります。これにより、待機時間を短縮することでユーザーエクスペリエンスが向上するだけでなく、帯域幅も節約できます。これは、データプランが限られているユーザーにとって特に有益です。

従来の画像サイズ変更には、各画像をウェブサイトにアップロードする前に手動でサイズ変更することが含まれます。特に多数の画像を備えたWebサイトでは、これは時間がかかり、非効率的です。一方、オンデマンド画像のサイズ変更は、ユーザーがリクエストするように画像を自動的にサイズ変更します。これは、特定のニーズとデバイス機能に応じて、異なるユーザーに異なるサイズで同じ画像を提供できることを意味します。 liipimaginebundleというバンドルを提供し、オンデマンド画像のサイズ変更を実装できるようにします。 Composerを使用してこのバンドルをインストールしてから、ニーズに応じて構成できます。バンドルは、スケール、作物、サムネイルフィルターなどの画像のサイズを変更するために使用できるさまざまなフィルターを提供します。テンプレートの「Apply_Filter」関数を使用してこれらのフィルターを画像に適用できます。

symfonyのアップロードに関する画像をサイズ変更できますか？ symfony。これは、Vichploaderbundleを使用して実行できます。これにより、アップロード時に画像を自動的にサイズ変更できます。バンドルを構成して、特定のサイズまたは元のサイズの割合に画像をサイズ変更できます。これは、Webサイトにアップロードされたすべての画像が一貫したサイズであることを確認する場合に特に便利です。 AWS Lambdaのようなサービスを使用して、その場で達成できます。 Lambda関数をセットアップして、S3バケットから要求された画像を自動的にサイズ変更することができます。この関数は、要求された画像サイズを関数に渡すAPIゲートウェイによってトリガーできます。この関数は、S3から元の画像を取得し、要求されたサイズにサイズを変更し、変更された画像をユーザーに返します。

オンデマンド画像のサイズ変更にCDNを使用することの利点は何ですか？

オンデマンド画像のサイズ変更にコンテンツ配信ネットワーク（CDN）を使用すると、ユーザーに配信される画像の速度が大幅に向上します。。 CDNには世界中にサーバーがあります。つまり、ユーザーに最も近いサーバーから画像を提供してレイテンシを削減できます。さらに、CDNSはサイズ変更画像をキャッシュすることができます。つまり、同じ画像が同じサイズで再び要求された場合、キャッシュから直接提供し、パフォーマンスをさらに向上させることができます。？

オンデマンド画像サイズ変更は、SEOにプラスの影響を与える可能性があります。読み込み時間が短縮すると、ユーザーエクスペリエンスが向上する可能性があります。これは、Webサイトをランキングする際に検索エンジンが考慮に入れる要因です。さらに、ユーザーのデバイスに適切にサイズの画像を提供することにより、モバイルユーザビリティに関する問題を回避できます。これは、ウェブサイトの検索エンジンのランキングにも影響を与える可能性があります。？

はい、オンデマンド画像サイズ変更は、レスポンシブWebデザインを完璧に補完します。レスポンシブデザインを使用すると、Webサイトのレイアウトはユーザーの画面のサイズに適応します。オンデマンド画像のサイズ変更により、Webサイトの画像はユーザーの画面サイズにも適応し、Webサイトが見栄えが良く、すべてのデバイスでうまく機能することを保証します。サイズを変更しますか？

オンデマンド画像サイズ変更には多くの利点がありますが、考慮すべき潜在的な欠点もあります。これらの1つは、その場で画像のサイズを変更するために必要な処理能力です。これにより、トラフィックの高いWebサイトがある場合は、サーバーに負担をかける可能性があります。さらに、オンデマンド画像のサイズ変更にサードパーティサービスを使用している場合、このサービスに関連するコストがある可能性があります。 🎜>セットアップを変更するオンデマンド画像を最適化する方法はいくつかあります。 1つは、サイズ変更された画像をキャッシュし、ユーザーに近いサーバーからそれらを提供できるCDNを使用することです。もう1つは、クラウド内の画像をサイズ変更してサーバーの負荷を減らすことができるAWS Lambdaのようなサービスを使用することです。さらに、たとえば品質を下げたり、より効率的なファイル形式を使用したりすることにより、画像をアップロードする前に最適化できます。