Acht Tipps, um die Bilder deiner Webseite aufzumotzen

Vor langer Zeit war das World Wide Web eine Höllenlandschaft aus nichts als Text. Dann erkannte irgendein Genie, dass man Bilder kodieren und in Browsern anzeigen lassen kann, und die Welt war nie wieder dieselbe. Aber mit dem Guten kam auch das Schlechte, denn Bilder sind kompliziert. Viele Webentwickler sind bis tief in die Nacht wach geblieben und haben sich den Kopf darüber zerbrochen, warum ihre wunderbare Kreation so langsam geworden ist, nur um herauszufinden, dass es an den Bildern lag.

Heute möchte ich über einige Tipps sprechen, mit denen die häufigsten Fallstricke bei der Arbeit mit Bildern vermieden werden können. Falls du eher ein visueller Lerntyp bist, haben wir auch ein Video zu diesem Thema. Nun aber zum eigentlichen Thema

Definitionen

Um uns das Leben zu erleichtern, werden wir zunächst ein paar Begriffe definieren: Seitenverhältnis, Anzeigegröße und Bildgröße.

Das Seitenverhältnis ist das proportionale Verhältnis zwischen der Breite und der Höhe eines Bildes. Wenn also die Breite eines Bildes 400 Pixel und seine Höhe 300 Pixel beträgt, ist das Seitenverhältnis 4:3.

Für die beiden anderen Begriffe stellen wir uns zwei Bilder mit demselben Seitenverhältnis 4:3 vor. Das erste ist ein Foto, das mit dem Smartphone aufgenommen wurde, das die Größe 5712 x 4284 hat. Wenn wir jedoch dasselbe Bild auf der Webseite anzeigen möchten, soll es 1024 x 768 groß sein. Die Bildgröße ist der erste Wert, d. h. wie groß das Bild tatsächlich ist, während die Anzeigegröße angibt, wie groß das Bild auf der Seite sein wird.

Tipp Nummer eins: Verwende das richtige Seitenverhältnis

Nachdem wir nun unsere Definition haben, wollen wir uns das Ganze etwas genauer ansehen. Die gebräuchlichsten Seitenverhältnisse sind 1:1 (quadratisch), 4:3 (wird bei alten Fernsehern oder Monitoren verwendet) und 16:9 (Breitbild).

Es gibt keine feste Regel, welches Seitenverhältnis verwendet werden sollte, es kann also das verwendet werden, was im Layout am besten aussieht. Die einzige Einschränkung ist, dass das Bildseitenverhältnis immer mit dem Seitenverhältnis des Bildschirms übereinstimmen sollte.

Was passiert also, wenn die Seitenverhältnisse nicht übereinstimmen? Der Browser nimmt an, wie das Bild aussehen soll, und diese Annahme entspricht nicht immer unseren Vorstellungen. Das Endergebnis kann je nach den verschiedenen Faktoren gequetscht, gestreckt oder beschnitten sein, und das lässt unsere Webseite nicht gut aussehen.

Was können wir also tun? Wir bearbeiten die Fotos oder ändern das Seitenverhältnis des Bildschirms. Beides ist möglich, aber die Bearbeitung der Fotos wäre meiner Meinung nach zu bevorzugen.

Ich weiß, dass es Fälle gibt, in denen dies nicht möglich ist, z. B. wenn der Chef auf das Layout festgelegt ist und das Bild von einer URL ohne benutzerdefinierte Größen stammt. Wenn wir uns in einem dieser Fälle wiederfinden, gibt es immer noch Möglichkeiten, das Problem zu umgehen. Sie können zum Beispiel die Eigenschaft object-fit entweder mit cover oder contain verwenden und sogar angeben, wo auf dem Bild wir den Fokus setzen wollen. Auf diese Weise sehen die Bilder besser aus, als wenn wir den Browser raten lassen.

Tipp Nummer zwei: Verwende die richtige Bildgröße

Laut Sprichwort sagt ein Bild mehr als tausend Worte, und heutzutage, wo Bilder so viele Daten enthalten, wie noch nie, war das nie wahrer. Bilder, die mit einem modernen Smartphone aufgenommen werden, beginnen heutzutage bei 3 MB und können noch größer werden. Hochauflösende Fotos von einem iPhone Pro Max zum Beispiel können bis zu 70 MB groß sein. Dies stellt kein Problem dar, wenn Sie die Bilder speichern, aber eine Herausforderung, wenn wir sie im Internet anzeigen wollen.

Wenn die Anzeigegröße und die Bildgröße nicht übereinstimmen, wird eines von zwei Dingen passieren. Entweder wird das Bild vergrößert oder verkleinert. Beides geschieht, um das Bild an die Anzeigegröße anzupassen, und beides ist suboptimal.

Wenn das Bild vergrößert wird, sieht es nicht gut aus, es ist aufgebläht und es fehlen sichtbare Details. Wird es verkleinert, laden wir eine größere Datei herunter, als wir eigentlich brauchen, und die Leistung leidet.

Um dies zu vermeiden, sollten wir sicherstellen, dass die Anzeigegröße und die Bildgröße übereinstimmen. Wenn wir unsere Bilder von einer API beziehen, prüfen wir, ob wir die Größe angeben können. Wenn wir die Bilder lokal bearbeiten, sollten wir uns die Zeit nehmen, sie vor dem Hochladen für das Web zu bearbeiten.

Tipp Nummer drei: Verwende responsive Bilder

Webseiten werden nicht mehr nur auf dem Computer angezeigt, sondern auch auf Telefonen, Tablets, Fernseher oder sogar einer intelligenten Teekanne.

All diese haben unterschiedliche Bildschirmgrößen und benötigen unterschiedliche Bildgrößen. Eine Größe passt also nicht mehr für alle. Bilder, die auf kleineren Bildschirmen angezeigt werden, brauchen nicht unbedingt so viele Details wie solche, die auf großen Bildschirmen angezeigt werden.

Dies wird zusätzlich dadurch erschwert, dass die heutigen mobilen Geräte unterschiedliche Pixeldichten aufweisen. Bei der Pixeldichte handelt es sich um die Anzahl der Pixel, die pro Zoll auf dem Bildschirm vorhanden sind. High-End-Telefone können beispielsweise eine extrem hohe Pixeldichte (PPI) aufweisen, während günstige Geräte eine niedrige Pixeldichte haben.

Glücklicherweise gibt es eine Möglichkeit, je nach Gerät unterschiedliche Versionen desselben Bildes zu erstellen. Diese Möglichkeit heißt source-set. Source Set ist ein HTML-Attribut, mit dem wir mehrere Größen für ein Bild angeben können und mit dem wir festlegen können, welche Bilder für welche Geräte geeignet sind.

Das srcset-Attribut ermöglicht es, mehrere Quellen für ein Bild anzugeben, für welche Anzeigegröße sie verwendet werden sollen, und sogar den Ziel-PPI. So lädt der Browser zum Beispiel auf Low-End-Handys mit geringer Dichte nur Bilder mit niedriger Qualität, auf dem Desktop die höchste Qualität und auf High-End-Smartphones Bilder in angemessener Größe.

Das hat zwar den Nachteil, dass wir mehr Bilder auf dem Server speichern müssen, aber da der Speicherplatz immer billiger wird, ist diese Vorgehensweise trotzdem empfehlenswert.

Tipp Nummer vier: Lege die Anzeigegröße fest

Wir haben bereits über die Anzeigegröße gesprochen, aber ein weiterer Punkt wird oft übersehen. Obwohl Browser uns nicht zwingen, die Anzeigegröße im Voraus festzulegen, ist es oft eine gute Idee, dies zu tun. Wenn wir das nicht tun, kann es zu hässlichen Layouts oder, schlimmer noch, zu Cumulative Layout Shift (CLS) kommen.

CLS ist ein sehr lästiges Problem auf Webseiten, das viele Ursachen hat, eine davon ist Bilder ohne Abmessungen. Wenn wir die Anzeigegröße nicht angeben, verschiebt sich das Layout, wenn das Bild schließlich geladen wird, um sich der Bildgröße anzupassen. Wenn Sie jedoch die Anzeigegröße im Voraus angeben, reserviert der Browser diesen Platz, sodass sich beim Laden des Bildes nichts am Layout ändert.

CLS ist ein umfangreiches Thema und verdient einen eigenen Blog-Beitrag oder ein Buch, aber wenn es um Bilder geht, ist es eine einfache Lösung: Gib immer die feste Anzeigegröße für ein Bild an.

Tipp Nummer fünf: Verwende Komprimierung

Bilddateien enthalten eine Menge Daten, was bei der Bearbeitung oder beim Drucken hilfreich ist. Aber wenn sie auf einer Webseite angezeigt werden, kann dies sehr viel unnötige Leistung beanspruchen. Das Letzte, was wir brauchen, ist, dass unsere Nutzer Hunderte von Megabyte an Bildern herunterladen.

Hier empfiehlt es sich, eine geeignete Komprimierung zu verwenden. Der Nachteil bei der Komprimierung ist, dass die Bilder umso weniger Details enthalten, je kleiner sie sind. Manche Leute plädieren für eine verlustfreie Komprimierung, aber ich glaube, es ist nicht weiter problematisch, wenn man ein paar Details verliert.

Es gibt viele Tools, die Ihnen dabei helfen, wie z. B. Tinify, aber es gibt keine Eierlegende Wollmilchsau. Du solltest mehrere ausprobieren und eines finden, das für dich geeignet ist.

Die gute Nachricht ist, dass einige dieser Tools sogar in CMS integriert werden können, wie Smush bei WordPress. Aber was auch immer du tust, verwenden keine unkomprimierten Bilddateien.

Apropos...

Tipp Nummer sechs: Verwende den richtigen Dateitypen

Bitte, um alles in der Welt, verwende KEINE BMPs auf deiner Webseite.

Tun Sie es einfach nicht!

Bilder gibt es in vielen Formaten, von BMP (kurz für Bitmap Image File), TIFF (Tagged Image File Format), JPEG (Joint Photographic Experts Group) und PNG (Portable Network Graphic), die Liste ist endlos.

Einige Bildformate eignen sich nicht für Webseiten, z. B. BMPs, TIFFs und Rohformate wie CR2 oder NEF von DSLR-Kameras. Das liegt daran, dass BMPs unkomprimiert sind, TIFFs von Browsern nicht mehr nativ unterstützt werden und beide Rohformate sind. Mozilla hat einen schönen Artikel über Bildformate, den du dir ansehen kannst.

Wir können die üblichen Bildformate problemlos verwenden, z. B. jpegs, pngs und gifs, aber wenn wir ambitioniert sind, können wir auch die sogenannten Next-Gen-Formate wie WebP und AVIF verwenden. Eine weitere hervorragende Option ist die Verwendung von Vektorgrafiken wie SVG, da diese in der Regel sehr kleine Dateigrößen haben und hoch skalierbar sind, sodass sie auch beim Vergrößern oder Verkleinern gut aussehen.

Es gibt keine falschen Entscheidungen... außer für BMPs, die sind eindeutig die falsche Wahl.

Tipp Nummer sieben: Verwende Lazy Loading

Lazy Loading ist eine Technik, die das Laden von Ressourcen aufschiebt, bis sie benötigt werden. Wenn wir zum Beispiel Bilder am Ende der Seite und außerhalb des Bildschirms haben, ist es sinnlos, sie zu Beginn zu laden. Dadurch wird das Rendering blockiert und die Benutzerfreundlichkeit beeinträchtigt.

Ein besserer Ansatz ist es, nur das zu laden, was wir brauchen, wenn wir es brauchen. Wenn wir also eine Reihe von Bildern auf der Seite haben, aber einige davon anfangs nicht auf dem Bildschirm zu sehen sind, warten wir mit dem Laden dieser Bilder. Dies kann mithilfe des HTML-Attributs loading geschehen, und die meisten Frontend-Frameworks verfügen über Komponenten, die dies für uns erledigen.

In diesem Zusammenhang sei angemerkt, dass Bilder nicht das Einzige sind, was Sie „lazy“ laden können. Sie können auch Javascript-Dateien, CSS, Schriftarten usw. „lazy“ laden.

Hier ist ein guter Artikel über Lazy Loading. Aber wie bei den anderen Tipps solltest du auch hier vorsichtig sein, denn wenn du es falsch machst, kann eine Leistungsverbesserung ausbleiben oder im schlimmsten Fall sogar zu einer Leistungsverschlechterung kommen.

Tipp Nummer acht: Nimm dir Zeit für Barrierefreiheit

Der letzte Tipp bezieht sich nicht auf die Leistung, sondern auf die Benutzerfreundlichkeit. In der heutigen Internetlandschaft spielt die Benutzerfreundlichkeit eine große Rolle, und Suchmaschinen wie Google berücksichtigen die Zugänglichkeit bei der Indizierung von Webseiten. Versuche, Bilder immer mit einem Alt-Tag zu versehen, und achte darauf, dass Bilder nicht zu klein oder unleserlich sind.

Das alt-Attribut liefert alternative Informationen für ein Bild, wenn ein Benutzer es nicht sehen kann, weil die Verbindung zu langsam ist, ein Fehler im src-Attribut vorliegt oder der Benutzer einen Bildschirmleser verwendet.

Verwende Bilder auch nicht übermäßig oder missbräuchlich, zum Beispiel durch viel Text in Bildern. Text in Bildern ist schwer zu indizieren und schadet daher der Bewertung.

Zugängliche und leistungsfähige Bilder verbessern die Wahrnehmung der Webseite durch den Nutzer und sorgen für eine bessere Platzierung in Suchmaschinen.

Fazit

Bilder sind großartig und machen aus Webseiten, die kaum mehr als wortreiche Bücher sind, Meisterwerke der Informationspräsentation. Aber sie müssen mit Sorgfalt behandelt werden, denn obwohl sie großartig sind, können sie, wenn sie falsch eingesetzt werden, der Webseite eher schaden als nützen. Aber letztendlich ist es gar nicht so schwer, die Bilder einer Webseite zu verbessern, und es lohnt sich die Zeit dafür zu nehmen.