Ein großes Originalfoto muss nicht in voller Auflösung an jedes Smartphone ausgeliefert werden. Gleichzeitig löst eine winzige Datei das Problem nicht, wenn sie auf einem größeren Bildschirm unscharf erscheint. Die Vorbereitung beginnt deshalb bei den tatsächlichen Bildflächen der Website.
Notieren Sie, wo ein Foto eingesetzt wird: als breite Artikelaufnahme, kleine Listenkarte oder Detailansicht. Diese Verwendungen können unterschiedliche Auflösungen und Ausschnitte benötigen. Bewahren Sie das Original separat auf, damit spätere Varianten nicht aus einer bereits stark verkleinerten Datei erzeugt werden müssen.
Abmessungen und Dateigröße getrennt betrachten
Pixelabmessungen beschreiben die verfügbare Bildinformation; die Dateigröße beeinflusst, wie viele Daten übertragen werden. Zwei gleich große Bilder können wegen Format, Inhalt und Kompression sehr unterschiedliche Dateien ergeben. Eine feste Kilobyte-Grenze für alle Motive ist deshalb kein vollständiges Qualitätskriterium.
Exportieren Sie zunächst eine für die vorgesehene Fläche geeignete Variante und vergleichen Sie sie im Browser mit dem Original. Achten Sie auf feine Kanten, Schrift und Flächen mit weichen Übergängen. Erhöhen Sie die Kompression nur so weit, dass die relevante Information erhalten bleibt. Ein Produktdetail darf nicht im sichtbaren Kompressionsmuster verschwinden.
Varianten statt unnötiger Vollauflösung
Die Einführung zu responsiven Bildern auf web.dev erklärt, wie srcset und sizes dem Browser mehrere Quellen und Angaben zur Darstellung anbieten. Dadurch kann er eine passende Ressource auswählen. Diese Angaben müssen zur tatsächlichen Gestaltung passen; eine Liste verschiedener Dateien allein genügt nicht.
Wenn ein kleiner Bildschirm einen anderen Bildausschnitt braucht, ist das eine inhaltliche Entscheidung. Prüfen Sie, ob das Hauptmotiv weiterhin sichtbar bleibt. Ein automatisch zentrierter Ausschnitt kann gerade die Hand, das Werkzeug oder den Produktteil entfernen, den der Artikel erklärt.
Hinterlegen Sie passende Breiten- und Höhenangaben beziehungsweise ein korrektes Seitenverhältnis in der Darstellung. Testen Sie, ob beim Laden unerwartete Verschiebungen auftreten. Vermeiden Sie es, dass ein Bild seine Umgebung erst nachträglich weit nach unten drückt.
Öffnen Sie die Seite anschließend mit einer schmalen Ansicht und prüfen Sie die tatsächlich geladene Ressource in den Browserwerkzeugen. Ein kleiner sichtbarer Rahmen bedeutet nicht automatisch, dass auch eine kleine Datei übertragen wurde. Kontrollieren Sie zudem die breite Ansicht und eine vergrößerte Darstellung.
Für die laufende Pflege lohnt sich ein klarer Exportablauf: Original behalten, Varianten nachvollziehbar benennen, sichtbare Qualität prüfen und die eingebundenen Pfade testen. So werden bei einem späteren Austausch nicht versehentlich wieder unkomprimierte Originale veröffentlicht.
