Beim Aktualisieren von Website-Bildern beeinflusst die Darstellung auf mobilen Geräten direkt die Benutzererfahrung. Für Anfänger ist es hilfreich, die folgenden Punkte im Voraus vorzubereiten, um häufige Probleme wie unscharfe Bilder, langsames Laden oder unvollständige Anzeige zu vermeiden.
1. Bildgröße und Seitenverhältnis festlegen
Die Bildschirmbreite mobiler Geräte liegt normalerweise bei 375–414 px (physische Pixel), aber das Geräte-Pixel-Verhältnis (DPR) muss berücksichtigt werden. Empfohlen werden folgende Größen:
- Vollbild-Bilder: Breite mindestens 750 px (375 px × 2), Höhe entsprechend dem Seitenverhältnis anpassen.
- Inhaltsbilder: Breite etwa 90 % der Bildschirmbreite, also 340–370 px, bei 2x-Auflösung 680–740 px.
- Symbole oder kleine Bilder: In doppelter Größe der tatsächlichen Anzeige vorbereiten, z. B. für 50×50 px Anzeige 100×100 px.
Vermeiden Sie es, große Originalbilder direkt zu verkleinern, da dies Datenverkehr verschwendet. Verwenden Sie auch keine kleinen Bilder, die gestreckt werden, da dies zu Unschärfe führt.
2. Geeignetes Bildformat wählen
Für mobile Geräte sollten Ladegeschwindigkeit und Kompatibilität priorisiert werden:
- JPEG: Geeignet für farbenreiche Fotos, hohe Komprimierungsrate.
- PNG: Geeignet für Symbole oder einfache Grafiken mit transparentem Hintergrund.
- WebP: 25–35 % kleiner als JPEG, unterstützt Transparenz, aber ältere Geräte unterstützen es möglicherweise nicht. Bieten Sie JPEG als Fallback an.
Für Anfänger empfiehlt es sich, sowohl JPEG- als auch WebP-Versionen vorzubereiten und per Code die Browserunterstützung zu prüfen. Bei begrenzten technischen Kenntnissen kann zunächst JPEG verwendet und später optimiert werden.
3. Bilder komprimieren, um Dateigröße zu kontrollieren
Mobile Netzwerke variieren stark. Zu große Bilddateien führen zu langsamem Laden. Empfohlene Komprimierungsbereiche:
- Hauptseiten-Bilder: Unter 200 KB, idealerweise unter 100 KB.
- Inhaltsbilder: Unter 100 KB, etwa 50 KB.
- Symbole: Unter 10 KB.
Nutzen Sie Tools wie TinyPNG oder Squoosh zur Online-Komprimierung, während die visuelle Qualität akzeptabel bleibt.
4. Alt-Texte für Bilder schreiben
Jedes mobile Bild benötigt ein Alt-Attribut für Suchmaschinen und Hilfstechnologien (z. B. Screenreader). Der Alt-Text sollte den Bildinhalt kurz beschreiben, z. B. „Foto des Empfangsbereichs des Unternehmens“ statt „Bild1“. Vermeiden Sie Keyword-Stuffing; eine natürliche Beschreibung reicht aus.
5. Verschiedene Auflösungsversionen vorbereiten
Mobile Geräte haben unterschiedliche Bildschirmdichten. Bereiten Sie mindestens zwei Auflösungsversionen vor:
- 1x (Standardauflösung): Für normale Bildschirme.
- 2x (HD): Für Retina- und andere HD-Bildschirme.
Bei hohem Traffic können Sie auch 3x-Versionen in Betracht ziehen. Verwenden Sie CSS oder das srcset-Attribut, um die verschiedenen Versionen bereitzustellen und den Browser je nach Bedarf laden zu lassen.
6. Bilder auf mobilen Geräten testen
Testen Sie vor dem Update unbedingt auf echten Smartphones oder im Browser-Emulator:
- Wird das Bild vollständig angezeigt? Gibt es Verzerrungen oder Beschnitt?
- Ist die Ladegeschwindigkeit akzeptabel? Nutzen Sie das Netzwerk-Panel der Chrome-Entwicklertools, um die Ladezeit zu prüfen.
- Führt das Klicken auf das Bild zum erwarteten Link (falls zutreffend)?
Wenn Farbunterschiede zwischen iOS und Android auffallen, passen Sie das Farbprofil auf sRGB an.
7. Originalbilder und Änderungsprotokoll sichern
Anfänger sollten die hochauflösenden Originalbilder aufbewahren, um spätere Änderungen zu ermöglichen. Notieren Sie bei jedem Update den Bildnamen, die Größe, das Komprimierungsverhältnis und den Upload-Ort, um Probleme leichter nachvollziehen zu können.
Mit diesen Vorbereitungen wird der Prozess der Bildaktualisierung auf mobilen Geräten reibungsloser und verbessert die Benutzererfahrung. Bei Unsicherheiten zu technischen Details wenden Sie sich an Ihren Website-Entwickler oder konsultieren Sie die offizielle Dokumentation.
