Web上のほとんどの画像は不要です。私が少しジャークであるかもしれない場合、それらの99％はまったく役に立たないことさえありません（ただし、まれな例外はありますが）。それは、画像がサポートすることになっているテキストを補完しないことが多いため、を傷つけるユーザーを傷つけ、何らかのパフォーマンス税のようなデータキャップをロードして爆破するために永遠に取っているためです。

ありがたいことに、これは今日のデザインの問題です。なぜなら、画像をパフォーマンスし、よりユーザーフレンドリーにすることは、以前よりもはるかに簡単だからです。 Webpなどの画像形式が優れています（そして、おそらく、JPEG XL）。コースの魔法の魔法があります。そして、ImageOptimのような素晴らしいツールや、Addy Osmaniの新しい本などのリソースがあります。

おそらく画像のパフォーマンスを改善する私のお気に入りの方法は、ゆっくりと読み込みです：

この画像は、ユーザーがページを下にスクロールしてユーザーに表示されるときにのみロードされます。これにより、初期ページのロードから削除されます。 WebページのLightningfastの最初の負荷をかけるのは大したことです。

しかし、はをまったく読み込まない画像があるかもしれません。おそらく、人がそれを見ることができればより良い状況があるでしょう。 1つの例を次に示します。テキストのみのバージョンのnprandクリックを少し取り上げます。そうではありませんか…とても素晴らしいですか？！読みやすい！あちこちにジャンクはありません。それは私をユーザーとして尊敬しています。 それで！ウェブサイトに画像を表示できたが、クリックしたりタップされたりした場合だけの場合はどうなりますか？プレースホルダーを表示してクリック時に実際の画像に交換できるとしたら、きちんとそうではないでしょうか？このようなもの：

まあ、私はこのチャップを構築する方法についてここに2つの考えがありました（黄金のルールは、ウェブ上に何かを構築する方法が1つないということです）。

方法＃1：src属性なしでを使用

タグのSRC属性を削除して、画像を非表示にすることができます。次に、データSRCなどのように画像ファイルを属性に配置できます。

デフォルトでは、ほとんどのブラウザには、おそらくよく知っている壊れた画像アイコンが表示されます。

わかりました、それは一種のアクセス可能です。私は推測する？画面上で自動的にレンダリングされているALTタグを確認できますが、JavaScriptの軽いダッシュを使用すると、その属性とSRCを交換できます。

これで、いくつかのスタイルを追加できます。

ugh

。一部のブラウザでは、画像がロードされていないときに、下部に壊れたイメージアイコンが小さくなります。ここでの問題は、ブラウザがCSSを使用して壊れた画像アイコンを削除する方法を提供しないことです（とにかく許可されるべきではないでしょう）。 Altテキストのスタイルも少し面倒です。しかし、Alt属性を完全に削除すると、壊れた画像アイコンはなくなりますが、これによりがJavaScriptなしで使用できなくなります。そのため、そのaltテキストを削除することはノーゴーです。

document.querySelectorAll("img").forEach((item) => {
  item.addEventListener("click", (event) => {
    const image = event.target.getAttribute("data-src");
    event.target.setAttribute("src", image);
  });
});

私が言ったように：

ugh

。この方法を機能させる方法はないと思います（ただし、私が間違っていることを証明してください！）

方法＃2：リンクを使用して画像を作成する

私たちが持っている他のオプションは、このような謙虚なハイパーリンクから始めることです。

Musab al Rawahiによる熱気球の写真。 144kb それ、うん、まだ賢いことは何もありません - これは、画像へのリンクをレンダリングするだけです：

それはアクセシビリティで動作しますよね？ JavaScriptがない場合、私たちが持っているのは、人々がオプションでクリックできるリンクだけです。パフォーマンスに関しては、プレーンテキストよりもはるかに速くなることはできません！

しかし、ここから、JavaScriptがクリック時にリンクのロードを停止し、そのリンク内のHREF属性をつかみ、画像要素を作成し、最後にその画像をページ上に投影し、完了したら古いリンクを削除することができます。

document.queryselectorall（ "。load-image"）。foreach（（item）=> { item.addeventlistener（ "click"、（event）=> { const href = event.target.getAttribute（ "href"）; const newImage = document.createElement（ "img"）; event.preventdefault（）; newImage.SetAttribute（ "SRC"、HREF）; document.body.insertbefore（newImage、event.target）; event.target.remove（）; }）; }）;

Photograph of hot air balloons by Musab Al Rawahi. 144kb

おそらく、このプレースホルダーリンクをスタイリングして、以下のものよりも少し見栄えを良くすることができます。しかし、これは単なる例です。先に進み、リンクをクリックして画像をもう一度読み込みます：

そしてそこにあなたはそれを持っています！画期的でも何もありません。しかし、最初の塗料と初期負荷を超えたパフォーマンスについて非常に急進的になりたかった場合、これは大丈夫なソリューションだと思います。テキストのみのWebサイトを作成している場合、これは間違いなく行く方法だと思います。

おそらく、これからWebコンポーネントを作成したり、誰かが還元されたdataandを検出しても、誰かが十分なデータなどを持っている場合にのみ画像を読み込んだかどうかを検出することもできます。どう思いますか？