Prüfpunkt co2.symbol.rasterBilder
Warum sollen kleine Symbole als SVG statt als PNG kommen?
Kleine Symbole wie Telefonhörer, Briefumschlag oder Lupe stehen auf fast jeder Seite. Kommen sie als Rasterbild, ist meist jedes eine eigene Datei, und auf hochauflösenden Bildschirmen wirken sie oft weich. Die Prüfung meldet Bilder, die mit höchstens 48 Pixeln angezeigt werden und als PNG, JPEG, GIF oder BMP kommen, als Hinweis. Der Punktwert bleibt dabei gleich.
GitHub stellte seine Symbole 2016 auf SVG um
Die Entwicklerplattform GitHub lieferte ihre Symbole als Symbolschrift aus, bis sie im Februar 2016 auf SVG umstellte. Die Begründung im Blog des Unternehmens: Die Schrift wurde auf einfachen Bildschirmen oft unsauber dargestellt, in Browsern auf Basis von WebKit je nach Fensterbreite verschwommen; SVG rastet bei jeder Auflösung auf ganze Pixel ein. Manche Besucher ersetzen die Schriften einer Website durch eigene, Menschen mit Legasthenie etwa durch eine besser lesbare Schrift. Bei ihnen erschienen die Symbole als leere Kästchen, SVG dagegen wird unabhängig von der Schrift angezeigt. Weil die Symbole direkt im Dokument stehen, entfällt außerdem das kurze Aufblitzen, während die Schriftdatei lädt.
Eine SVG-Datei ist Code: woher Ihre Symbole kommen, zählt
Eine SVG-Datei ist Text im Format XML und kann Skripte enthalten. Läuft sie als Bild, per img, als CSS-Hintergrund oder über das SVG-Element image, schalten Browser JavaScript darin ab. Öffnet jemand dieselbe Datei direkt im Browser oder bindet sie per iframe, object oder embed ein, gilt diese Einschränkung nicht. Steht der SVG-Code im HTML, ist er Teil der Seite selbst. Nehmen Sie Symbole deshalb aus einer bekannten Sammlung oder von Ihrem Gestalter. WordPress führt SVG nicht in der Liste der Dateitypen, die sich in der Grundeinstellung hochladen lassen; wer SVG-Uploads freischaltet, sollte jede Datei beim Hochladen bereinigen lassen.
Was als Symbol zählt
Die Bildtabelle ordnet jedem img-Element eine Rolle zu. Ein Symbol ist ein Bild, das mit höchstens 48 Pixeln Breite angezeigt wird. Bilder bis 16 Pixel Naturbreite, Bilder mit höchstens 2 Pixeln Anzeigebreite und Dateien mit Namen wie spacer oder 1x1 führt die Tabelle als Platzhalter. Die Regel gilt für Symbole in PNG, JPEG, GIF und BMP; WebP und AVIF gelten als moderne Formate.
Warum SVG
Ein Symbol als SVG ist eine Handvoll Zeilen Text, oft unter einem Kilobyte, und bleibt bei jeder Größe und Pixeldichte scharf. Steht es direkt im Dokument, kommt es mit der Seite; mehrere Symbole in einer gemeinsamen Datei teilen sich eine Anfrage. Farbe und Größe lassen sich per CSS ändern, etwa für den Fokus oder den dunklen Modus.
Ein Name für Vorlesesoftware
Ein Symbol, das allein einen Link oder Knopf bildet, braucht einen Namen für Vorlesesoftware, etwa aria-label am Link. Ein Symbol neben sichtbarem Text bekommt aria-hidden="true"; Vorlesesoftware liest dann den Text einmal.
Beispiele
Telefon-Link
<a href="tel:+43123456789"><img src="/icons/telefon.png" width="24" height="24"></a><a href="tel:+43123456789" aria-label="Anrufen: +43 1 234 567 89">
<svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24">
<use href="/symbole.svg#telefon"/>
</svg>
</a>So gehen Sie es an
- Lesen Sie im Hinweis die Beispieladresse und das Format.
- Ersetzen Sie die Symbole durch SVG, aus einer freien Symbolsammlung oder vom Gestalter Ihrer Seite.
- Fassen Sie mehrere Symbole in einer SVG-Datei zusammen und binden Sie sie per use ein.
- Geben Sie Symbolen, die allein einen Link oder Knopf bilden, einen zugänglichen Namen.
Tipps aus der Praxis
- Setzen Sie in SVG-Symbolen fill="currentColor". Das Symbol übernimmt dann die Textfarbe des Links oder Knopfs, auch beim Überfahren mit der Maus, beim Fokus und im dunklen Modus, ohne zweite Datei.
- Sehen Sie in jede SVG-Datei aus dem Netz, bevor Sie sie einbauen. Ein Symbol braucht weder ein script-Element noch Attribute wie onload oder onclick; steht so etwas darin, nehmen Sie eine andere Quelle.
- Binden Sie aus einer großen Sammlung nur die Symbole ein, die Ihre Seite zeigt. Eine gemeinsame Datei mit Hunderten Symbolen lädt alle mit, auch wenn die Seite drei davon braucht.
Mehr zu diesem Thema
Weiter im Prüfbereich CO₂ & EmpCo
- Was darf meine Website seit dem 27. September 2026 über die Umwelt sagen?Seit 27.09.2026 gelten in Deutschland und Österreich die EmpCo-Regeln im UWG: was unzulässig ist, was erlaubt bleibt, warum Übergangsregeln nur Waren betreffen.
- Spart eine schlanke Website Geld, und was sagt der CO₂-Wert wirklich?Was eine schwere Website kostet: beim Hoster Cent, beim Kunden Wartezeit. Was der CO₂-Wert je Aufruf bedeutet, wo das Modell endet, wie KI-Anfragen dazu stehen.
- Wie kommt Ihr Hoster zum Ökostrom-Nachweis bei der Green Web Foundation?Führt die Green Web Foundation Ihren Hoster als „nicht grün“, verliert der CO₂-Punktwert 8 Punkte. So kommt der Nachweis zustande, und so gelingt der Wechsel.
- Was bedeutet der offene Ökostrom-Status Ihres Hostings?Ist der Ökostrom-Status Ihres Hosters offen oder die Abfrage gescheitert, nennt die Prüfakte das als Hinweis. So kommt Ihr Hoster zum Eintrag.
Dieser Prüfpunkt gehört zum Prüfbereich CO₂ & EmpCo; dort stehen alle Prüfpunkte im Überblick. Was die Prüfung insgesamt leistet, zeigt die Leistungsseite; wie ein Ergebnis zustande kommt, erklärt das Prüfverfahren. Alle Prüfbereiche im Überblick: Wissensbasis.
