Bilder fürs Web optimieren: Formate, Rechte, Metadaten und Ladezeit

Bilder sind auf den meisten Websites der größte Datentransferblock, und sie entscheiden über mehr als die Ladezeit: über Barrierefreiheit, Datenschutz und Abmahnungsrisiko. Ein Kameraoriginal mit 4.000 Pixeln und 5 MB in eine Website einzubinden ist dabei nur der sichtbarste Fehler. Dieser Ratgeber führt durch den kompletten Weg vom Foto bis zur ausgelieferten Datei: Rechte klären, Metadaten prüfen, zuschneiden, komprimieren, korrekt einbinden und beschreiben. Jeder Schritt verlinkt das passende kostenlose Tool, alles läuft im Browser ohne Upload.

Rechte zuerst: Woher darf dein Bild kommen?

Bevor du an Formate und Kilobyte denkst, steht die Fragenkette, die jede Bildnutzung entscheidet: Wer hat das Bild gemacht, woher stammt die Datei, welche konkrete Lizenz gilt, und sind alle Bedingungen erfüllt? Ein Bild, das in der Google-Bildersuche auftaucht, ist dadurch nicht frei nutzbar. Das Urheberrecht schützt Lichtbilder unabhängig davon, wo sie auffindbar sind, und für die Veröffentlichung auf einer Website brauchst du eine passende Rechtegrundlage.

Die gängigen Creative-Commons-Varianten im Vergleich:

Zwei Präzisierungen verhindern Fehlschlüsse. Erstens: Nicht jedes Commons-Bild ist CC0, Wikimedia mischt CC0, gemeinfreie Werke und verschiedene freie Lizenzen, die Prüfung gilt immer für die einzelne Dateibeschreibungsseite. Zweitens: ShareAlike betrifft eine verbreitete Bearbeitung, nicht automatisch jede Zusammenstellung, und ein einfacher Zuschnitt fürs Layout ist rechtlich nicht in jedem Fall eine Bearbeitung.

Was eine Abmahnung kosten kann, zeigt ein konkretes BGH-Urteil: Beim sogenannten Sportwagenfoto-Urteil vom 13. September 2018 gab es neben der Lizenzanalogie von 100 Euro einen zusätzlichen Betrag von 100 Euro wegen fehlender Namensnennung, also einen Zuschlag von 100 Prozent. Das ist eine Entscheidung, keine Preisliste. Weitere Praxispunkte: Vorformulierte Unterlassungserklärungen mit Vertragsstrafen nicht ungeprüft unterschreiben, Kanzleien nennen als Beispiel Beträge ab 5.001 Euro, und ein Bild aus dem Artikel zu nehmen erledigt nicht automatisch einen Unterlassungsanspruch. Bei einer Abmahnung gilt: Schreiben und Frist sichern, Lizenznachweise prüfen lassen, nicht ignorieren und nicht blind zahlen.

Für jedes verwendete Bild lohnt ein kleiner interner Nachweis: Fundstelle, Urheber, konkrete Lizenz mit Fassung, Abrufdatum, erlaubte Nutzungen. CC0 verlangt keine Namensnennung, die Herkunft dokumentierst du trotzdem, denn die Freigabe des tatsächlichen Rechteinhabers ist keine Garantie, die Commons-Plattform selbst übernimmt keine Gewähr für jede Lizenzangabe.

Metadaten: Was in einer Fotodatei steckt

Ein Foto ist mehr als sein sichtbarer Inhalt. Der EXIF-Standard in der aktuellen Fassung 3.1 von Januar 2026 kennt Felder für Kamerahersteller und Modell, Aufnahmezeit, GPS-Breite und GPS-Länge, GPS-Höhe und sogar Geräte- und Objektivseriennummern. Dazu kommen XMP- und IPTC-Strukturen mit Beschreibungen, Schlagwörtern, abgebildeten Personen und Rechteangaben. Nicht jedes Feld ist in jeder Datei gefüllt, aber die Risiken sind konkret:

Die Szenarien sind Alltagsfälle: Ein Fahrrad- oder Schmuckfoto für die Kleinanzeige kann über GPS den Lagerort verraten, ein Homeoffice-Schreibtischfoto die Wohnadresse eingrenzen, Kinderfotos können über wiederkehrende Orts- und Zeitangaben Alltagsroutinen erkennbar machen. Und ein zugeschnittenes Foto kann über die eingebettete Vorschau noch die ursprünglichen Inhalte enthalten, Apple dokumentiert ausdrücklich eine Teilen-Option, die das Original mit Bearbeitungshistorie überträgt.

Was Plattformen und Bordmittel tun, und was nicht. Der IPTC-Plattformtest von 2019 zeigte für Twitter entfernte Metadaten in gespeicherten Ausgabebildern und für Facebook eine weitgehende Entfernung mit verbliebenen Rechtefeldern. Das ist ein historischer Test, keine Garantie für jeden Exportweg. Belastbar ist die Gegenrichtung: Eine forensische Untersuchung von 2025 fand bei Dokumenten-Übertragungswegen und direkter E-Mail-Zustellung vollständige EXIF-Erhaltung inklusive identischer Dateihashes. Wer ein Foto als Dateianhang verschickt, überträgt die Metadaten mit.

Die Bordmittel sind Teillösungen. Am iPhone schaltet das Teilen-Menü unter Optionen den Standort aus, Kameramodell und Aufnahmezeit bleiben trotzdem in der Datei. Unter Android stellt die Kamera-App die Standort-Tags ab, der Name der Einstellung ist herstellerabhängig, Google dokumentiert Save location bei eigenen Geräten und Location tags bei Samsung. Der Windows-Explorer-Weg über Eigenschaften und Eigenschaften entfernen ist nach einer Untersuchung von Didier Stevens von 2022 nicht als vollständige Bereinigung zu empfehlen, die EXIF-Verzeichniseinträge verschwanden, zugehörige Zeichenketten lagen aber noch im Datenblock. Die macOS-Vorschau entfernt gezielt Ortsdaten, dokumentiert ist das nicht als Komplettlöschmodus.

Der zuverlässige Weg: Vor der Veröffentlichung die konkrete Datei prüfen, dann gezielt bereinigen. Der Metadaten-Inspektor zeigt, was in der Datei steckt, GPS, Kameramodell, Zeitstempel. Der Bild-Metadaten-Entferner entfernt EXIF-, XMP- und ICC-Daten ohne erneute Kompression bei JPEG, PNG und WebP und liest HEIC- und AVIF-Dateien. Danach die exportierte Datei erneut prüfen, nicht nur die Vorschau. Ein Grenzfall gehört dazu: § 95c UrhG schützt elektronische Informationen zur Rechtewahrnehmung, bei fremden Bildern deshalb Rechtevermerke nicht ungeprüft löschen.

Neuere Entwicklung am Rande: Der C2PA-Standard für Content Credentials signiert Herkunfts- und Bearbeitungsinformationen kryptografisch und arbeitet mit EXIF, IPTC und XMP zusammen. Herkunftsangaben sind damit überprüfbarer, aber Herkunft ist nicht Wahrheit, und die löschbare Einbettung ist nicht das ganze System.

Formate 2026: WebP als Standard, AVIF als Option, JPEG als Rückfall

Die Formatfrage ist 2026 keine Glaubensfrage mehr, sondern eine Abwägung von Dateigröße, Browserunterstützung und Erzeugungsaufwand. Die Ausgangszahlen:

Drei Einordnungen, die viele Ratgeber veralten lassen. Erstens JPEG XL: Die Aussage praktisch tot fürs Web ist überholt, Chrome dekodiert JPEG XL ab Version 155 standardmäßig, Mozilla ab Firefox 158, Safari unterstützt seit Version 17 teilweise, Edge bleibt bis einschließlich 155 außen vor. Für die Google-Bildersuche steht JPEG XL trotzdem nicht in der unterstützten Formatenliste. Zweitens AVIF: Die halbe Dateigröße ist ein Median aus einem älteren Benchmark, kein Versprechen für jede Datei, und in einem kleinen Benchmark von Oktober 2026 fielen einzelne Motive mit AVIF größer aus als mit WebP. Die Kodierzeit war dort im Median 7,6-mal höher als bei WebP, einmalig erstellte und zwischengespeicherte Dateien relativieren das. Drittens die Google-Formatenliste: Die Bildersuche unterstützt BMP, GIF, JPEG, PNG, WebP, SVG und AVIF, dokumentiert in der deutschen Fassung der Bild-SEO-Seite mit Stand 4. März 2026. HEIC und JPEG XL fehlen dort.

Die Kompressionspraxis lässt sich auf fünf Regeln verdichten:

1. Erst zuschneiden und skalieren, dann komprimieren. Die Pixelmaße richten sich nach der Anzeigebreite im Layout, nicht nach der Kamera. Der Bild Resizer ändert Größe, schneidet zu und dreht.
2. Verlustfrei arbeiten, bis das Motiv fertig ist. Jede erneute verlustbehaftete Kodierung kann Verluste aufsummieren. Erzeuge jede Webvariante aus dem Original oder einem verlustfreien Master, nicht aus der vorherigen Exportdatei. Optionale Bearbeitungsschritte bündelt der Bildfilter vor dem finalen Export.
3. Qualität 75 bis 85 als Startbereich testen. Die Zahl ist keine Qualitätsprozentangabe und nicht zwischen Formaten vergleichbar. Für AVIF den JPEG- oder WebP-Wert nicht einfach kopieren.
4. Die Ausgabe wirklich ansehen. Himmel, Haut, Haare, kleine Schrift und transparente Ränder auf Blockmuster, Farbstufen und Säume prüfen. Ein eingehaltenes KB-Budget beweist keine gute Qualität.
5. iPhone-Fotos vorher umwandeln. HEIC ist kein browserübergreifendes Webformat, der Bildkonverter nimmt HEIC an und erzeugt webtaugliche Ausgaben.

Der Bildkomprimierer arbeitet direkt im Browser, lädt nichts hoch und exportiert JPEG, PNG und WebP. Zwei Grenzen ehrlich benannt: Es gibt keine garantierte Zielgröße, und AVIF-Export ist nicht dabei. Wer AVIF testen will, braucht ein zusätzliches Werkzeug, die Ausgabe prüfst du dann wieder mit den gleichen Augen.

Realistische Dateigrößen-Ziele als Arbeitswerte, keine Google-Regeln:

Die Werte stammen aus Anbieter-Ratgebern, TinyThis nennt die Pixel- und KB-Spannen, Shopify nennt für fertige Webbilder 200 KB oder weniger als Faustregel. Zwei Zusätze: Bei Retina-Displays verdoppelt sich die Quellbreite für dieselbe CSS-Breite, Shopify nennt als Beispiel 400 mal 400 Pixel für ein 200 mal 200 CSS-Pixel-Feld, das betrifft die Pixelmaße, nicht automatisch die Kilobyte. Und ein Motiv mit feiner Vegetation braucht bei gleichen Abmessungen mehr Daten als eine ruhige Fläche, das Budget ist ein Ziel, kein Versprechen.

Für die Formatgrundlagen im Überblick über alle Dateitypen hinweg, von CSV bis MP4, hat das Handbuch einen eigenen Artikel zu Datenformaten.

Korrekt einbinden: Platzreservierung, Ladeverhalten und Priorität

Die Einbindung entscheidet, ob ein optimiertes Bild auch eine schnelle Seite ergibt. Drei Attribute-Gruppen, drei verschiedene Aufgaben:

Zu width und height die präzise Lage: Die HTML-Maße sind die robuste Standardempfehlung, web.dev nennt CSS aspect-ratio ausdrücklich als Alternative zur Platzreservierung. Ein vom Original abweichendes Verhältnis braucht dann object-fit gegen Verzerrung. Für normale Inhaltsbilder gilt trotzdem: Beide HTML-Attribute setzen, dazu die responsive CSS-Regeln max-width und height auto.

Zum Ladeverhalten die klare Trennung: Lazy Loading gehört auf Bilder weiter unten, niemals auf das wahrscheinliche LCP-Bild, ein kleineres Bild kommt trotzdem spät, wenn es erst spät angefordert wird. Fetch Priority dokumentiert web.dev an einem Google-Flights-Test mit LCP-Verbesserung von 2,6 auf 1,9 Sekunden, ein historisches Experiment, kein zugesicherter Effekt auf jeder Website. decoding="async" ist ein Hinweis, dass andere Inhalte nicht auf die Bilddekodierung warten, kein LCP-Garant.

Ein Stolperstein für die Bildersuche: Google indexiert nur Bilder, die über das src-Attribut eines img-Elements erreichbar sind, auch innerhalb von picture. CSS-Hintergrundbilder werden nicht indexiert und erhalten kein natives Lazy Loading über das HTML-Attribut loading. Für Bilder, die in Google Images auffindbar sein sollen, gilt also: img-Tag mit echter src-URL.

Bei responsiven Bildern beschreibt srcset die tatsächliche Pixelbreite der Quelldateien, sizes dagegen die erwartete Anzeigebreite im Layout. Fehlt sizes, nimmt der Browser 100vw an, also die volle Fensterbreite, was bei schmaleren Inhaltsbildern zu unnötig großen Downloads führt. In PageSpeed Insights sind die früheren Prüfungen Properly size images und Serve images in next-gen formats seit Lighthouse 13 im Insight Improve image delivery zusammengeführt, die Felddaten decken die letzten 28 Tage ab.

Alt-Texte: Ein Attribut, zwei Aufgaben

Der Alt-Text dient Menschen, die das Bild nicht sehen können, und Suchmaschinen, die das Motiv einordnen. WCAG 1.1.1 verlangt zweckentsprechende Textalternativen, Google nutzt den Alt-Text zusammen mit Computer Vision und Seitenkontext. Der W3C-Entscheidungsbaum sortiert die Fälle:

Schreibregeln mit Beispielen: Beschreibe die Information, nicht das Objekt. Statt alt="Foto von einem Werkzeug" besser alt="Schraubzwinge fixiert zwei Holzbretter im rechten Winkel". Statt alt="vorher nachher" besser eine Aussage über das sichtbare Ergebnis, etwa die ausgefransten Kanten am vergrößerten Schriftzug. Etwa 150 Zeichen sind ein Richtwert, keine technische Grenze. Nicht mit Bild von oder Foto von anfangen, Screenreader kennzeichnen Bilder bereits. Und keine Keyword-Listen: Google warnt, dass Keyword-Stuffing im Alt-Attribut zu einer Spam-Einstufung führen kann.

Der häufigste Fehler dabei ist das fehlende Attribut statt des leeren Werts: Lässt du alt komplett weg, lesen manche Screenreader den Dateinamen vor. Rein dekorative Bilder bekommen also ausdrücklich ein leeres alt="". Wie verbreitet die Lücken sind, zeigt der Web Almanac 2024: Aus den gerundeten Desktop-Stichprobenwerten ergeben sich rund 15 Prozent Bilder ohne Alt-Attribut und rund 30 Prozent mit leerem Wert, also ungefähr 55 Prozent mit nichtleerem Alt-Text. Ein nichtleerer Wert beweist dabei keine gute Beschreibung, ein Dateiname als Alt-Text zählt auch als nichtleer.

Der Dateiname selbst ist ein kleines Verständnissignal: Google nennt my-new-black-kitten.jpg als besseres Beispiel als IMG00023.JPG und beschreibt Dateinamen als sehr schwache Hinweise auf das Motiv. Ein Rankingversprechen ist das nicht, eine sprechende Benennung kostet aber nichts.

Für Grafiken mit überlagertem Text oder bedeutungstragenden Icons gilt zusätzlich WCAG 1.4.11: mindestens 3:1 Kontrast zu angrenzenden Farben für zum Verständnis erforderliche grafische Bestandteile. Der Kontrast-Rechner prüft Farbkombinationen nach WCAG, und für Layoutplanung mit reservierten Bildflächen gibt es den Platzhalter-Bild-Generator. Der Farbwähler hilft bei Farbwerten aus einem Motiv, etwa für passend gesetzte Bildunterschriften.

Bilder und Core Web Vitals

Bilder wirken auf zwei der drei Core Web Vitals direkt: Auf den Largest Contentful Paint, wenn das Hauptbild spät angefordert, langsam übertragen oder spät gerendert wird, und auf den Cumulative Layout Shift, wenn nachladende Bilder ohne Platzreservierung Inhalt verschieben. Die Zielwerte am 75. Perzentil: LCP höchstens 2,5 Sekunden, INP höchstens 200 Millisekunden, CLS höchstens 0,1.

Die LCP-Diagnose trennt vier Teilzeiten: Time to First Byte, Resource Load Delay, Resource Load Duration und Element Render Delay. Eine isolierte Optimierung kann Zeit nur verschieben, nicht immer den Endwert senken. Praktisch heißt das: Erst das tatsächliche LCP-Element identifizieren, dann prüfen, ob es lazy geladen wird, ob seine Entdeckung spät kommt und ob die Datei unnötig groß ist. Der INP profitiert übrigens nicht von Bildoptimierung, er misst Interaktionslatenz, nicht Ladezeit.

Für die Vertiefung zu Messung und weiteren Hebeln hat das Handbuch im Artikel Website selber bauen einen eigenen Abschnitt zu Core Web Vitals, und das Website-Performance-Playbook führt durch die Werkzeugfolge.

Der komplette Workflow: Von der Kamera bis zur Website

Alle Schritte dieses Ratgebers in einer Reihenfolge, die sich als Checkliste abarbeiten lässt:

1. Rechte klären. Herkunft, Urheber und konkrete Lizenz prüfen, vier Fragen pro Bild: Wer hat es gemacht, woher stammt die Datei, welche Lizenz gilt, sind alle Bedingungen erfüllt?
2. Sichtbare Inhalte prüfen. Gesichter, Kennzeichen, Dokumente, Bildschirminhalte: Was nicht öffentlich gehören soll, wirksam unkenntlich machen. Der Bildzensur-Editor verpixelt oder schwärzt gezielt. Zwei Schutzebenen trennen: Verpixeln ändert keine Metadaten, Metadaten entfernen ändert keine Pixel.
3. Metadaten prüfen und bereinigen. Mit dem Metadaten-Inspektor ansehen, was drinsteckt, GPS, Kameradaten, Zeitstempel. Dann mit dem Bild-Metadaten-Entferner bereinigen und die exportierte Datei erneut prüfen.
4. Zuschneiden und skalieren. Anzeigebreite im Layout bestimmen, Pixelmaße passend wählen, mit dem Bild Resizer umsetzen. Bei Retina die doppelte Quellbreite einplanen.
5. Optionale Bearbeitung abschließen. Helligkeit, Effekte und Filter vor dem finalen Export bündeln, mit dem Bildfilter.
6. Format wählen und komprimieren. HEIC vorher mit dem Bildkonverter umwandeln, dann mit dem Bildkomprimierer auf WebP oder JPEG komprimieren. Qualität 75 bis 85 als Startbereich, Ausgabe mit dem Original vergleichen.
7. Dateigröße gegen das Zielbudget prüfen. Hero unter 200 bis 300 KB, Inhaltsbild unter 150 KB, Thumbnail unter 50 KB, als Richtwerte, nicht als Grenzgesetze.
8. Einbinden mit width, height und passendem Ladeverhalten. Platzreservierung setzen, LCP-Bild nicht lazy laden, weiter unten liegende Bilder mit loading="lazy".
9. Alt-Text und Dateinamen setzen. Informativ beschreiben, dekorativ mit leerem alt="", keine Keyword-Listen.
10. Im Browser nachmessen. In den Entwicklertools prüfen, welche Datei tatsächlich geladen wird, und die Seite einmal komplett durchscrollen, auch lazy geladene Bilder können Layoutsprünge verursachen.

Für die geführte Umsetzung eines einzelnen Bildes führt das Bild-Workflow-Playbook durch die vier Schritte Filtern, Größe und Zuschnitt, Konvertieren und Komprimieren, alles im Browser ohne Upload.

Häufige Fehler bei der Bildoptimierung

1. Das Kameraoriginal einbinden. 4.000 Pixel und 5 MB für ein 800-Pixel-Layoutfeld sind verschwendeter Datentransfer.
2. Das LCP-Bild lazy laden. Ein kleineres Bild kommt trotzdem spät, wenn es erst spät angefordert wird.
3. Alt-Attribute weglassen statt leer setzen. Dekorative Bilder brauchen ein vorhandenes, leeres alt="", sonst lesen Screenreader Dateinamen vor.
4. Keyword-Listen als Alt-Text. Google warnt vor Spam-Einstufung, Beschreibung schlägt Keyword-Häufung.
5. GPS-Koordinaten in Kleinanzeigen-Fotos. Der Standortschalter beim Teilen ist ein Anfang, die exportierte Datei trotzdem prüfen.
6. Windows-Explorer-Bereinigung als vollständige Lösung vertrauen. Die Untersuchung von 2022 zeigt Restdaten im Datenblock, die exportierte Datei kontrollieren.
7. NC-Bilder auf werbefinanzierten Seiten. Namensnennung hebt die Nichtkommerziell-Bedingung nicht auf.
8. Google-Bildersuche als Bildquelle. Auffindbar ist nicht lizenziert, die Rechtekette kommt immer zuerst.
9. AVIF pauschal als halbe Dateigröße annehmen. Der Median aus einem Benchmark ist kein Motivversprechen, die Ausgabe messen.
10. JPEG XL als Webstandard behandeln. Die Browserlage hat sich 2026 deutlich verbessert, die Google-Formatenliste enthält es trotzdem nicht.
11. Nur die KB-Zahl prüfen. Blockartefakte, Farbstufen und verschmierte Schrift sieht man im Bild, nicht im Dateimanager.
12. CSS-Hintergrundbilder als Inhaltsbilder. Sie werden nicht in Google Images indexiert und bekommen kein natives Lazy Loading.

Häufige Fragen zu Bildern fürs Web

Die wichtigsten Fragen aus der Praxis, kurz und mit Stand der Recherche beantwortet.

[Die FAQ-Antworten stehen im FAQ-Block oben auf dieser Seite.]

Wenn du beim Thema Datenschutz weitergehen willst: Der Ratgeber Dienste ohne Konto erklärt, warum lokale Browser-Tools wie die Bild-Werkzeuge von studio-tools datensparsam arbeiten, und der Artikel Website selber bauen ordnet Bilder in den kompletten Launch-Kontext ein.