大きな画像の読み込み最適化ソリューション_html/css_WEB-ITnose

閲覧しているページに大きなサイズの画像が読み込まれると、その画像は比較的大きいため、ブラウザが画像を読み込むと、画像が上から下に向かって徐々に表示されることがわかります。画像が完全に表示されるまで、ページ上の空白領域から画像の完全な読み込みまでのプロセスがかなり唐突に見え、ユーザー エクスペリエンスが低下します。

デモのダウンロード ソース コードを表示します

私たちが使用する解決策は、最初に非常に小さなサムネイル (約 1K しかない可能性があります) をロードし、[The] を押すことです。大きな画像を完全に表示する前に、大きなサイズの画像をぼやけて表示する必要があります。これにより、ユーザーは、最初にぼやけた画像が読み込まれ、次に鮮明な画像が読み込まれるように感じられ、画像の読み込みプロセスがスムーズになり、ユーザー エクスペリエンスが大幅に向上します。

HTML

大きな画像を用意します。もちろん、可能な限り大きくする必要があります。おそらく数百 KB、場合によっては MB です。また、非常に小さいサムネイルも作成します (おそらく約 1kb)。このサムネイルを Base64 イメージに変換できます。次のコードでは、data-antimoderate-idata 属性値が Base64 イメージとして定義されています。

<img src="images/a.jpg" id="pic" style="width:800px; height:576px;" data-antimoderate-idata="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAYEBAQFBAYFBQYJBgUGCQsIBgYICwwKCgsKCgwQDAwMDAwMEAwODxAPDgwTExQUExMcGxsbHCAgICAgICAgICD/2wBDAQcHBw0MDRgQEBgaFREVGiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICD/wAARCAAsADwDAREAAhEBAxEB/8QAHAAAAQQDAQAAAAAAAAAAAAAAAwEEBQYAAgcI/8QANxAAAgECBAMFBAgHAAAAAAAAAQIDBBEABRIhBjFRBxMiQZEUFiNxJFJhYnKBsfAVMjOCwdHh/8QAGQEAAwEBAQAAAAAAAAAAAAAAAQIDAAQF/8QALBEAAgECBAUDAwUAAAAAAAAAAAECAxEEEhMxFCFBUWFxodEiMpFCgbHB8P/aAAwDAQACEQMRAD8A7LS1sdreIHy2x0XPOHgqFI8M6g9DjZjWM/igibSyhz1GAYf0udUDw6xIhj3BKnzBsRcdDibHQOqz2BAfZy4YfmMFIDZAzcfZbEW76ugkkA8EJkXxHl5YLsZXJP3kyzMIjLSNDPEh0q8YuCbC42wIoM5DNs/qL+GGK3pimUkeTct7Y+IVrYmalpohezSxpM0iq2zaA0nOwxC536aJiftp4zqaxWirGSA/1IUVU8IO+jnvbrjDKgPKHth4xmqoaCjm2maOKnM+jVqJCAvIRaxJ33/PBG4ddeRa8gi7TMpr5XzGvp6rLRqZ6ZauEL3jvqvaEySeIm2wxaDS+5HbSwNHNynGp4+pfyiLz+PtEnWr4jp0TL4KZGnmhFYJXsL+LTI2q2kkWt8sTfoavhcP+mpH0Wb4Oc+9GaxSK50EoQd1/Tl0wpzOhEOnHXE0dMtGmYTUtOC8gWmBjbU+9yVN+Ywbk3QiL798Y8zxFWITuVu5xrgdKPYiqLK6GaQRRySFw2ll0k2tzvYbeuIOpYf1LAvDFCqx3nd3TmiKArfi1ayfUY5nihZVYrYMvD2UaCJYCb8m7zl18t8bi/AHifASnyDIEYtHSabAjvEdlNj5emNxY8cVZ3St6GycPcOoGLZYSG/ktOVsfInwnDcaLrx7G9PwblVfUmJJJKR2W8V31pfzA5HG4spSqZ3bqN6/szr6Yk0dZHKfFyOlttrHVb9cVjWuNVi47lfkynOaRu5MRBHPcj/BxS6Jai7k4MwEa6e70r9VFsMeW4s5WpDumrDLqDssKINTX/588LkFHD1CBdpVZBbwDnvyO4wMowOfMECqqtYdeuBYW5jVh7g/FuQOX7+eBYFxIszuux+IhupGMFO3MlqbiKOp2qfBKLat7K69R0Ix105Hq0MRqb2RjZpSobTMkTeSMRqt9uLjTwMXz2/DKskBUX72YqPrOT6DAudSgu7/ACEeM92CZpFsdlDb3PXngMbTv1Zp7LUJHf2mVSD9y9z5csA2il/l8CdxXWGmsY6Qb+BDcnrt5YYDpPv7IPFT13dKTWENex+FHvfkTfyGMLpefZG75fXSKv07SfMrDHY/v7Mbl2F0PPsg0FGYgntFQs2nmGRBc9b8/TGtcKw668/2ErK4RygMmq4uDvy9DikYXBOpFPodYpeFuH6iLW9FGD924wlBqe6938la14bf18BDwLwu2p/Yhf8AE/8AvHoRwcGupwyxMk+gkfBHDjKfo1v7mxCVCKLa8ipcY5ZQZdXxU9JEI07rUeZJJY8/TEakUtjooyzbjGCvkp6caEQ2XWCb31KxseeBDmJV7gfeKs9mMxiiaV+9LuQxuUjFjbVa/wAsUcDmdR2KxxLxnmixKaaKCmlE0K99GrF7M24+Izgc/IXw0UczqNlS49zjMJuJ6oiVolURqsaO+kDQOrE8z1xsqAptH//Z">

Javascript

js 処理を行わない場合でも、大きな画像が上から下にゆっくりと読み込まれるのが表示されます。幸いなことに、antimoderate.js が読み込みの問題を解決してくれるので、その使用方法を見てみましょう。

<script src="antimoderate.js"></script><script>    var img = document.getElementById('pic');    AntiModerate.process(img, img.getAttribute("data-antimoderate-idata"));</script>

Antimoderate.js は HTML5 キャンバスを使用して画像を処理し、最初にサムネイルを読み込み、それをぼかします。大きな画像のダウンロードが完了すると、大きな画像が読み込まれて表示されます。 Web ページを開く速度が向上しました。