Eine Website kann ein kleines Foto anzeigen und trotzdem eine viel grössere Quelle herunterladen. Die sichtbare Breite im Seiteneditor zu ändern verändert nicht zwingend die übertragene Bilddatei. Für bessere Bildperformance musst du deshalb Datei und Einbindung gemeinsam betrachten. Ein kompakter Export hilft nur, wenn die Website ihn tatsächlich an der richtigen Stelle und in einer passenden Grösse ausliefert. Die Vorschau im Editor allein genügt dafür nicht.
Beginne mit einer einfachen Bestandsaufnahme. Welche Bilder stehen oben auf der Seite, welche wiederholen sich in Karten und welche gehören zu einer Galerie? Frage bei jedem nach seinem Beitrag. Ein überflüssiges Dekorationsfoto wegzulassen kann sinnvoller sein, als es aufwendig zu komprimieren. Behalte Bilder, die etwas erklären oder den Seitenzweck unterstützen. Bereite sie für ihren tatsächlichen Platz vor, statt jedes Kameraoriginal ungeprüft als fertige Webdatei zu verwenden.
Bildpunkte und Anzeige unterscheiden
Die Quelldatei hat Pixelabmessungen, das Layout weist ihr eine sichtbare Fläche zu. Das hängt zusammen, ist aber nicht dasselbe. Ein hochauflösendes Display kann von mehr Bildpunkten profitieren, als die scheinbare Breite vermuten lässt. Ein riesiges Original für jedes Gerät ist trotzdem keine sinnvolle Grundeinstellung. Erstelle passende Varianten für die vorgesehenen Ansichten und kontrolliere das Ergebnis auf den Geräten, die für dein Publikum wichtig sind.
Ein bewusst hypothetisches Beispiel: Für eine Karte mit 400 CSS-Pixeln Anzeigebreite könntest du Quellen mit 400 und 800 Bildpunkten Breite vergleichen. Das sind anschauliche Planungsmasse, keine allgemeine Vorgabe und kein gemessener Geschwindigkeitsgewinn. Die passende Wahl hängt vom tatsächlichen Layout und von der Pixeldichte ab. Vergleiche Klarheit und übertragene Bytes, statt alle Bilder nach einem festen Faktor zu vergrössern und das Ergebnis ungeprüft für optimal zu halten.
Die Seite passende Varianten wählen lassen
Mit responsiven Bildangaben kann eine Seite mehrere Quellen anbieten, statt überall dieselbe Datei zu senden. Der MDN-Ratgeber zu responsiven Bildern erklärt die entsprechenden HTML-Möglichkeiten. Dein Baukastensystem erzeugt solche Varianten möglicherweise bereits selbst. Prüfe seine Ausgabe, bevor du viele doppelte Dateien vorbereitest. Entscheidend ist, welche Fassung der Browser wirklich lädt, nicht wie viele Alternativen in der Mediathek liegen oder im Editor auswählbar sind.
Auch die Komposition braucht Aufmerksamkeit. Ein breites Desktopbanner kann ein Gesicht auf dem Telefon winzig darstellen oder wichtige Umgebung abschneiden. Dafür einen anderen Ausschnitt vorzubereiten ist eine gestalterische Entscheidung, unabhängig von der Dateikompression. Prüfe jede vorgesehene Ansicht mit dem echten Bild. Mehr Bildpunkte lösen keinen falschen Ausschnitt. Sie holen kein Motiv zurück, das ausserhalb des sichtbaren Rahmens liegt, und machen eine unverständliche mobile Komposition nicht automatisch besser.
Exporte nach Inhalt beurteilen
Teste geeignete Formate mit einer typischen Quelle. Vergleiche sie bei der vorgesehenen Darstellungsgrösse und untersuche schwierige Bereiche wie Laub, Haare, kleine Schrift oder weiche Verläufe. Moderne Formate können nützlich sein. Eine kleinere Datei mit störenden Artefakten ist aber nicht automatisch die richtige Wahl. Braucht dein Auslieferungsweg eine Alternative, gehört sie in die Umsetzung. Eine funktionierende Editorvorschau bestätigt nicht alle Browser und alle späteren Zugriffssituationen.
Unterscheide Fotografien von anderen Grafiken. Ein Bildschirmfoto voller Text braucht eine andere Behandlung als eine Landschaft. Ein transparentes Logo wiederum hat andere Anforderungen als beide. Wähle passende Ausgangsdateien und Exporte je nach Zweck. Die ganze Mediathek mit derselben Fotoeinstellung zu bearbeiten schafft höchstens oberflächliche Einheitlichkeit. Der Bilderkurs von web.dev bietet weitere Grundlagen dafür, solche Entscheidungen innerhalb eines vollständigen Website-Arbeitsablaufs zu treffen und zu überprüfen.
Das Ladeverhalten mitdenken
Die Kompression bestimmt nicht, wann ein Bild geladen wird. Ein wichtiges Bild der ersten Ansicht braucht eine andere Behandlung als eine lange Galerie unter einem Artikel. Kläre, wie dein Seitensystem damit umgeht, statt dieselbe Einstellung auf alles anzuwenden. Wird das Hauptbild unnötig verzögert, wirkt die Seite unvollständig. Werden alle Galerieoriginale sofort geladen, kann Datenverkehr für Bilder entstehen, die Besucher gar nicht ansehen oder nie erreichen.
Reserviere im Layout den nötigen Platz, damit der übrige Inhalt beim Erscheinen des Bildes nicht springt. Das ist eine Aufgabe der Seiteneinbindung und keine Funktion des Qualitätsreglers. Prüfe Proportionen und Abmessungen im fertigen Aufbau. Eine Datei kann gut optimiert sein, während ihre Umgebung weiterhin verrutscht. Korrigiere dann den Platzhalter oder die Gestaltung. Dieselbe Aufnahme immer weiter zu komprimieren verändert diese konkrete Ursache nicht und kostet möglicherweise unnötig sichtbare Bildqualität.
Die ausgelieferte Datei kontrollieren
Prüfe nach der üblichen Veröffentlichung eine typische mobile und eine grosse Ansicht. Mit Netzwerkwerkzeugen des Browsers oder entsprechenden Berichten des Seitensystems kontrollierst du Format, Abmessungen und Bytes des tatsächlich geladenen Bildes. Nutze einen frischen Aufruf, damit eine alte zwischengespeicherte Datei keinen Fehler verdeckt. Die Grösse in der Mediathek beweist nicht, was ein vorgeschalteter Auslieferungsdienst nach eigenen Umwandlungen oder Grössenanpassungen wirklich an den Besucher sendet.
Binde Geschwindigkeitsbehauptungen an Messungen. Ohne Vergleich vor und nach der Änderung beschreibst du die Dateiverkleinerung, statt einen Ladezeitgewinn zu erfinden. Auch eine gemessene Einsparung an Bytes wirkt sich nicht für alle Besucher gleich aus. Verbindung, Zwischenspeicher, Seitenaufbau und andere Ressourcen beeinflussen den Ablauf. Halte die Bedingungen eines Vergleichs fest. So bleibt später nachvollziehbar, was gemessen wurde und welche anderen Situationen noch gar nicht geprüft worden sind.
Einen wiederholbaren Ablauf behalten
Lagere Originale getrennt von Weitergabedateien und wähle beschreibende Dateinamen ohne unnötige private Angaben. Schreibe Alternativtexte, die den Zweck informativer Bilder vermitteln. Ein Dateiname oder eine Stichwortliste ersetzt diese Beschreibung nicht. Ergänze Bildlegenden, wenn sie ein technisches Detail verständlicher machen. Zugänglichkeit und inhaltliche Klarheit bleiben wichtig, auch wenn die unmittelbare Aufgabe gerade lautet, die übertragene Datenmenge einer Seite zu senken und ihre Bilder sinnvoller aufzubereiten.
Öffne zum Abschluss die Seite in den vorgesehenen Grössen und gehe den wichtigen Nutzungsweg durch. Kontrolliere Ausschnitt, Farbe, lesbare Details und ruhigen Seitenaufbau. Dokumentiere den gewählten Exportansatz, damit spätere Uploads nicht unbemerkt wieder übergrosse Dateien einführen. Ein brauchbarer Ablauf erzeugt Bilder, die für ihre Aufgabe zügig genug laden, ihre Aussage klar vermitteln und von der nächsten betreuenden Person ohne Rätsel nachvollzogen und wiederholt werden können.
Ein gemessenes Beispiel
Unsere selbst erstellte Testgrafik zeigt Farben, Kanten und feines Rauschen. Sie ist kein Kamerafoto. Wie klein dein Foto wird, hängt von seinem Inhalt ab.
JPEG, Qualität 90 → 65, gemessen mit dem dokumentierten sharp-Beispielgenerator: 85 % kleiner. Messwerte und Methode