Die kurze Antwort
Find heraus, wie breit das Bild auf der Seite in CSS-Pixeln erscheint, und exportier es dann in doppelter Breite. Eine Blogspalte mit 760 Pixeln Breite braucht ein Bild mit etwa 1520 Pixeln. Eine Produktkarte, die mit 280 Pixeln angezeigt wird, braucht etwa 560. Ein Hintergrund über den ganzen Bildschirm braucht 1920 Pixel für typische Laptops und bis zu 2560 für große Desktop-Monitore.
Der Bildgrößenrechner unten erledigt das in einem Schritt: Stell Größe ändern nach auf Pixel, gib die Breite ein, lass Höhe leer und lass Seitenverhältnis beibehalten eingeschaltet. Wenn du einen Stapel Handyfotos von etwa 4000 auf 1600 Pixel verkleinerst, schrumpft jede Datei meist schon um 80 bis 90 Prozent, noch bevor du zusätzlich komprimierst.
Hier ausprobieren: Bildgröße ändern
Vollständige Tool-Seite öffnenEmpfohlene Größen nach Bildtyp
Diese Größen decken die üblichen Fälle auf Blogs, in Onlineshops und auf Firmenwebsites ab. Am wichtigsten ist die Breite; die Höhe ergibt sich aus dem Seitenverhältnis, das du wählst. Die Zielwerte für die Dateigröße gehen von JPG oder WebP mit einer Qualität von etwa 75 bis 85 aus.
| Bildtyp | Breite in Pixeln | Übliches Seitenverhältnis | Ziel für die Dateigröße |
|---|---|---|---|
| Header oder Banner über die volle Breite | 1920 bis 2560 | 16:9 oder 21:9 | 200 bis 400 KB |
| Bild in einem Artikel | 1200 bis 1600 | 3:2 oder 16:9 | 100 bis 200 KB |
| Produktfoto mit Zoom | 1000 bis 2000 | 1:1 | 100 bis 300 KB |
| Vorschaubild, Produktkarte | 300 bis 600 | 1:1 oder 4:3 | 20 bis 60 KB |
| Vorschaubild zum Teilen (Open Graph) | 1200 x 630 | etwa 1,91:1 | unter 300 KB |
| Logo | etwa 2x die angezeigte Größe | beliebig | unter 30 KB, oder SVG nehmen |
| Team- oder Autorenfoto | 400 bis 800 | 1:1 | 30 bis 80 KB |
Retina und 2x-Bilder erklärt
Moderne Handys, viele Laptops und die meisten Macs haben Bildschirme mit hoher Pixeldichte, auf denen ein CSS-Pixel mit zwei oder drei echten Pixeln gezeichnet wird. Ein Bild, das genau so breit ist wie seine Anzeigefläche, wirkt dort weich. Mit doppelter Breite (2x) wird es gestochen scharf; 3x bringt viel zusätzliches Gewicht für einen Unterschied, den kaum jemand bemerkt, deshalb ist 2x die übliche Obergrenze.
Unterstützt deine Website oder Plattform responsive Bilder (das Attribut srcset, das WordPress und die meisten Shopsysteme automatisch setzen), exportierst du eine große Version in 2x und lässt das System die kleineren Kopien erstellen. Wenn nicht, ist ein einzelnes Bild in doppelter Breite der größten Anzeige der beste Kompromiss.
Für einen Header über die volle Breite heißt das etwa 2560 Pixel am Desktop. Auf dem Handy ist dieselbe Fläche rund 400 CSS-Pixel breit, ein responsives Setup würde dort also eine Version mit etwa 800 bis 1200 Pixeln ausliefern.
Seitenverhältnisse und Verkleinern ohne Verzerrung
Das Seitenverhältnis ist das Verhältnis von Breite zu Höhe. 16:9 ist die Breitbildform von Videos und den meisten Bannern, 3:2 die native Form vieler Kameras, 4:3 die native Form der meisten Handykameras, und 1:1 ist quadratisch, wie oft in Produktrastern. Wenn alle Bilder einer Art dasselbe Verhältnis haben, wirken deine Seiten aufgeräumt.
Beim Ändern der Größe ändert sich nur die Größe, nie die Form, solange das Seitenverhältnis erhalten bleibt. Mit Seitenverhältnis beibehalten passt der Rechner das Bild in die eingegebene Breite und Höhe ein, es wirkt also nie gestreckt. Brauchst du eine genaue Form, etwa 1200 x 630 für ein Vorschaubild zum Teilen oder ein Quadrat für ein Produkt, schneidest du das Bild zuerst mit Bild zuschneiden zu und änderst dann die Größe.
Vergrößere keine kleinen Bilder. Hochskalieren fügt Pixel ohne Details hinzu, das Ergebnis ist also größer und unschärfer. Deshalb ist Kleine Bilder nicht vergrößern standardmäßig eingeschaltet.
Schritt für Schritt für eine typische Website
- Messen: Öffne die Seite, klick mit der rechten Maustaste auf den Bildbereich und wähl Untersuchen, oder schau in der Dokumentation deines Themes nach der Inhaltsbreite.
- Zuschneiden auf das Seitenverhältnis, das du für diese Art von Bild verwendest, falls das Original eine andere Form hat.
- Größe ändern auf die doppelte Anzeigebreite, mit dem Modus Pixel.
- Ausgabeformat wählen: WebP für die kleinsten Dateien, wenn deine Plattform es annimmt, sonst JPG. PNG bleibt für Logos und Grafiken mit Transparenz.
- Komprimieren, wenn die Datei noch über dem Ziel liegt, dann hochladen und die Seite auf dem Handy prüfen.
Typische Fehler
- Das Kamera-Original hochladen und den Browser verkleinern lassen. Die ganze Datei mit 4000 Pixeln muss trotzdem geladen werden, das bremst die Seite und verschlechtert den Wert für Largest Contentful Paint.
- Nur mit den HTML-Attributen width und height skalieren. Sie bestimmen die Anzeigegröße, nicht die Dateigröße. Setzen solltest du sie trotzdem, weil sie Platz reservieren und Layoutverschiebungen verhindern.
- PNG für Fotos verwenden. Ein als PNG gespeichertes Foto ist oft 5- bis 10-mal so groß wie dasselbe Foto als JPG oder WebP.
- Verschiedene Seitenverhältnisse in einem Raster mischen, dadurch wirken Produktlisten unruhig.
- Text in Bilder setzen. Suchmaschinen können ihn nicht lesen, und auf dem Handy wird er winzig; nimm stattdessen echten Text über dem Bild.
Tipps für schnellere Seiten
Bilder unterhalb des ersten Bildschirms sollten per Lazy Loading geladen werden, also erst, wenn der Besucher in ihre Nähe scrollt; die meisten Content-Management-Systeme machen das automatisch. Das Hauptbild ganz oben sollte normal laden, weil es oft das größte Element ist, das der Geschwindigkeitswert misst.
Ändere die Größe ganzer Ordner auf einmal: Füg alle Bilder hinzu, gib die Breite einmal ein und nimm Alle als ZIP herunterladen. Die Liste zeigt die alten und neuen Maße jeder Datei. Alles passiert in deinem Browser, sodass selbst ein paar hundert Produktfotos ohne Upload verarbeitet werden.