Die meisten Bilder im Web sind überflüssig. Wenn ich für ein bisschen ein Idiot sein könnte, sind 99% von ihnen überhaupt nicht so hilfreich (obwohl es seltene Ausnahmen gibt). Das liegt daran, dass Bilder den Text, den sie unterstützen sollen, nicht oft ergänzen, und stattdessen verletzen Benutzer, und dauern ewig, um Datenkappen wie eine Art Leistungssteuer zu laden und zu inszenieren.

Zum Glück ist dies heute hauptsächlich ein Designproblem, da es so viel einfacher ist, Bilder aufführend und benutzerfreundlicher zu machen als früher. Wir haben bessere Bildformate wiewebp (und vielleicht bald JPEG XL). Wir haben die Magie von Responsive Imagesof Course. Und es gibt unzählige großartige Tools, wie ImageOptim, sowie Ressourcen wie Addy Osmanis neues Buch.

Obwohl vielleicht meine bevorzugte Art, die Bildleistung zu verbessern, ist das Laden:

Dieses Bild lädt nur dann, wenn ein Benutzer die Seite nach unten scrollt, damit es für den Benutzer sichtbar ist - was es aus dem Laden der ersten Seite entfernt und das ist einfach großartig! Das erste Ladung eines Webseiten -Lightningfast zu machen ist eine große Sache.

Aber vielleicht gibt es Bilder, die niemals laden sollten. Vielleicht gibt es Situationen, in denen es besser wäre, wenn sich eine Person entscheiden könnte. Hier ist ein Beispiel: Nehmen Sie die reine Textversion von nprand für ein wenig herum. Ist es nicht ... einfach so toll?! Es ist lesbar! Überall gibt es keinen Müll, es respektiert mich als Benutzer und - süßer Himmel - ist es fast .

Also! Was wäre, wenn wir Bilder auf einer Website anzeigen könnten, aber nur dann, wenn sie angeklickt oder abgehackt werden? Wäre es nicht ordentlich, wenn wir einen Platzhalter zeigen und es gegen Klick gegen das echte Bild austauschen könnten? So etwas:

Nun, ich hatte hier zwei Gedanken darüber, wie man diesen Kerl baut (die goldene Regel ist, dass es nie eine Möglichkeit gibt, etwas im Web zu bauen).

Methode Nr. 1: Verwenden ohne SRC -Attribut

Wir können das SRC -Attribut eines Tag entfernen, um ein Bild zu verbergen. Wir könnten die Bilddatei dann in ein Attribut wie Daten-SRC oder so einsetzen, genau wie folgt:

Standardmäßig zeigen die meisten Browser ein börsenhaftes Bildsymbol, mit dem Sie wahrscheinlich vertraut sind:

Okay, es ist also irgendwie zugänglich. Ich schätze? Sie können das ALT -Tag automatisch auf dem Bildschirm sehen, aber mit einem hellen Schuss JavaScript können wir das SRC mit diesem Attribut austauschen:

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

Jetzt können wir einige Stile und ugh hinzufügen, oh nein:

Pfui. In einigen Browsern befindet sich unten ein winziges Symbol mit zerbrochenem Bild, wenn das Bild nicht geladen ist. Das Problem hierfür ist, dass Browser Ihnen keine Möglichkeit geben, das zerbrochene Bildsymbol mit CSS zu entfernen (und wir sollten wahrscheinlich sowieso nicht zugelassen werden). Es ist auch ein bisschen ärgerlich, den Alt -Text zu stylen. Wenn wir das Alt -Attribut insgesamt entfernen, ist das Symbol für zerbrochenes Bild verschwunden, obwohl dies das ohne JavaScript unbrauchbar macht. Das Entfernen dieses Alt-Textes ist also ein No-Go.

Wie ich sagte: ugh . Ich glaube nicht, dass es eine Möglichkeit gibt, diese Methode zum Laufen zu bringen (obwohl mir bitte das Gegenteil beweisen!).

Methode Nr. 2: Verwenden von Links zum Erstellen eines Bildes

Die andere Option, die wir haben, besteht darin, mit dem bescheidenen Hyperlink wie folgt zu beginnen:

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

Was, ja, noch nichts Kluges passiert - dies wird nur einen Link zu einem Bild machen:

Das funktioniert angänglich, oder? Wenn wir kein JavaScript haben, haben wir nur einen Link, auf den die Leute optional klicken können. In Bezug auf die Leistung kann es nicht viel schneller werden als einfacher Text!

Aber von hier können wir nach JavaScript greifen, um den Link vom Laden auf Klicken zu verhindern, das HREF -Attribut in diesem Link zu greifen, ein Bildelement zu erstellen und schließlich das Bild auf die Seite zu werfen und den alten Link zu entfernen, sobald wir fertig sind:

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();
  });
});

Wir könnten diesen Platzhalter -Link wahrscheinlich stylen, damit er etwas schöner aussieht als das, was ich unten habe. Dies ist jedoch nur ein Beispiel. Klicken Sie auf den Link, um das Bild erneut zu laden:

Und da hast du es! Es ist nicht bahnbrechend oder so, und ich bin sicher, dass jemand dies schon einmal getan hat. Aber wenn wir über die erste Farbe und die erste Last hinaus extrem radikal sein wollten, dann denke ich, dass dies eine okay-ide Lösung ist. Wenn wir eine Nur-Text-Website erstellen, dann denke ich, dass dies definitiv der richtige Weg ist.

Vielleicht könnten wir auch eine Webkomponente daraus machen oder sogar feststellen, ob jemand, das mit reduzierten Daten und nur Bilder hasprefers-daten und nur Bilder lädt, wenn jemand über genügend Daten oder etwas anderes verfügt. Was denken Sie?