Bilder per Klick anzeigen

Die meisten Bilder im Web sind überflüssig. Wenn ich mal ein wenig frech sein darf, 99% davon sind nicht einmal wirklich hilfreich (obwohl es seltene Ausnahmen gibt). Das liegt daran, dass Bilder den Text, den sie eigentlich unterstützen sollen, oft nicht ergänzen, sondern die Nutzer *belasten*, indem sie ewig zum Laden brauchen und Datenvolumina sprengen wie eine Art Performance-Steuer.

Glücklicherweise ist dies heute größtenteils ein Designproblem, denn Bilder performanter und benutzerfreundlicher zu gestalten ist so viel einfacher als früher. Wir haben bessere Bildformate wie WebP (und bald vielleicht JPEG XL). Wir haben natürlich die Magie von responsiven Bildern. Und es gibt unzählige großartige Tools wie ImageOptim, sowie Ressourcen wie Addy Osmans neues Buch.

Aber vielleicht ist meine Lieblingsmethode zur Verbesserung der Bildperformance das Lazy Loading

<img href="image.webp" alt="Image description" loading="lazy">

Dieses Bild wird erst geladen, wenn der Nutzer nach unten scrollt und es sichtbar wird – was es vom anfänglichen Seitenaufbau ausklammert und das ist einfach großartig! Die anfängliche Ladezeit einer Webseite blitzschnell zu machen, ist eine große Sache.

Aber vielleicht gibt es Bilder, die *nie* geladen werden sollten. Vielleicht gibt es Situationen, in denen es besser wäre, wenn eine Person sich dafür entscheiden könnte, sie zu sehen. Hier ist ein Beispiel: Nehmen Sie die reine Textversion von NPR und klicken Sie sich ein wenig durch. Ist sie nicht… einfach nur großartig?! Sie ist lesbar! Da ist kein Durcheinander überall, sie respektiert mich als Nutzer und – Himmel sei Dank – sie ist *schnell*.

Also! Was wäre, wenn wir Bilder auf einer Website anzeigen könnten, aber erst, wenn sie angeklickt oder angetippt werden? Wäre es nicht nett, wenn wir einen Platzhalter anzeigen und diesen beim Klick durch das echte Bild ersetzen könnten? So etwas wie hier

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

Methode #1: Verwenden von <img> ohne src-Attribut

Wir können das src-Attribut eines <img>-Tags entfernen, um ein Bild zu verbergen. Wir könnten die Bilddatei dann in ein Attribut legen, wie z.B. data-src oder so ähnlich, genau wie hier

<img data-src="image.jpg" src="" alt="Photograph of hot air balloons by Musab Al Rawahi. 144kb">

Standardmäßig zeigen die meisten Browser ein defektes Bildsymbol, das Ihnen wahrscheinlich vertraut ist

Okay, es ist also irgendwie barrierefrei. Ich schätze? Sie können den alt-Tag automatisch auf dem Bildschirm angezeigt sehen, aber mit einem leichten Schuss JavaScript können wir dann 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 hinzufügen und ugh, oh nein

Ugh. In einigen Browsern wird unten ein kleines defektes Bildsymbol angezeigt, wenn das Bild nicht geladen wurde. Das Problem hier ist, dass Browser Ihnen keine Möglichkeit bieten, das defekte Bildsymbol mit CSS zu entfernen (und wir sollten es wahrscheinlich sowieso nicht dürfen). Es ist auch ein wenig nervig, den alt-Text zu gestalten. Aber wenn wir das alt-Attribut komplett entfernen, dann ist das defekte Bildsymbol weg, obwohl dies das <img> ohne JavaScript unbrauchbar macht. Das Entfernen dieses alt-Textes ist also ein No-Go.

Wie ich sagte: *Ugh*. Ich glaube nicht, dass es einen Weg gibt, diese Methode zum Laufen zu bringen (obwohl beweisen Sie mir bitte das Gegenteil!).

Methode #2: Verwenden von Links zur Erstellung eines Bildes

Die andere Option, die wir haben, ist, mit dem bescheidenen Hyperlink zu beginnen, so wie hier

<a href="image.jpg">Photograph of hot air balloons by Musab Al Rawahi. 144kb<a>

Was, ja, bisher ist nichts Besonderes passiert – das wird einfach einen Link zu einem Bild rendern

Das funktioniert doch von der Barrierefreiheit her, oder? Wenn wir kein JavaScript haben, dann haben wir nur einen Link, auf den die Leute optional klicken können. Was die Performance angeht, kann es nicht schneller sein als einfacher Text!

Aber von hier aus können wir zu JavaScript greifen, um das Laden des Links beim Klicken zu stoppen, das href-Attribut innerhalb dieses Links zu holen, ein Bildelement zu erstellen und schließlich dieses Bild auf die Seite zu werfen und den alten Link zu entfernen, wenn 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 so gestalten, dass er etwas schöner aussieht als das, was ich unten habe. Aber das ist nur ein Beispiel. Klicken Sie ruhig auf den Link, um das Bild erneut zu laden

Und da haben Sie es! Es ist nichts Bahnbrechendes oder so etwas, und ich bin sicher, jemand hat das schon einmal gemacht. Aber wenn wir bei der Performance über die erste Anzeige und den anfänglichen Ladevorgang hinaus extrem radikal sein wollen, dann denke ich, ist das eine einigermaßen gute Lösung. Wenn wir eine reine Textwebsite erstellen, dann ist das meiner Meinung nach definitiv der richtige Weg.

Vielleicht könnten wir auch eine Webkomponente daraus machen, oder sogar erkennen, ob jemand prefers-reduced-data verwendet und dann Bilder nur laden, wenn jemand genug Daten hat oder so etwas. Was denken Sie?