Bilder für Websites – zwischen Ästhetik und Ladezeit

Das Dateiformat – jpeg, png oder gif

Für eine überzeugende Web-Performance ist es entscheidend, Bilddaten möglichst schlank zu halten, ohne dabei an Wirkung zu verlieren. Wer das ignoriert, riskiert hohe Absprungraten und verschenkt wertvolles SEO-Potenzial. Aber keine Sorge: Mit ein paar gezielten Maßnahmen lassen sich Ladezeiten minimieren – ganz ohne auf gute Gestaltung zu verzichten.

Bilder sind weit mehr als nur visuelle Dekoration. Sie tragen zur Markenbildung bei, steuern Emotionen – und sind (richtig eingebunden) echte Conversion-Booster. Umso wichtiger ist es, zu verstehen, welche Bildformate sich wofür eignen und welche technischen Einstellungen sinnvoll sind.

Die gängigen Bildformate im Web

• JPEG: Ideal für Fotos, gutes Verhältnis zwischen Qualität und Dateigröße.

• PNG: Unterstützt Transparenz, besser für Grafiken mit wenig Farben.

• GIF: Alt, aber für Animationen (z. B. in Newslettern) immer noch relevant.

JPEG (Joint Photographic Experts Group) ist das wohl bekannteste Bildformat im Web – und das aus gutem Grund: Es bietet eine starke Komprimierung bei gleichzeitig hoher Bildqualität. Farben werden realistisch dargestellt, und selbst bei reduzierter Dateigröße bleibt das Bild meist klar und detailreich. Deshalb ist JPEG perfekt für Fotos und Bilder mit vielen Farbverläufen geeignet.

PNG (Portable Network Graphics) komprimiert ebenfalls effektiv, allerdings auf andere Weise: Es reduziert die Anzahl der verwendeten Farben, was die Dateigröße schrumpfen lässt. Je mehr Komprimierung, desto kleiner also das Farbspektrum. Der große Vorteil: PNG kann im Gegensatz zu JPEG Transparenzen darstellen – ideal für Logos oder Icons, die sich nahtlos in einen Hintergrund einfügen sollen. Deshalb ist PNG besonders beliebt für Grafiken mit wenigen Farben und transparenten Hintergründen.

GIF (Graphics Interchange Format) ist technisch nicht mehr ganz auf der Höhe, wird aber nach wie vor für einfache Zwecke eingesetzt. Es kann ebenfalls Transparenz darstellen, ist jedoch auf nur 256 Farben begrenzt – was bei Fotos unnatürlich wirken kann. Der große Pluspunkt: GIFs können animiert werden. Deshalb sind sie bis heute beliebt für kleine Animationen, z. B. in Newslettern, Chats oder als Reaktions-Grafiken.

Auflösung, Bildgröße & Komprimierung – was zählt wirklich?

Die Unterscheidung von Dateiformat, Bildgröße und Dateigröße ist essenziell für die Weboptimierung. Während das Format den Typ der Datei beschreibt (JPEG, PNG etc.), gibt die Bildgröße Auskunft über die Anzahl der Pixel (z. B. 1920×1080 px) – also, wie groß das Bild auf dem Bildschirm dargestellt wird. Die Dateigröße hingegen zeigt, wie viel Speicherplatz ein Bild tatsächlich braucht.

Viele Bilder, die direkt aus einer Kamera kommen, sind überdimensioniert. Das sieht zwar schick aus, bringt technisch aber wenig. Für die meisten Webseiten reicht eine maximale Breite von 1920 px völlig aus. Wer noch höher auflöst, riskiert langsame Ladezeiten – vor allem mobil ein echtes Problem.

Wichtig: Bilder sollten niemals groß hochgeladen und dann im CMS skaliert werden. Das wirkt sich nicht nur negativ auf die Darstellung aus, sondern bläht auch die Datenmenge unnötig auf. Lieber vorher passend zuschneiden und gezielt für das Web optimieren – so bleibt die Qualität gut und die Ladezeit kurz.

Best Practices für Bildgrößen

• Bilder für Fullscreen-Header: max. 1920 x 1280 px

• Thumbnails: 300 x 300 px

• Blogbilder: 1200 x 800 px

• Immer: gleiches Seitenverhältnis (z. B. 3:2 oder 4:3)

Komprimierung – Qualität bewahren, Gewicht sparen

Ein schlauer Kompromiss zwischen Dateigröße und Bildqualität ist das Ziel. Denn je stärker komprimiert ein Bild ist, desto schneller lädt die Seite – aber auch desto höher ist das Risiko von Qualitätsverlusten. Gerade bei kleinen Bildern kann eine zu starke Kompression schnell zu Unschärfe führen.

Mit Tools wie Photoshop, Squoosh oder TinyJPG lässt sich die Bildqualität gezielt reduzieren, ohne dass es sofort sichtbar wird. In Photoshop funktioniert das ganz einfach über „Exportieren für Web“. Dabei lässt sich die Qualität (z. B. auf 60 %) einstellen, das Format wählen und die endgültige Bildgröße definieren.

Wichtig: Wer Bilder skaliert, sollte darauf achten, das Seitenverhältnis beizubehalten – sonst wird’s schnell verzerrt. Außerdem: Einheitlichkeit ist Trumpf! Wer ständig zwischen Formaten und Seitenverhältnissen springt, wirkt schnell unprofessionell.

Tools & Tipps zur Komprimierung

• Photoshop: Export „Für Web speichern“

• TinyJPG / TinyPNG: weitere Kompression ohne sichtbaren Qualitätsverlust

• Bildverhältnis: am besten 3:2 oder 16:9 beibehalten

• Vorsicht vor Skalierung im CMS – lieber vorher anpassen!

Dateinamen & Alt-Texte – Der SEO-Boost

Suchmaschinen können (noch) nicht sehen, was auf Bildern zu sehen ist. Sie verlassen sich auf Meta-Informationen – vor allem auf den Dateinamen und das sogenannte Alt-Attribut. Wer hier klug arbeitet, verbessert nicht nur sein Ranking, sondern macht seine Website auch barrierefreier.

Die Regeln für SEO-konforme Dateinamen sind einfach, werden aber oft ignoriert: keine Leerzeichen, keine Umlaute, keine Sonderzeichen. Stattdessen: kurze, klare Begriffe mit Bindestrichen, die den Bildinhalt exakt beschreiben. Auch das Alt-Attribut sollte sinnvoll befüllt sein – nicht nur aus SEO-Gründen, sondern auch für Nutzer:innen mit Screenreadern.

So wird aus „IMG_4589.jpg“ ein „veganer-brunch-düsseldorf.jpg“. Klingt gleich ganz anders, oder?

SEO-Tipps für Bilddaten

• Dateiname: klein, mit Bindestrichen, ohne Umlaute/Sonderzeichen

• Alt-Tag: kurze, beschreibende Texte („Frühstücksteller mit Avocado“)

• Vermeide: kryptische Kamera-Bezeichnungen oder leere Alt-Felder

• Denke auch an Barrierefreiheit – Bilder sind mehr als Dekoration

Gute Bilder, kurze Ladezeiten – kein Widerspruch

Wer visuell überzeugen will, muss nicht zwangsläufig riesige Datenmengen in Kauf nehmen. Mit der richtigen Kombination aus Bildformat, Auflösung, Komprimierung und SEO können Bilder ihren vollen Charme entfalten – ohne dass Google oder der Nutzer abspringt. Bleib flexibel, halte deine Inhalte technisch sauber und mach deinen Webauftritt so leicht wie überzeugend.

Und wenn du dabei Hilfe brauchst: 2bu design ist an deiner Seite. Egal ob Bildoptimierung, Divi-Websites, WooCommerce, Corporate Design oder Social Media – wir helfen Marken, ihre Botschaft klar und stark zu transportieren.