Zum Inhalt springen

Webseite

Bilder fürs Web vorbereiten

Ein Foto aus der Kamera hat 6 MB und 6000 Pixel. Auf der Seite braucht es 80 kB. Wie man dahin kommt, ohne dass man den Unterschied sieht.

2 Min. Lesezeit Christopher Sakel

Inhalt
  1. Die drei Schritte
  2. Was das ausmacht
  3. Womit
  4. Was oft vergessen wird
  5. Wenn du Bilder lieferst

Bilder sind auf fast jeder langsamen Webseite die Hauptursache. Nicht die Technik, nicht das Hosting — die Bilder.

Das Gute daran: Es ist auch der Punkt, an dem man ohne Entwickler am meisten erreicht.

Die drei Schritte

1. Auf die richtige Größe bringen. Ein Bild, das auf der Seite 800 Pixel breit angezeigt wird, braucht keine 6000. Faustregel: die doppelte Anzeigebreite, damit es auf hochauflösenden Bildschirmen scharf bleibt. Also 1600 Pixel für einen 800-Pixel-Platz.

2. Das Format wählen. WebP oder AVIF statt JPEG. Beide werden von allen aktuellen Browsern verstanden und sparen bei gleicher Qualität 30 bis 60 Prozent. PNG nur, wo Transparenz gebraucht wird — für Fotos ist es die schlechteste Wahl.

3. Qualität herunterdrehen. Bei JPEG und WebP ist 75 bis 82 Prozent der Bereich, in dem man den Unterschied nicht sieht und die Datei sich halbiert. Über 90 wird es groß, ohne besser auszusehen.

Was das ausmacht

Ein typisches Handyfoto: 4,2 MB. Auf 1600 Pixel gebracht und als WebP mit 80 Prozent gespeichert: etwa 180 kB. Das ist ein Dreiundzwanzigstel, und auf dem Bildschirm sieht man keinen Unterschied.

Bei zwölf Bildern auf einer Seite entscheidet das darüber, ob die Seite in einer Sekunde da ist oder in zwölf.

Womit

Man braucht keine teure Software:

  • Squoosh im Browser, von Google, kostenlos, ohne Hochladen.
  • Vorschau auf dem Mac: Werkzeuge → Größe anpassen, dann exportieren.
  • IrfanView unter Windows, mit Stapelverarbeitung für ganze Ordner.

Was oft vergessen wird

Der Alternativtext. Beschreibt, was auf dem Bild zu sehen ist. Er ist für blinde Nutzer da, wird von Suchmaschinen gelesen und erscheint, wenn das Bild nicht lädt. „IMG_4831" ist keiner.

Die Dateinamen. dachsanierung-northeim-2025.webp sagt Google etwas. IMG_4831.jpg nicht.

Die Abmessungen im HTML. Stehen width und height am Bild, hält der Browser den Platz frei, und die Seite springt beim Laden nicht. Das ist einer der drei Werte, die Google unter Core Web Vitals misst.

Ladeverzögerung. Bilder, die erst beim Scrollen sichtbar werden, sollten loading="lazy" tragen. Das erste Bild oben dagegen nicht — dort kostet es Zeit statt sie zu sparen.

Wenn du Bilder lieferst

Schick sie uns unbearbeitet in der höchsten Auflösung, die du hast. Das Verkleinern übernehmen wir, und wir brauchen das Original, um es für jede Größe passend auszugeben. Ein bereits kleingerechnetes Bild lässt sich nicht wieder vergrößern.

Christopher Sakel

Fachinformatiker für Anwendungsentwicklung (IHK). Betreibt Sakel-IT in Uslar und schreibt hier über das, was in der Arbeit immer wieder vorkommt.

Frage dazu stellen

Fragen dazu?

Wir schauen uns deinen Fall an und sagen dir, was zu tun ist. Auch dann, wenn das Ergebnis lautet, dass gerade nichts zu tun ist.

Erstgespräch vereinbaren