Bilder fürs Web: Formate, Größen, Alt-Texte

Welches Format wofür?

Die meisten Probleme mit Bildern fangen beim Format an. Ein Foto als PNG ist oft unnötig groß, ein Logo als JPEG bekommt ausgefranste Kanten. Dabei ist die Faustregel einfach.

• JPEG: der Klassiker für Fotos. Funktioniert überall, lässt sich gut komprimieren, kennt aber keine Transparenz.
• PNG: für Grafiken, Screenshots und alles mit transparentem Hintergrund. Für Fotos meist zu schwer.
• WebP: modernes Format für Fotos und Grafiken, in der Regel deutlich kleiner als JPEG bei ähnlicher Qualität, mit Transparenz. Alle gängigen Browser unterstützen es.
• AVIF: noch kompakter als WebP, inzwischen von den aktuellen Browsern unterstützt. Das Erzeugen dauert etwas länger, und nicht jedes Bildprogramm kann es.
• SVG: kein Pixelbild, sondern eine Vektorgrafik. Ideal für Logos und Icons, weil sie auf jedem Bildschirm gestochen scharf bleiben.

Für die meisten Betriebe heißt das: Fotos als WebP, ersatzweise als JPEG. Das Logo als SVG. PNG nur, wenn Transparenz gebraucht wird und kein SVG vorliegt.

Wie groß darf ein Bild sein?

Das Handy macht Fotos mit vier- bis achttausend Pixeln Breite. Auf der Website wird das Bild aber vielleicht nur in einer Spalte von 800 Pixeln gezeigt. Lädt man das Original hoch, schleppt jeder Besucher die volle Datei herunter, obwohl er nur einen Bruchteil sieht. Im Mobilfunknetz in der Straßenbahn merkt man das sofort.

Als grobe Richtwerte haben sich bewährt:

• Großes Titelbild über die volle Breite: etwa 1600 bis 2000 Pixel breit
• Bild im Text oder in einer Spalte: etwa 800 bis 1200 Pixel
• Vorschaubilder, Teamfotos, Kacheln: etwa 400 bis 600 Pixel
• Logo: am besten als SVG, dann spielt die Pixelzahl keine Rolle

Was das konkret für Ihr Layout bedeutet, hängt vom Template ab. Fragen Sie im Zweifel die Agentur, die Ihre Website gebaut hat, welche Breiten vorgesehen sind.

Responsive Bilder mit srcset

Ein Handy braucht ein kleineres Bild als ein großer Monitor. Mit dem HTML-Attribut srcset bietet die Website dem Browser mehrere Fassungen desselben Bildes an, etwa in 600, 1200 und 1800 Pixeln Breite. Zusammen mit sizes sagt die Seite, wie breit das Bild im Layout erscheint. Der Browser wählt dann selbst die passende Datei.

Für Sie als Inhaber ist das meist kein Handgriff, den Sie selbst erledigen. Ein gutes Template oder eine passende Erweiterung erzeugt die Fassungen automatisch. Wichtig ist nur, dass das Ausgangsbild groß genug ist, damit es auch auf dem großen Bildschirm scharf bleibt.

Komprimieren ohne Matsch

Komprimierung entfernt Bildinformationen, die das Auge kaum vermisst. Zu stark angewendet, entstehen Klötzchen und verwaschene Kanten. Zu schwach, und die Datei bleibt unnötig groß. Der richtige Punkt liegt dort, wo Sie in der normalen Ansicht keinen Unterschied zum Original sehen.

Gängige Bildprogramme und kostenlose Onlinewerkzeuge zeigen Original und komprimierte Fassung nebeneinander. Probieren Sie es mit einem Foto aus Ihrer Werkstatt oder Ihrem Laden aus. Sie werden überrascht sein, wie viel kleiner die Datei werden kann. Achten Sie bei Onlinewerkzeugen darauf, keine vertraulichen Bilder hochzuladen.

Lazy Loading

Lazy Loading heißt: Bilder weiter unten auf der Seite werden erst geladen, wenn der Besucher dorthin scrollt. Das macht den ersten Seitenaufbau schneller. Moderne Browser verstehen dafür das Attribut loading="lazy". In Joomla ist beim Einfügen von Bildern über den Editor eine entsprechende Option vorgesehen.

Eine Ausnahme gibt es: Das große Bild ganz oben, das jeder sofort sieht, sollte nicht verzögert laden. Sonst bleibt der wichtigste Bereich der Seite einen Moment leer.

Alt-Texte, die etwas sagen

Der Alternativtext beschreibt ein Bild für Menschen, die es nicht sehen können. Screenreader lesen ihn vor, Suchmaschinen werten ihn aus, und wenn ein Bild nicht lädt, erscheint er an seiner Stelle. Ein guter Alt-Text ist kurz, konkret und beschreibt, was auf dem Bild wichtig ist. Er beginnt nicht mit „Bild von“, denn dass es ein Bild ist, weiß der Screenreader schon.

• Statt „bild1“: „Frisch gebackene Brezeln in der Auslage einer Bäckerei in Neckarau“
• Statt „Team“: „Die drei Mitarbeiterinnen am Empfang einer Physiopraxis in Ludwigshafen“
• Statt „Elektro Mannheim Elektriker Mannheim günstig“: „Elektriker verlegt Kabel in einem Altbau in der Neckarstadt“
• Statt „Gericht“: „Flammkuchen mit Zwiebeln und Speck auf einem Holzbrett“

Rein dekorative Bilder, etwa eine Linie oder ein Hintergrundmuster, bekommen einen leeren Alt-Text. Joomla bietet dafür beim Bild ein eigenes Häkchen an. Und Keywords stapeln? Lassen Sie es. Das hilft weder Menschen noch Suchmaschinen. Mehr zum Thema finden Sie auf unserer Seite zur Barrierefreiheit.

Dateinamen

„IMG_4711.jpg“ sagt nichts. „malerbetrieb-fassade-feudenheim.webp“ dagegen schon, für Sie beim Wiederfinden und für Suchmaschinen. Verwenden Sie Kleinbuchstaben, Bindestriche statt Leerzeichen und keine Umlaute: aus „Bäckerei“ wird „baeckerei“. Kurz und beschreibend genügt.

Bildrechte

Ein Bild aus der Google-Bildersuche zu nehmen, ist keine gute Idee. Fast jedes Foto ist urheberrechtlich geschützt, und Abmahnungen können teuer werden. Auf der sicheren Seite sind Sie in der Regel mit eigenen Fotos, mit Bildern, für die Sie eine Lizenz erworben haben, und mit Aufnahmen, deren Fotograf Ihnen die Nutzung schriftlich erlaubt hat.

Sind Menschen erkennbar abgebildet, etwa Mitarbeiter oder Kunden, sollten Sie deren Einverständnis haben, am besten schriftlich. Bei Stockfotos lohnt ein Blick in die Lizenzbedingungen, denn manche verlangen eine Quellenangabe. Bei KI-generierten Bildern ist die Rechtslage noch in Bewegung. Dieser Abschnitt ist keine Rechtsberatung. Im Zweifel fragen Sie eine Anwältin oder einen Anwalt für Urheberrecht.