Die Antwort in zwei Sätzen
Bildformate unterscheiden sich darin, wie gut sie Fotos, Transparenz oder Grafiken darstellen und wie viel Datenmenge sie dafür brauchen. Das betrifft dich, weil ein unbearbeitetes Foto vom Smartphone leicht das Fünfundzwanzigfache dessen wiegt, was auf einer Website sinnvoll ist — und die Seite entsprechend langsam macht.
Kurz erklärt
Denk an die Werkzeuge im Koffer: Für feine Elektronik nimmst du keinen Vorschlaghammer. Genauso gibt es für jede Art von Bild ein passendes Format.
- JPG ist der Standard-Akkuschrauber. Gemacht für Fotos mit vielen Farbabstufungen: Baustellenbilder, Teamfotos, fertige Bäder. Bei starker Verkleinerung der Datenmenge wird es unsauber, für den Alltag reicht es problemlos.
- PNG ist die feine Zange. Es kann Transparenz, also durchsichtige Bereiche. Richtig für dein Logo, das über einer Farbfläche liegen soll. Die Dateien sind schwerer als JPG.
- WebP und AVIF sind die neueren Formate. Sie können dasselbe wie JPG und PNG, brauchen dafür aber deutlich weniger Datenmenge. Wenn dein System sie anbietet, nimm sie.
- SVG ist die Bauzeichnung. Es speichert keine Bildpunkte, sondern Linien und Flächen. Deshalb bleibt es bei jeder Größe scharf — auf der Briefmarke wie auf dem Bauzaun. Nur für Logos und einfache Grafiken geeignet, nicht für Fotos.
Die Faustregel für den Alltag: Fotos als JPG oder WebP, Logos als SVG oder PNG. Alles andere ist Feinheit.
Wie groß ein Bild sein darf
Ein unbearbeitetes Smartphone-Foto liegt häufig bei rund 5 Megabyte, also etwa 5.000 Kilobyte. Als praktischer Zielwert nach Verkleinerung und Komprimierung gelten unter 200 Kilobyte pro Bild.
Zahlen als Tabelle
| Position | Wert in KB |
|---|---|
| Foto direkt vom Smartphone | 5.000 |
| Zielwert für die Website | 200 |
Quelle: G-AH · erhoben 25.07.2026
Der Unterschied klingt abstrakt, wirkt aber unmittelbar: Zehn unbearbeitete Fotos auf einer Seite bedeuten rund 50 Megabyte, die das Handy deines Kunden über Mobilfunk herunterladen muss. Zehn optimierte Fotos sind zusammen etwa 2 Megabyte.
Schritt für Schritt: Bilder fürs Web vorbereiten
- Format festlegen. Ist es ein Foto? Dann JPG, oder WebP, falls dein System es anbietet. Ist es ein Logo oder eine einfache Grafik mit durchsichtigem Hintergrund? Dann PNG oder SVG.
- Bild verkleinern. Öffne das Bild am Rechner und reduziere die Breite auf höchstens 1920 Bildpunkte. Unter Windows geht das mit der App „Fotos“ über „Bild bearbeiten“ und „Größe ändern“, auf dem Mac in der Vorschau über „Werkzeuge“ und „Größe korrigieren“. 1920 Bildpunkte reichen für jeden gängigen Bildschirm.
- Komprimieren. Ruf im Browser tinypng.com oder squoosh.app auf und zieh das Bild in das Feld auf der Seite. Das Werkzeug rechnet die Datenmenge herunter, ohne dass du etwas einstellen musst.
- Ergebnis prüfen. Lad die verkleinerte Datei herunter und schau dir die Größe an. Liegt sie unter 200 Kilobyte, passt es. Öffne das Bild einmal in voller Größe und prüfe, ob es noch sauber aussieht.
- Sinnvoll benennen. Nenn die Datei nicht IMG_4711.jpg, sondern zum Beispiel badsanierung-bad-nach-umbau.jpg. Das hilft dir beim Wiederfinden und Suchmaschinen beim Einordnen.
- Hochladen und Alternativtext setzen. Lade das Bild in deiner Website hoch. Trag im Feld „Alternativtext“ in einem kurzen Satz ein, was zu sehen ist. Der Text wird vorgelesen, wenn jemand das Bild nicht sehen kann, und angezeigt, wenn es nicht lädt.
Die häufigsten Fehler
- Unbearbeitete Handyfotos hochladen. Ein Foto mit mehreren Megabyte direkt aus der Kamera macht die Seite auf dem Mobilfunknetz spürbar langsam. Das ist der häufigste Einzelfehler.
- Das Logo als großes JPG mit weißem Kasten. Weil JPG keine Transparenz kann, liegt das Logo dann auf einem sichtbaren weißen Rechteck. Richtig sind PNG oder SVG.
- PNG für große Fotos. PNG ist für Fotos nicht gedacht, die Datei wird unnötig groß. Das fällt oft nicht auf, weil das Bild trotzdem korrekt aussieht.
- Texte als Bild. Ein Flyer oder eine Preisliste wird als Bild hochgeladen. Der Text darauf lässt sich weder markieren noch vorlesen, und Suchmaschinen können ihn schlecht erfassen.
- Alternativtext leer gelassen. Das kostet dich Verständlichkeit für Menschen mit Sehbehinderung und eine Einordnungshilfe für Suchmaschinen.
Woran du merkst, dass etwas nicht stimmt
- Auf dem Handy im Mobilfunknetz baut sich die Seite von oben nach unten sichtbar langsam auf, Bilder erscheinen nacheinander.
- Beim Hochladen meldet die Website, die Datei sei zu groß.
- Dein Logo hat auf farbigem Hintergrund einen weißen oder grauen Kasten drumherum.
- Das Logo wird auf großen Bildschirmen unscharf oder zeigt ausgefranste Kanten.
- Der Speicherplatz deines Hostings füllt sich, obwohl die Website nur wenige Seiten hat.
Welches Format eine Datei hat, erkennst du am Namen
Das Format steht in der Endung des Dateinamens, also hinter dem letzten Punkt: .jpg, .png, .webp, .avif, .svg. Falls dein Rechner die Endungen ausblendet, kannst du sie einblenden — im Windows-Explorer unter „Ansicht“ mit dem Haken bei „Dateinamenerweiterungen“, im Finder unter „Einstellungen“, Reiter „Erweitert“, mit „Alle Dateinamensuffixe einblenden“.
Ein Hinweis zu SVG: Weil eine SVG-Datei technisch Programmcode enthält, blockieren viele Systeme das Hochladen aus Sicherheitsgründen. Wenn dein Logo als SVG abgelehnt wird, ist das kein Fehler, sondern eine Schutzmaßnahme. Verwende dann ein PNG mit ausreichender Größe oder lass die Datei von jemandem prüfen und freigeben, der die Technik betreut.
Häufige Fragen
Soll ich alle Bilder auf WebP umstellen?
Wenn dein System das automatisch erledigt, spricht nichts dagegen. Manuell alle Bestandsbilder umzuwandeln lohnt sich meist nicht. Wichtiger als das Format ist, dass die Bilder überhaupt verkleinert und komprimiert wurden — dort liegt der größere Hebel.
Wie viel schneller wird die Seite dadurch?
Das lässt sich nicht allgemein beziffern. Wie stark ein Bild kleiner wird, hängt vom Motiv ab: Ein Foto mit viel gleichmäßigem Himmel lässt sich stärker verkleinern als ein detailreiches Werkstattbild. Die Faustregel ist ein Erfahrungswert, keine feste Größe.
Darf ich Bilder aus dem Internet verwenden?
Nur mit einer Lizenz, die das erlaubt. Fremde Fotos ohne Nutzungsrecht zu verwenden ist der Klassiker unter den teuren Fehlern. Eigene Baustellenfotos sind ohnehin überzeugender als gekaufte Symbolbilder — achte nur darauf, dass Personen auf den Bildern zugestimmt haben.
Passend dazu
- Core Web Vitals: was sie messen
- Inhalte selbst pflegen, ohne die Seite kaputtzumachen
- Eigene Betriebsfotos gegen Stockbilder
- Alle Wissensartikel im Überblick
Quellen
- https://web.dev/learn/design/picture/ | abgerufen 25.07.2026 | belegt: Auswahl des passenden Bildformats je Einsatzzweck
- https://developers.google.com/speed/webp | abgerufen 25.07.2026 | belegt: WebP als Format mit geringerer Datenmenge bei vergleichbarer Darstellung
- https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types | abgerufen 25.07.2026 | belegt: Eigenschaften von JPG, PNG, SVG und AVIF, Transparenzfähigkeit
Nicht belegbar: um wie viel WebP oder AVIF eine bestimmte Datei tatsächlich kleiner machen. Das schwankt je nach Motiv erheblich. Die Werte im Diagramm sind praktische Richtwerte: rund 5 Megabyte für ein unbearbeitetes Smartphone-Foto und unter 200 Kilobyte als Ziel nach der Bearbeitung. Sie stammen aus der Praxis, nicht aus einer Messreihe. Dasselbe gilt für die Empfehlung von höchstens 1920 Bildpunkten Breite: ein gängiger Richtwert, keine Vorgabe eines Herstellers oder Gremiums.
Die vier Schritte oben brauchen pro Bild etwa eine Minute. Wenn du hundert Bestandsbilder hast, richten wir die Umwandlung auch automatisiert ein — für neue Fotos reicht die Handarbeit.