Web 画像: 完全に (そして自動的に) サイズ変更して変換します

ほぼすべてのフロントエンド開発者は、品質に影響を与えることなく、可能な限り最小の画像をユーザーに配信する必要があることを知っています。私たちは皆、それを達成する方法を知っています。しかし、それは誰もやりたくない雑事です。ビジネスの観点からも、時間がかかり、時は金なりです。したがって、「十分」で十分です。

開発者の負担を増やすことなく、完璧な画像配信をどのように改善および自動化したかを共有しましょう。

通常のやり方

それはあなたではないかもしれませんが、多くの人、おそらく私たちのほとんどです。

高密度画面に対応するために、画像を意図したサイズの 2 倍で PNG でエクスポートし、 で使用します。タグ。 30 秒 (またはそれ以上) 余分に費やしても構わない場合は、WebP に変換し、両方のバージョンを 内に配置する方が良いでしょう。要素を使用して、ブラウザーに最適なものを選択させます (最適なものではなく、サポートされている最新のものとブラウザーのお気に入りの形式だけです)。

これは「十分」です。多くの場合、実際にそれで十分です。

しかし、それは完璧ではありません。新しい iPad は大きく、2.5 倍、さらには 3 倍の画像を利用できます。一方、標準的な企業向け Lenovo ThinkPad では、そのような余分な詳細は必要なく、1 倍の画像で完璧です。

そして正直に言うと、手作業ではこれだけで十分です。 1 枚の写真に 15 分も費やすことは誰にもできません。

完璧な自動化

私の完璧主義者の脳にとって、「十分に良い」という言葉は意味しません。また、当社の顧客の中には競争の激しい分野に携わっている人もいるため、選択肢の調査を開始しました。それほど時間はかかりませんでした。ブラウザーがサポートする画像形式を示す HTTP ヘッダーを送信することはすでにわかっていました。

私たちが必要としていたのは、<写真>が要素は、特定の画面のピクセル密度に基づいて画像をロードできます。これはサーバー側のレンダリングではほとんど不可能であり、JavaScript を介して src を調整することは、さまざまな理由から問題外です。

これで、必要なものがすべて揃いました。

• サーバーが提供できる 形式。
• フロントエンド開発者によって要求されたイメージの寸法。
• ディスプレイのピクセル密度。

プロセス

画像の最適化プロセスを自動化する方法は次のとおりです:

1. あらゆる画像アップロードを受け入れる

   開発者と管理者が好きな画像をアップロードして保存できるようにしています (もちろん、開発者はより注意しなければなりません)。私たちのシステムは何でも処理できます。DSLR カメラから直接変換した 250 MB JPEG さえも処理でき、変換とサイズ変更に成功し、ログを見て大笑いしました。

2. 自動変換と圧縮

画像がアップロードされると、システムは自動的に次の処理を行います。

• 複数の形式に変換します: PNG、WebP、AVIF。
• 90% の品質設定を使用して各バージョンを圧縮します。

なぜ 90% なのでしょうか?なぜなら、品質の最後の 10% は、多くの場合、収益が大幅に減少する結果となるからです。視覚的な品質に目に見える違いはなく、ストレージ容量と帯域幅を大幅に節約できます。

1. 複数の解像度を生成

   各画像について、ピクセル密度乗数に基づいて複数のサイズを生成します。

• 1×
• 1.5×
• 2×

• 3×

  これにより、高解像度画面を備えたデバイスでは鮮明な画像が得られ、他のデバイスでは適切なサイズの画像が得られます。

  そして、将来を見据えて、数値を追加または変更するだけで、すべてが自動的に処理されます (VR/AR コンテンツはまだ作成していませんが、これは便利になる技術だと思います)。

1. 動的画像の提供

   HTML テンプレートでは、希望する画像の寸法 (幅または高さ) を指定します。サーバー側のコードは次のようになります:

• 最適化された画像が存在するかどうかを確認します。
• そうでない場合は、処理のためにキューに入れます。

• 適切な を生成します。ピクセル密度の srcset を含む要素。

  ブラウザは、デバイスの機能に基づいて最適な画像を自動的に選択します。

結果は次のようになります:

<picture>
  <source srcset="/Upload/2024/03/11/tn-w200-frantisek.webp 1x,
                   /Upload/2024/03/11/tn-w300-frantisek.webp 1.5x,
                   /Upload/2024/03/11/tn-w400-frantisek.webp 2x,
                   /Upload/2024/03/11/tn-w600-frantisek.webp 3x">
  <img src="/Upload/2024/03/11/frantisek.jpg" width="2222" height="2963" loading="lazy" alt="Video poster">
</picture>

大きな画像の処理

私たちが開発者として、画像の完璧なサイズ変更や変換を避けているとしても、一般的な管理者やクライアントがそれを行うことは期待できません。したがって、私たちは人々が望むものをアップロードできるようにし、私たちがそれを処理します (優れた UX とクライアントとの関係)。

当初、サイズ変更がそれほど集中的に行われるとは予想しておらず、デモ サーバーを数回完全に停止させてしまいました。そこで私たちはこのアプローチを開発しました:

• 画像処理専用の別のローエンド VPS 上にシンプルな API サービスを構築しました。
• 弊社の実稼働サーバーは、画像と希望の形式/サイズをこのサービスに送信します。
• 処理された画像は返され、提供するために保存されます。

結果

• ユーザーは満足しています: 画像はすぐに読み込まれ、どのデバイスでも見栄えがよくなります。
• 管理者は満足しています: アップロードする前に画像のサイズ変更や最適化について心配する必要がありません。
• 開発者は満足しています: プロセスは自動化されており、追加の作業は必要ありません。
• サーバーは満足しています: 画像を提供するための帯域幅の消費と CPU 負荷が削減されました。

画像のサイズ変更には公共の商用サービスを利用できることはわかっていますが、正直に言うと、これは午後の仕事でしたし (意味 - はるかに安い)、すべての面を管理できています。

商業的にリリースしますか?

私たちはこのソリューションに非常に満足しているため、このサイズ変更および変換サービスを改良して、お客様が使用できるようにすることを検討しています。そのようなサービスに興味はありますか?お知らせ下さい。もしかしたらかなりの金額を削減できるかもしれません。

開発者による、開発者のための - 現時点ではミームである可能性がありますが、この場合は厳然たる真実です。

コード（簡略化）

サイズ変更の部分については共有できませんが、選択内容と <画像> をお見せすることはできます。創造。私たちは PHP で作業しています。その方法を次に示します。

を生成しています。要素

<picture>
  <source srcset="/Upload/2024/03/11/tn-w200-frantisek.webp 1x,
                   /Upload/2024/03/11/tn-w300-frantisek.webp 1.5x,
                   /Upload/2024/03/11/tn-w400-frantisek.webp 2x,
                   /Upload/2024/03/11/tn-w600-frantisek.webp 3x">
  <img src="/Upload/2024/03/11/frantisek.jpg" width="2222" height="2963" loading="lazy" alt="Video poster">
</picture>

私たちは、HTML と PHP を組み合わせたカスタム テンプレート システムを使用しています (一般的ではないことは承知していますが、私たちのニーズには最適です)。

<div>



<p>このコードはロジックを示しています。実際に行うことは、ファイルとそのバリアントのデータベースがあるため、パスの代わりに配列とオブジェクトを操作することです。しかし、先ほども言いましたが、これは私たちが行っていることのロジックを見事に示しています。</p>

<p>ご覧のとおり、フロントエンド開発者がこのコードを書くか、<img>タグ、費やす時間については誰が気にします。</p>

<h2>
  
  
  問題点を指摘しましょう
</h2>

<p>このメソッドは、現実の世界で問題が発生しないように構築されています。しかし、これには 2 つの改善点があり、それらを明らかにするのが待ちきれません (繰り返しになりますが、完璧主義者の観点から)。</p>

<ol>
<li>
<p><strong>ダブルキュー</strong></p>

<p>フロントエンドでその画像を最初にロードした後、サイズ変更のためにキューに入れられます。 Web サイトのトラフィックが多い場合、実際には 2 回キューに入れられる可能性があります。実際の使用では問題ありません。したがって、2回処理されます。トラフィックの多い Web サイトで発生したのは 1 年に 2 回だけです。</p>
</li>
<li>
<p><strong>大きい画像の初期表示</strong></p>

<p>管理者が大きな写真をアップロードする場合、スケジュールされたタスクで行われるため、サイズ変更と変換に 5 ～ 10 分かかります。その間、大きな写真がウェブページに表示されます。実際の使用では、新しいコンテンツはユーザーがアクセスするまでに少し時間がかかることが多いため、通常は管理者のみがそれを表示します。トラフィックの多い Web サイトでは、このタイマーを最短 1 分に短縮するため、これも問題ありません。</p>
</li>
</ol>

<h2>
  
  
  ストレージに関する考慮事項
</h2>

<p>現在、あらゆるサイズと形式の複数の画像があり、ストレージを大量に消費する可能性があることを指摘するかもしれません。 Web サイトが写真やギャラリーでいっぱいで、それぞれのサムネイルや詳細な画像が必要な場合、はい、大量のストレージを使用します。</p>

<p>しかし、最近ではディスク容量が最も安価なコンポーネントです。通常、パフォーマンスとユーザー エクスペリエンスにおけるメリットはコストをはるかに上回ります。これにより、CPU とインフラストラクチャ全体の負荷が軽減されました。</p>
<p><strong>余談 - </strong> なぜインフラストラクチャを気にするのでしょうか?他の誰かがそれを扱っていますよね？それはよく聞きます。単純な事実は、それは真実ではないということです。ホスティング会社が、顧客が増えずに負荷が増加したために帯域幅を増やすためにハードウェアを追加する必要がある場合、ホスティング会社はそれを維持できず、そのコストを喜んでサーバーレンタル者に転嫁します。</p>

<h2>
  
  
  私たちの実際の結果と経験
</h2>

<p>Google Search Console では、Core Web Vitals はこれまでよりも環境に優しく、読み込み時間は一般的に大幅に短縮され、訪問者のセッション時間は長くなります (数パーセントですが、私は受け入れます!)。また、開発者や管理者にとって追加の作業はなく、すべてがスムーズに動作します。</p>

<p>すべての開発者にこのようなものを使用することを強くお勧めします。これは私たちにとって非常に役に立ちましたが、バックグラウンドでこの機能が存在し、機能していることを実際に忘れることができました。そして私は文字通り、すべてのシステムをセットアップして磨き上げるよりも長い時間をかけてこの記事を書いています。</p>

<h2>
  
  
  結論
</h2>

<p>画像の最適化を自動化することで、次のことを達成しました。</p>

<ul>
<li>各デバイスに合わせた完璧な画像配信。</li>
<li>ページの読み込み時間とユーザー エクスペリエンスが向上しました。</li>
<li>開発者の手作業を削減します。</li>
</ul>

<p>画像の最適化の面倒な作業にうんざりしている場合は、プロセスの自動化を検討してください。それは関係者全員にとってwin-winです。</p>

<p><strong>画像に対して体系的なソリューションを使用していますか?</strong></p>

<p><strong>それとも手動で変換しますか?</strong></p>

<p><strong>AVIF を試したことがありますか?大きな画像には驚くべき利点があります。</strong></p>


          </div>

            
        

以上がWeb 画像: 完全に (そして自動的に) サイズ変更して変換しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。