Bei der mobilen Anpassung von Bildern ist die Behandlung von Text in Bildern ein häufiges, aber oft übersehenes Problem. Wenn der Text in Bildern auf dem Handy unscharf, zu klein oder verzerrt erscheint, beeinträchtigt dies direkt die Benutzererfahrung und das Unternehmensimage. Im Folgenden werden einige praktische Ansätze vorgestellt, die bei der Erstellung von Unternehmenswebsites als Referenz dienen können.
1. Kontrolle der tatsächlichen Schriftgröße im Bild
Wenn Bilder auf dem PC entworfen werden und der Text in Pixeln angegeben ist, kann der Text beim Skalieren auf den Handybildschirm sehr klein werden. Es wird empfohlen, die Schriftgröße bei der Bilderstellung etwas größer als üblich zu wählen, z. B. Fließtext nicht kleiner als 24px und Überschriften nicht kleiner als 36px. Gleichzeitig sollte die Bildbreite möglichst an die übliche mobile Breite (z. B. 750px) angepasst werden, um sicherzustellen, dass der Text nach der Skalierung noch lesbar ist. Alternativ können Vektorgrafiken (wie SVG) verwendet werden, um Verzerrungen zu vermeiden.
2. Verwendung von SVG oder Icon Font anstelle von Bildtext
Für Symbole, Schaltflächen oder kurze Texte sind SVG oder Icon Font die bessere Wahl. SVG ist ein Vektorformat, das beim Skalieren nicht unscharf wird und responsiv ist. Icon Font kann ebenfalls mit dem Text skaliert werden und ermöglicht Farbänderungen. So muss der Text nicht in das Bild eingebettet werden, was die Anpassung flexibler macht. Navigationssymbole und Teilen-Buttons eignen sich beispielsweise gut für diese Methode.
3. Ersetzen von Bildtext durch CSS-Text
Wenn der Text im Bild dekorativ ist, kann der Text direkt in HTML geschrieben und mit CSS-Stilen positioniert und über das Bild gelegt werden. Dadurch passt sich der Text an die Geräteschriftarteinstellungen an und wird zudem von Suchmaschinen leichter erfasst. Beispielsweise kann die Überschrift auf einem Banner direkt mit einem
-Tag versehen und dann per CSS über dem Bild positioniert werden.
4. Verwendung von responsiven Bildlösungen
Für Fälle, in denen Bilder unvermeidlich sind, kann die responsive Bildtechnik eingesetzt werden. Mit den HTML5-Attributen srcset und sizes können für verschiedene Bildschirmbreiten unterschiedliche Auflösungen bereitgestellt werden. Oder das
5. Vermeidung von Bildtext an kritischen Stellen
Wenn der Text Kerninhalte (wie Überschriften oder Beschreibungen) darstellt, sollte besser direkt HTML-Text verwendet werden, nicht Bildtext. Bildtext ist nachteilig für SEO und kann von Screenreadern nicht erkannt werden. Nur bei besonderen Schriftarten oder strengen Layoutanforderungen sollte erwogen werden, Text in Bilder einzubetten. Abwägend sollte bevorzugt Web Font verwendet werden, um spezielle Effekte zu erzielen.
Hinweis: Bei der Erstellung von Unternehmenswebsites eignet sich Text in Bildern meist zur Betonung von Atmosphäre oder Dekoration; Kerninformationen sollten als echter Text dargestellt werden. Dies erleichtert die mobile Anpassung und ist auch für die Inhaltsoptimierung vorteilhaft.
6. Testen auf verschiedenen Geräten
Unabhängig von der gewählten Methode sollte vor der Veröffentlichung auf echten Handys getestet werden. Überprüfen Sie, ob der Bildtext klar ist, die Schriftgröße angemessen ist und ob Anpassungen erforderlich sind. Erstellen Sie eine Testliste mit verschiedenen Bildschirmgrößen, Browsern und dem Verhalten beim Zoomen. Entdecken Sie Probleme frühzeitig und nehmen Sie Korrekturen vor.
Zusammenfassung
Der Schlüssel zur Anpassung von Text in Bildern für mobile Geräte liegt in der vorausschauenden Planung. Berücksichtigen Sie bereits in der Designphase die Darstellung auf mobilen Geräten und wählen Sie die geeignete technische Lösung. Priorisieren Sie echten Text, gefolgt von SVG oder Icon Font, und verwenden Sie Bildtext nur als letzte Option. So wird sowohl die mobile Erfahrung gewährleistet als auch die Wartung und Optimierung der Website erleichtert.
