Browser haben schon seit Jahren in vielen Fällen einen eher schlechten Geschmack in Standard-Formatierungen bewiesen. Eines dieser grafischen Fehlentscheidungen von Chrome und Co. sind Bilder, die nicht gefunden werden können.
Nicht nur, dass die Darstellung der „Broken Images“ den Fauxpas des Redakteurs grafisch Darstellt. Das kleine Bildchen kann es sogar schaffen, dass das hart erarbeitete CSS-Gerüst des Web-Entwicklers jeden Designer Tränen in die Augen treibt, wenn sich Elemente plötzlich anders anordnen als gewollt.
Ich habe Ihnen einen genialen CSS-Trick für Ihre Webseite vorbereitet, den Sie verwenden können, um „Broken Images“ elegant auszugeben.
Wir unterscheiden bei der CSS-Formatierung zwischen Notwendige und Editierbare Formatierungen. Die editierbaren Formatierungen können Sie nach belieben gestalten, wenn Sie sich ein wenig mit CSS auskennen.

Notwendige CSS Formatierungen für die Broken Image Elemente

Die notwendigen Formatierungen können Sie in Ihre globale CSS-Datei hinterlegen.
Sollte Ihre Webseite noch keine anderen Formatierungen für die Broken Images beinhalten, sollte es keine Rolle spielen, an welche Stelle Sie diese Formatierungen platzieren. Andernfalls empfehle ich diese Formatierungen als eines der letzten Elemente zu laden. Sie sollten auch darauf achten, dass zu viele CSS-Regeln eines Elements die Website-Performance spürbar reduzieren können.
Vorhandene Formatierungen für diese Elemente können von ihrem Webseiten-Template oder einem Plugin stammen. Diese sollten Sie im besten Fall entfernen, oder die neuen Elemente mit einer höheren Kaskade ausstatten.
img {
    min-height: 50px;
    position: relative;
}
img:before {
    content: " ";
    display: block;
    position: absolute;
    top: -10px; 
    left: 0;
    height: calc(100% + 10px);
    width: 100%;
}
img:after {
    position: absolute;
    top: 5px;
    left: 0px;
    width: 100%;
}

Editierbare Formatierungen

Die editierbaren Formatierungen können nach belieben bearbeitet werden, um die Broken Image Elemente an den Stil Ihrer Webseite anzupassen.
In diesen Formatierungen können Icons mit Font Awesome, Farben und Rahmen hinzugefügt werden. Ich verwende auch sehr gerne ein Hintergrund-Bild, dass zur Webseite passt.
img:before {
    background-color: rgb(230,230,230);
    border: 2px dotted rgb(200,200,200);
    border-radius: 3px;
}
img:after {
    display: block;
    content: "\f127" " Broken Image of " attr(alt);
    display: block;
    font-size: 16px;
    font-style: normal;
    font-family: FontAwesome;
    color: rgb(100,100,100);
    text-align: center;
}

Das Endergebnis

broken image
Um die Klammer in diesem Element zu verwenden, benötigen Sie Font Awesome, das in wenigen Schritten auf Ihrer Webseite eingebunden werden kann. In der Symbol-Bibliothek können Sie sich neben der Klammer ein anderes Icon für die Darstellung im Container aussuchen. Eine Alternative bieten ASCII-Symbole, die auf jedem Modernem Rechner bereits installiert sind. Eine kurze Google-Suche nach „ASCII Symbole“ sollte Ihnen helfen, Ihr gewünschtes Symbol im ASCII-Format zu finden.
In unserem Beispiel der Editierbaren Formatierungen findest Du ein Attribut „attr(alt)“. Dieses Pseudo-Element verwenden wir um das Alt-Attribut des Bildes grafisch in unseren Container zu setzen. Falls Sie sich Sorgen wegen der Verfügbarkeit auf verschiedenen Geräten machen, kann ich Sie beruhigen. Bei einer kurzen Suche auf CanIUse.com werden Sie feststellen, dass alle gängigen Browser mit diesem Pseudo-Element umgehen können.

Browser-Support des Pseudo-Elements "attr"

Weitere Beispiel-Formatierungen und eine Ausführlichere Erklärung finden Sie im Beitrag Broken Image Elemente Grafisch verbessern auf Codepalm.