📷 Broken Image Elemente grafisch optimieren

CSS-Tipp zur grafischen Optimierung von fehlerhaften Bildern im Web

Über den Geschmack zu manchen Standard-Designs in Browsern kann man wirklich streiten. Die Scroll-Bar, Tabellen, Radio-Buttons und Dropdowns sind nur wenige Elemente, die viele Designer in den Wahnsinn treiben.

Zum Glück können alle Elemente vom Webdesigner mit ein paar Kniffen und Drehungen bearbeitet werden.

Eines dieser weniger schönen Elemente sind Broken Images, die an den ungünstigsten Stellen auftauchen, wo eigentlich ein schönes, semantisch passendes Bild erscheinen sollte, das den Inhalt auf der Webseite visuell vielleicht nicht unterstreicht, aber die Webseite zumindest nicht Defekt erscheinen lässt.

Ein Broken Image kommt dann zustande, wenn der Redakteur oder Entwickler einen fehlerhaften Pfad zum Bild angibt, oder wenn das Bild aus verschiedenen Gründen nicht vom Server geladen werden kann.

Damit die Ausgabe nicht nur ein 16x16 Pixel großes Icon darstellt (wenn überhaupt), sondern ein Element, das das Webseiten-Design grafisch bewahrt, gibt es eine Reihe von Methoden die Du als Entwickler zur Webseite hinzufügen kannst.

Eine Performance-starke Variante ist die Verwendung von CSS, die Du in den <head>-Bereich Deiner Seite integrierst. In meinem Beispiel unterscheide ich zwischen notwendigen und optionalen Formatierungen.

Alle optionalen Formatierungen kannst Du nach belieben anpassen. Das sind zum Beispiel der Hintergrund, die Rahmenlinie und ein Textfeld, das auf diesen "Broken Image"-Block gesetzt wird.

Notwendige Formatierungen

img {
    min-height: 50px;
    width: 100%;
    display: block;
    position: relative;
}
img:before {
    content: " ";
    display: block;
    position: absolute;
    top: 0; 
    left: 0;
    height: -webkit-calc( 100% + 10px );
    height: calc( 100% + 10px );
    width: 100%;
}
img:after {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    width: 100%;
    height: -webkit-calc( 100% + 10px );
    height: calc( 100% + 10px );
}

Optionale Formatierungen

img:before {
    background-color: rgb(230,230,230);
    border: 2px dotted rgb(200,200,200);
    border-radius: 3px;
}
img:after {
    padding: 10px 0;
    border-radius: 3px;
    content: "\f127   Fehlerhaftes Bild '" attr(alt) "'";
    display: block;
    font-size: 16px;
    font-style: normal;
    font-family: FontAwesome;
    color: rgb(100,100,100);
    text-align: center;
}

Das Ergebnis sollte nun so aussehen:

Für die Klammer in der Textbox kannst Du den Zeichen-Code von FontAwesome verwenden. Alternativ kannst Du Dir in der Icon-Bibliothek von FontAwesome ein anderes Icon aussuchen.

Seit einiger Zeit gibt es über 800 Emojis und Icons in der ASCII-Codierung. Diese Sonderzeichen kannst Du auch ganz einfach kopieren und in den Content des CSS einfügen. Es ist möglich, dass das Icon nicht in Deinem Text-Editor erscheint. Ältere Rechner, die schon seit langem kein Update mehr erfahren haben können die ASCII-Icons ebenfalls nicht darstellen.

Wir verwenden in der grafischen Ausgabe des Broken Images das CSS-Pseudo-Element "attr(alt)", um das HTML title-Attribut wiederzuverwenden. Dadurch kann der Benutzer wenigstens erkennen, was hier dargestellt werden sollte.

Wenn du Bedenken zum Pseudo-Elements bezüglich der Browser-Kompatibilität haben solltest kann ich Dich beruhigen. Das Element wird sogar teilweise in Internet Explorer 8 unterstützt.

Browser Support des Pseudo-Elements 'attr'

Du hast natürlich freie Wahl, wie Du diese Box gestalten möchtest. Es ist auch möglich ein Hintergrundbild für die Broken Images zu setzen. Bei dieser Variante solltest Du aber sicherstellen, dass das gewählte Hintergrundbild immer aufrufbar ist.

Zudem kannst Du eine andere Schriftart, Schriftgröße, Farbe, Rahmenlinie oder sogar eine halbtransparente Farbfläche über das Hintergrundbild setzen. Eine halbtransparente Fläche setze ich immer sehr gerne bei Elementen auf der Schrift liegt, um den Text erkenntlicher zu aufzubereiten.

Eine Variante der optionalen Formatierung

img.bg:before {
    background-image: url( 'background.jpg' );
    background-size: cover;
    border: 2px solid rgb(0,0,0);
    border-radius: 3px;
}
img.bg:after {
    padding: 10px 0;
    background-color: rgba(0,0,0,.5);
    border-radius: 3px;
    content: "\f127   Fehlerhaftes Bild '" attr(alt) "'";
    display: block;
    font-size: 16px;
    font-style: normal;
    font-family: FontAwesome,Arial,sans-serif;
    color: rgb(255,255,255);
    text-align: center;
}

Hier kannst du das Ergebnis der alternativen Formatierung betrachten:

Den vollständigen Code findest du noch einmal auf Codepen:

See the Pen Broken Image Grafiken Bearbeiten by Dennis Artinger (@Codepalm) on CodePen.

Update vom 26.08.2019: Broken Image-Elemente mit Lazy-Loading

Ich habe ein wenig mit dem Lazy-Loading für Bilder und der Formatierung für Broken-Images experimentiert und konnte eine Verbesserung vornehmen.

Für die Erweiterung des Lazy-Loading-Scripts empfehle ich die Broken-Image Formatierungen auf der Webseite anzuwenden.

Alle Neuerungen des Lazy-Loading-Skripts und die Erweiterung der Broken-Image-Formatierung findest du im Beitrag Lazy Loading - Bilder nachladen lassen.