Web ページ上に何百万もの小さな画像をレンダリングする方法

私は 2025 年のインターネットの状態を記録する 10MPage.com を構築しています。すべてのインターネット ユーザーは 64x64 ピクセルの小さな画像をアップロードし、このアーカイブに貢献することができます。

名前が示すように、これらの小さな画像を 1,000 万枚処理できる必要があります。私が最初にこのコンセプトを思いついたとき、これらを効率的にレンダリングする方法について懸念していました。この記事では、私の最初の試みと最終的な解決策について説明します。

続行する前に、10MPage.com を見て、それがどのように行われるかを理解できるかどうかを確認してください。 10MP ページに到達したら、自分用のタイルを請求してみてはいかがでしょうか? :)

イメージタグとキャンバスの比較

最初に選択しなければならなかったのは、HTML 要素を使用するか、全画面キャンバスを使用するかということでした。

画像タグを分離する

最初はタイルごとに個別の

<div>



<p>With this CSS:<br>
</p>

<pre class="brush:php;toolbar:false">    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: auto; /* Enable scrolling */
        }

        .grid {
            display: block;
            position: relative;
            width: 100%; /* The grid will take the full width */
        }

        .row {
            display: flex; /* Each row is a flex container */
        }

        .tile {
            width: 64px;
            height: 64px;
            box-sizing: border-box;
            border: 1px solid #ccc; /* Visual separation between tiles */
        }

        .tile img {
            width: 64px;
            height: 64px;
            object-fit: cover;
        }
    </style>

これは次のようになります:

これは問題ありませんが、問題となる可能性のある点がいくつかあります:

• ブラウザのスクロール
• 大きな DOM
• 遅延読み込み

キャンバス

次のアプローチはキャンバスを使用したもので、簡単にするためにチェッカーボードを描くことにしました。スクロールの追加も簡単で、次のようになります。

<p>スクリーンショット:<br>
<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173668501927013.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="How I managed to render million small images on a webpage"></p>

<p>このアプローチは、コードを介してすべてをレンダリングできるため、より高度な機能が簡単になるため、優れています。</p>

<h3>
  
  
  イメージタグまたはキャンバスの決定
</h3>

<p>最終的には、div よりも柔軟性が高い Canvas を使用することにしました。これは、アニメーションの読み込み、スムーズなスクロール、遅延読み込み、および多くの制御を提供するコードを介してレンダリングされるという事実によるものです。 </p>

<p>しかし、小さな画像をたくさん読み込むと多くのオーバーヘッドが発生するため、それを最小限に抑えるために、小さな画像を大きなブロックにバンドルしたいと考えています。</p>

<h2>
  
  
  タイル配信を最適化する
</h2>

<p>各画像を個別にロードすると、大量のネットワーク要求が追加されます。 1080p 画面で簡単に計算してみましょう。幅は 1920 ピクセルで、1920 / 64 = 30 タイルになります。高さが 1080 ピクセルの場合、1080 / 64 = ~17 タイルになります。したがって、フル HD ディスプレイでタイルの全画面をレンダリングするには、30*17 = 510 個の小さな画像をレンダリングする必要があります。 </p><p>ただし、スクロールできる必要があります。また、スクロールするときに、レンダリング前に大量の読み込みアイコンを表示したくありません。つまり、周囲の画像も事前にロードする必要があります。それを事前にロードしたい場合は、8 倍のタイルを追加する必要があります。黒い長方形がディスプレイであると想像してください:</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173668502115888.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="How I managed to render million small images on a webpage"></p>

<p>*<em>これは、510 * 8 = 4080 枚の画像になります。 *</em></p>

<p>これほど多くの画像を高速にレンダリングするのは現実的ではありません。解決策は？  個々のタイルを組み合わせて大きなブロックにします。</p>

<p>PHP を使用して、16*16 タイルを含む画像を生成するコントローラーを作成しました。各ブロックの幅と高さは 64 * 16 = 1024 ピクセルです。これは、10MPage にアクセスしてコンソールのネットワーク タブを見ると確認できます。</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173668502382486.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="How I managed to render million small images on a webpage"></p>

<p>スクリプトは、塗りつぶされていない箇所に疑問符を追加します。</p>

<p>つまり、1920 * 3 = 5760 ピクセル x 1080 * 3 = 3240 ピクセルの場合、4080 枚の画像の代わりに、必要な画像は 24 枚だけになります: 5760 / 1024 = ~6、3240 / 1024 = ~4 (両方とも切り上げ)、6* 4 = 24。どちらが可能ですか!</p>

<h2>
  
  
  ブロックを隠す
</h2>

<p>タイルが大きなブロックで読み込まれることを「隠す」ために、いくつかのことを実装しました。</p>

<h3>
  
  
  ロード画面には常に 64x64 タイルが表示されます
</h3>

<p>ロード画面<br>
<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173668502441571.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="How I managed to render million small images on a webpage"></p>

<h3>
  
  
  フルグリッドは常に正方形にレンダリングされます
</h3>

<p>グリッドの下部または右側にある大きなギャップを隠すために、グリッドが正方形でない場合、グリッドはブロックをロードしません。一番下にブロックが表示されず、その左側または右側に空のブロックが表示されます。</p>

<p>この記事をお読みいただきありがとうございます。何かを学んでいただければ幸いです。 <br>
もしそうなら、お気に入りのプログラミング言語、暗号通貨、またはペットを 10MPage に追加してみてはいかがでしょうか?無料です!</p>