Was bedeutet der UTF-8 Zeichensatz?

UTF-8 ist die heute übliche Zeichenkodierung im Web. Sie legt fest, wie ein Computer Buchstaben, Ziffern und Sonderzeichen als Zahlen speichert und wieder anzeigt. Wenn auf Ihrer Bildergalerie plötzlich Zeichen wie "Ã¼" statt "ü" auftauchen, steckt fast immer ein Zeichensatz-Problem dahinter. Wer einmal versteht, was UTF-8 leistet, behebt solche Anzeigefehler ruhig und gezielt.

Was bedeutet der UTF-8 Zeichensatz?: Zeichen-Glyph wird zu einer Reihe Binaerbloecke im Browser, ein verzerrtes Symbol hervorgehoben

Was der UTF-8 Zeichensatz überhaupt macht

Ein Computer kennt nur Zahlen. Damit aus der Zahl ein sichtbares "A" wird, braucht es eine Tabelle, die jeder Zahl ein Zeichen zuordnet. Genau das ist ein Zeichensatz. Ältere Tabellen wie latin1 (ISO-8859-1) decken nur westeuropäische Buchstaben ab. UTF-8 dagegen kann nahezu jedes Schriftzeichen der Welt darstellen, vom deutschen "ß" über griechische Buchstaben bis zu chinesischen Schriftzeichen.

Der entscheidende Punkt: Speichern und Anzeigen müssen denselben Zeichensatz verwenden. Wird ein Text als UTF-8 gespeichert, aber als latin1 gelesen, passt die Zuordnung nicht mehr. Aus einem Umlaut werden dann zwei oder drei seltsame Zeichen. Der Grund liegt in der Technik: UTF-8 speichert ein "ü" als zwei Bytes. Liest ein Programm diese zwei Bytes einzeln im alten Zeichensatz, zeigt es eben zwei Zeichen statt einem an. Das Bild "Ã¼" für "ü" ist deshalb kein Zufall, sondern immer dasselbe Muster.

Woran Sie ein Problem mit dem UTF-8 Zeichensatz erkennen

Typische Fehlerbilder verraten schnell, dass Speichern und Anzeigen nicht zusammenpassen. Die folgende Übersicht hilft beim Einordnen.

Anzeige im Browser	Gemeint war	Wahrscheinliche Ursache
BÃ¤ume	Bäume	UTF-8 als latin1 gelesen
B?ume	Bäume	Zeichen ging beim Umkodieren verloren
Bäume (Raute-Symbol)	Bäume	Ungültiges Byte, Browser zeigt Platzhalter

Tauchen solche Zeichen nur an einzelnen Stellen auf, liegt es oft an kopiertem Text aus einem anderen Programm. Sind ganze Seiten betroffen, stimmt meist die Grundeinstellung nicht. Prüfen Sie im Zweifel zuerst, ob das Problem überall gleich aussieht. Ein einheitliches Fehlerbild deutet auf eine falsche Einstellung hin, ein unregelmäßiges eher auf einzelne beschädigte Einträge.

Wo der UTF-8 Zeichensatz in der Galerie steht

Damit Umlaute überall sauber erscheinen, muss UTF-8 an mehreren Stellen zusammenpassen. Diese Punkte sollten Sie der Reihe nach prüfen.

Die HTML-Angabe im Kopf der Seite, also die Meta-Angabe zum Zeichensatz.
Die Datenbank und ihre Tabellen, in denen die Texte und Bildbeschreibungen liegen.
Die Verbindung zwischen Script und Datenbank, die ebenfalls auf UTF-8 stehen muss.
Die Dateien selbst, die im Editor als UTF-8 ohne BOM gespeichert werden sollten.

Stimmt eine dieser Stellen nicht, reicht das für falsche Umlaute. Deshalb lohnt es sich, alle vier Punkte einzeln durchzugehen, statt nur an einer Stelle zu raten.

Warum BOM Ärger machen kann

Manche Editoren setzen am Dateianfang ein unsichtbares Markierungszeichen, das sogenannte BOM. Es soll den Zeichensatz kennzeichnen, führt bei PHP-Dateien aber leicht zu Leerzeilen oder Fehlermeldungen. Speichern Sie Script-Dateien daher bewusst als "UTF-8 ohne BOM".

UTF-8 Zeichensatz: Schritt für Schritt zur Anzeige

Gehen Sie bei einem Zeichensatz-Problem ruhig und der Reihe nach vor, dann finden Sie die Ursache zuverlässig.

Sichern Sie zuerst die Datenbank, bevor Sie etwas an der Kodierung ändern.
Prüfen Sie die Meta-Angabe im Seitenkopf und stellen Sie sie auf UTF-8.
Kontrollieren Sie die Kodierung von Datenbank, Tabellen und Verbindung.
Öffnen Sie betroffene Dateien im Editor und speichern Sie sie als UTF-8 ohne BOM.
Laden Sie die Seite neu und vergleichen Sie ein paar Umlaute mit dem Original.

Wenn alle Glieder dieser Kette auf UTF-8 stehen, verschwinden die kaputten Zeichen. Sollte ein einzelner Eintrag weiter falsch sein, war er vermutlich schon beschädigt gespeichert und muss neu eingegeben werden. Mit diesem Wissen verlieren Anzeigefehler ihren Schrecken, und Ihre Bildbeschreibungen erscheinen wieder genau so, wie Sie sie geschrieben haben.

Häufige Fragen

Wer mit Buchstaben wie "Ã¼" statt "ü" kämpft, hat meist eine dieser drei Fragen im Kopf.

Welche Meta-Angabe gehört bei UTF-8 in den Seitenkopf?

Im <head> der Seite steht <meta charset="utf-8">, möglichst als erste Zeile vor anderen Angaben. Damit weiß der Browser sofort, dass er den Text als UTF-8 lesen soll, und Umlaute erscheinen korrekt.

Warum reicht es nicht, nur die HTML-Seite auf UTF-8 zu stellen?

Speichern und Anzeigen müssen denselben Zeichensatz nutzen. Neben der Meta-Angabe müssen auch die Datenbank, die Verbindung zwischen Script und Datenbank sowie die Datei selbst auf UTF-8 stehen. Bei der Datenbankverbindung sorgt der Befehl SET NAMES utf8mb4 dafür, dass Umlaute richtig übertragen werden.

Was ist der Unterschied zwischen utf8 und utf8mb4 in der Datenbank?

utf8mb4 ist die vollständige UTF-8-Variante in MySQL und kann auch Emojis und seltene Zeichen speichern, das ältere utf8 nicht. Für neue Tabellen ist utf8mb4 als Collation die sichere Wahl, damit später nichts verloren geht.