JavaScript と HTML5 を使用して画像のズームイン機能を開発する必要があります。どちらの戦略が優れているか –</p>
単一の画像を取得し、ズーム レベルを適用します – より高いズーム レベルの画像をダウンロードできますか – 4 倍およびページのロード時に画像を 1 倍で表示します。このアプローチでは、テキストが多い場合に画像が特別に歪むことはありますか?
異なるズーム レベルの異なる画像 – これにより、ページの読み込み時間が確実に増加します。これは避けたいと考えています。
JavaScript と HTML5 を使用して画像のズームイン機能を開発する必要があります。どちらの戦略が優れているか –</p>
単一の画像を取得し、ズーム レベルを適用します – より高いズーム レベルの画像をダウンロードできますか – 4 倍およびページのロード時に画像を 1 倍で表示します。このアプローチでは、テキストが多い場合に画像が特別に歪むことはありますか?
異なるズーム レベルの異なる画像 – これにより、ページの読み込み時間が確実に増加します。これは避けたいと考えています。
ズームレベルごとに異なる画像を作成し(この方法で、常に見栄えが良くなるようにします)、要求された場合にのみ(ajaxを使用して)異なるズームレベルをロードするのが最善だと思います-このようにして、ページの読み込み時間の増加を回避します.
最初のオプションを使用することをお勧めします。
画像の解像度が高い場合、テキストは歪みません。PNG を使用するか、可能であれば SVG を使用してください。
2番目のオプションでは、異なるレベルで異なる画像しか持たないため、ズーム効果はスムーズになりません。
それほどスムーズにする必要はないが、ズーム効果で画像をロードする時間を避けるために、ズームを実行する前にすべての画像をロードする必要があります。ただし、その場合、サイズの異なる複数の画像を使用するよりも、1 つの重い画像を一度ロードしてスムーズにズームする方が軽くなります。
間違いなく、2 番目のオプションではネットワーク トラフィックにオーバーヘッドが追加され、パフォーマンスが低下します。したがって、1 つの画像を使用してズーム レベルを適用する方が適切ですが、これを使用すると、png、gif などの画像の種類を選択することができます (これまでにない方が適しています)。
実際には、png は高品質であり、この種の操作に適しています。