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:

Broken Image - Alternative 1

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:

Broken Image - Alternative 2

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.

 

Codepalm
Broken Image Elemente grafisch optimieren