Bildbearbeitung und Bildoptimierung werden häufig in einem Topf behandelt und sind zwei verschiedene Aufgaben mit verschiedenen Werkzeugen.
Bearbeitung heißt: zuschneiden, gerade richten, Helligkeit und Kontrast anpassen, störende Elemente entfernen, Ausschnitt wählen.
Optimierung heißt: auf die benötigte Pixelbreite verkleinern, in ein modernes Format überführen, komprimieren, mehrere Größen bereitstellen.
Der zweite Teil entscheidet über die Ladezeit und wird am häufigsten übersprungen.
Werkzeuge nach Aufgabe
| Aufgabe | Werkzeug | Kosten |
|---|---|---|
| Zuschneiden, gerade richten | kostenloses Bildprogramm oder Browser-Werkzeug | 0 Euro |
| Helligkeit, Kontrast, Farbe | dasselbe | 0 Euro |
| Freistellen, Hintergrund entfernen | Browser-Werkzeug mit automatischer Erkennung | 0 bis wenige Euro |
| Retusche, aufwendige Montage | professionelles Programm | Abo |
| Stapelverarbeitung, viele Bilder | lokales Programm mit Stapelfunktion | 0 Euro |
| Verkleinern und komprimieren | Kommandozeilenwerkzeug oder Browser-Dienst | 0 Euro |
| Format umwandeln | dasselbe | 0 Euro |
| Vektorgrafiken, Icons | Vektorprogramm | 0 Euro |
Für den typischen Bedarf einer Firmenwebsite fällt keine einzige Zeile in eine kostenpflichtige Kategorie.
Zuschnitte und Größen je Einsatz
Vor der Bearbeitung sollte klar sein, welche Formate gebraucht werden. Sonst wird zweimal zugeschnitten.
| Einsatz | Seitenverhältnis | Dateibreite |
|---|---|---|
| Hero über die volle Breite | 16:9 oder 21:9 | 2.000 bis 2.400 Pixel |
| Inhaltsbild in der Textspalte | 3:2 oder 16:9 | 1.400 bis 1.600 Pixel |
| Kartenbild im Raster | 4:3 | 800 Pixel |
| Vorschaubild in einer Liste | 1:1 | 320 Pixel |
| Teambild, Porträt | 4:5 oder 1:1 | 800 Pixel |
| Bild für soziale Netzwerke | 1200 x 630 | genau diese Maße |
Die Regel für die Dateibreite ist das Doppelte der maximalen Darstellungsbreite, damit Bildschirme mit hoher Pixeldichte scharf bleiben. Mehr bringt nichts Sichtbares und kostet Datenvolumen. Details in Bilder optimieren.
Die letzte Zeile ist ein Sonderfall: Vorschaubilder für soziale Netzwerke brauchen feste Maße, weil sie sonst beschnitten werden, häufig genau dort, wo Text steht.
Der Ablauf
- Original ablegen, unverändert, in einem eigenen Ordner. Sobald ein neues Layout andere Zuschnitte braucht, ist das Original die einzige Grundlage.
- Zuschnitt und Ausrichtung. Horizont gerade, Ausschnitt so wählen, dass das Motiv auch im späteren Beschnitt funktioniert.
- Helligkeit und Kontrast anpassen. Zurückhaltend. Übersättigte Bilder wirken unglaubwürdig, was besonders bei Referenzfotos schadet.
- Auf die benötigte Breite verkleinern.
- Als WebP exportieren, Qualitätsstufe um 80.
- Dateigröße prüfen, Ziel unter 200 Kilobyte für Inhaltsbilder.
- Sprechenden Dateinamen setzen, ohne Umlaute, mit Bindestrichen. Nicht
IMG_4711.jpg. - Hochladen und Alternativtext setzen.
Schritt 7 ist eine kleine Sache mit doppeltem Nutzen: Der Dateiname ist ein schwaches Signal für den Bildinhalt, und beim späteren Suchen im eigenen Ordner findet man das Bild wieder.
Eigene Fotos: was praktisch hilft
Für Betriebe, die ihre Arbeit zeigen wollen, sind eigene Fotos gekauften Bildern in fast jedem Fall überlegen. Ein aktuelles Telefon genügt, wenn ein paar Punkte beachtet werden:
- Tageslicht, kein Blitz. Fenster im Rücken, nicht im Bild
- Aufräumen vor dem Foto. Das ist der wirksamste Eingriff überhaupt
- Mehrere Aufnahmen, aus verschiedenen Abständen. Auswählen ist billiger als nachfotografieren
- Querformat und Hochformat vom gleichen Motiv, weil Layouts beides brauchen
- Details mitfotografieren. Eine saubere Fuge, ein Werkzeug, eine Hand bei der Arbeit
- Personen fragen, bevor sie im Bild sind. Siehe Bildrechte
Häufige Fehler
Bilder direkt aus der Kamera hochladen. Mehrere Megabyte pro Datei, und die Seite ist auf dem Telefon unbenutzbar.
Nur per CSS verkleinern. Die vollständige Datei wird trotzdem geladen.
PNG für Fotos. Erzeugt Dateien, die mehrfach größer sind als nötig.
Zu starke Kompression bei Flächen. Himmel und einfarbige Hintergründe zeigen Artefakte früher als Details.
Text in Bilder setzen. Nicht skalierbar, nicht auslesbar, nicht für Hilfsmittel zugänglich. Betrifft besonders Preise und Öffnungszeiten.
Original nicht behalten. Beim nächsten Layout fehlt die Grundlage, und aus einem verkleinerten Bild lässt sich kein größeres machen.