Hinweis: Dieser Beitrag dient ausschließlich der allgemeinen Information und stellt keine rechtliche Beratung dar. Trotz sorgfältiger Recherche und Aufbereitung können keine Gewähr für die Richtigkeit, Vollständigkeit oder Aktualität der Inhalte übernommen werden. Für eine verbindliche Einschätzung oder rechtliche Beratung wende dich bitte an eine entsprechend qualifizierte Fachperson oder Rechtsberatung.
Ab dem 28. Juni 2025 tritt eine wichtige gesetzliche Regelung in Kraft, die für viele Gestalter von Internetseiten, Programmierer und Betreiber digitaler Angebote erhebliche Auswirkungen hat: das Barrierefreiheitsstärkungsgesetz, kurz BFSG. Künftig wird die barrierefreie Gestaltung von Internetseiten zur Pflicht, nicht mehr nur für staatliche Stellen, sondern auch für viele privatwirtschaftliche Unternehmen. Wer eine Internetseite oder einen digitalen Dienst für Verbraucher anbietet, muss sicherstellen, dass diese Angebote auch für Menschen mit Einschränkungen zugänglich sind. Für alle, die mit modernen CMS Systemen wie Webflow arbeiten, beginnt jetzt die entscheidende Vorbereitungszeit.
Was regelt das Barrierefreiheitsstärkungsgesetz genau?
Das BFSG ist die deutsche Umsetzung einer europäischen Richtlinie zur Barrierefreiheit. Ziel dieser Regelung ist es, digitale Angebote so zu gestalten, dass sie von allen Menschen genutzt werden können. Unabhängig von körperlichen oder geistigen Einschränkungen. Während bisher hauptsächlich staatliche Einrichtungen zur Barrierefreiheit verpflichtet waren, gilt diese Pflicht nun auch für privatwirtschaftliche Unternehmen, die digitale Leistungen für Verbraucher bereitstellen.
Dazu zählen unter anderem Internetseiten, mobile Anwendungen, Verkaufsplattformen, Buchungssysteme oder auch Selbstbedienungsterminals. Das Gesetz sorgt dafür, dass niemand mehr von wichtigen Informationen oder Dienstleistungen ausgeschlossen wird, nur weil eine Internetseite schlecht lesbar oder nicht bedienbar ist.
Welche Unternehmen sind betroffen - und gibt es Ausnahmen?
Grundsätzlich gilt das BFSG für alle Anbieter digitaler Leistungen, die mehr als zehn Beschäftigte haben oder einen Jahresumsatz von über zwei Millionen Euro erzielen. Besonders betroffen sind Betreiber von Online-Geschäften, Geldinstitute, Verkehrsbetriebe oder Anbieter von Telekommunikation. Aber auch kleinere Betriebe sollten sich mit dem Thema befassen, denn immer mehr öffentliche oder große private Auftraggeber verlangen bereits heute barrierefreie Lösungen.
Wer also Internetseiten für gewerbliche Kunden erstellt - sei es als Einzelperson oder als kleine Agentur - sollte sich frühzeitig mit den Anforderungen vertraut machen. Denn auch wenn man rechtlich nicht direkt betroffen ist, wird die Barrierefreiheit zunehmend zum Qualitätskriterium im Wettbewerb und in der öffentlichen Auftragsvergabe.
Was muss ab 2025 technisch und gestalterisch beachtet werden?
Die konkreten Vorgaben orientieren sich an den sogenannten Richtlinien für barrierefreie Webinhalte (WCAG), genauer gesagt an der Stufe 2.1, Niveau AA. Diese technischen Regeln legen fest, wie eine Internetseite gestaltet sein muss, damit sie für möglichst viele Menschen zugänglich ist.
Dazu gehören unter anderem folgende Punkte:
- Die gesamte Seite muss mit der Tastatur bedienbar sein, also ohne Maus oder Touchscreen.
- Texte und Elemente müssen ausreichend kontrastreich und gut lesbar gestaltet sein.
- Bilder müssen mit beschreibenden Texten versehen sein, damit Vorlesesoftware sie erkennen kann.
- Die Inhalte sollten klar strukturiert und verständlich formuliert sein - auch für Menschen mit Lernschwierigkeiten oder geringem Lesevermögen.
- Es dürfen keine rein visuellen Hinweise verwendet werden (zum Beispiel: „Klicken Sie auf das rote Feld“), sondern es muss eine alternative Beschreibung geben.
Für diejenigen, die Internetseiten mit Webflow gestalten, bieten sich hierbei viele Vorteile. Das Programm erlaubt es, sauberen Quelltext zu erzeugen, strukturelle Elemente wie Navigation oder Überschriften korrekt zu kennzeichnen und beschreibende Hinweise für Vorleseprogramme einzufügen. Wer sich mit den Möglichkeiten beschäftigt, kann nahezu alle Anforderungen des BFSG direkt umsetzen.
Barrierefreiheit und Webflow - ein guter Weg zur Umsetzung
Die Gestaltung barrierefreier Seiten ist nicht nur eine technische Aufgabe. Es geht ebenso um die Benutzerfreundlichkeit, um Sprache, Klarheit und Übersicht. Genau hier hat sich Webflow in vielen Projekten bewährt: Es erlaubt eine klare Gliederung der Inhalte, einfache Einbindung erklärender Hinweise und bietet gestalterische Freiheit bei gleichzeitiger Einhaltung der Vorgaben.
Wichtig ist, dass man frühzeitig im Entwurfsprozess an die Barrierefreiheit denkt. Wer beispielsweise auf eine logische Reihenfolge der Inhalte, gut sichtbare Bedienelemente und aussagekräftige Beschriftungen achtet, spart sich später aufwendige Nachbesserungen. Auch zusätzliche Hilfsmittel - wie die Erweiterung von Finsweet zur Überprüfung der Barrierefreiheit - erleichtern die Umsetzung im Arbeitsalltag.
Warum sich rechtzeitiges Handeln lohnt
Auch wenn das Gesetz erst 2025 in Kraft tritt - der Aufwand für eine durchgängig barrierefreie Internetseite ist nicht zu unterschätzen. Wer heute bereits beginnt, seine Projekte anzupassen, vermeidet spätere Engpässe und Positioniert sich als verlässlicher Partner.
Hinzu kommt: Barrierefreie Internetseiten bieten nicht nur rechtliche Sicherheit, sondern auch klare Vorteile im Wettbewerb. Sie sind leichter zu finden, benutzerfreundlicher und sprechen ein breiteres Publikum an - einschließlich älterer Menschen oder Personen mit temporären Einschränkungen. Darüber hinaus steigert eine gut strukturierte und zugängliche Seite die Verweildauer der Besucher und kann die Verkaufszahlen positiv beeinflussen.
Vor allem aber gilt: Barrierefreiheit ist ein Ausdruck von Verantwortung und Respekt. In einer digitalisierten Gesellschaft sollte niemand durch technische Hürden ausgeschlossen werden - weder beim Einkaufen, noch beim Informationszugang oder bei alltäglichen Dienstleistungen.
Jetzt ist ein guter Zeitpunkt, um Weichen zu stellen
Die Vorgaben des Barrierefreiheitsstärkungsgesetzes mögen auf den ersten Blick wie zusätzliche Hürden wirken. Doch sie bieten auch die Gelegenheit, digitale Angebote grundlegend zu verbessern - sowohl technisch als auch inhaltlich. Wer frühzeitig beginnt, die eigene Internetseite oder die seiner Kunden auf Barrierefreiheit zu prüfen, verschafft sich nicht nur rechtliche Sicherheit, sondern hebt die Qualität des gesamten Auftritts auf ein neues Niveau.
Vielleicht lohnt es sich gerade jetzt, einen Blick auf aktuelle Projekte zu werfen, Potenziale zur Verbesserung zu erkennen und bewusste Entscheidungen für ein zugänglicheres Internet zu treffen. Die Werkzeuge dafür stehen bereit - es kommt nur darauf an, sie gezielt zu nutzen.
Häufige Fragen zum BFSG und Webdesign
Das könnte dich auch interessieren
Hast du jemals versucht, eine Webseite auf deinem Smartphone zu öffnen, nur um festzustellen, dass die Schrift so klein ist, dass du sie kaum lesen kannst? Oder dass du die Seite hin und her ziehen musst, um alle Inhalte zu sehen? Dann hast du die Erfahrung gemacht, wie es ist, eine Webseite zu nutzen, die nicht für mobile Geräte optimiert ist. In einer Zeit, in der immer mehr Internetnutzer über mobile Geräte auf das Web zugreifen, wird das responsive Webdesign immer wichtiger. Aber was ist eigentlich responsive Webdesign und warum ist es so wichtig? In diesem Leitfaden werden wir diese Fragen klären und dir einige Tipps geben, wie du responsive Webdesign in deiner Arbeit nutzen kannst.
Was ist Responsive Webdesign?
Responsive Webdesign ist ein Ansatz zur Webgestaltung, bei dem eine Webseite so gestaltet wird, dass sie auf verschiedenen Geräten und Bildschirmgrößen optimal dargestellt wird. Das bedeutet, dass die Webseite automatisch ihre Layout und Design an das Gerät anpasst, auf dem sie betrachtet wird – sei es ein Desktop-Computer, ein Laptop, ein Tablet oder ein Smartphone.
Warum ist Responsive Webdesign wichtig?
Es gibt mehrere Gründe, warum responsive Webdesign wichtig ist:
- Verbesserung der Nutzererfahrung: Responsive Webdesign sorgt dafür, dass die Nutzer deiner Webseite eine optimale Erfahrung haben, unabhängig davon, welches Gerät sie verwenden. Das macht es für sie einfacher, sich auf deiner Webseite zurechtzufinden, die gewünschten Informationen zu finden oder eine Aktion durchzuführen.
- Steigerung des Traffics: Da immer mehr Menschen das Internet über mobile Geräte nutzen, kann ein responsives Webdesign dazu beitragen, den Traffic auf deiner Webseite zu erhöhen.
- Verbesserung der SEO: Suchmaschinen wie Google bevorzugen Webseiten, die für mobile Geräte optimiert sind. Durch die Implementierung von Responsive Webdesign kannst du also deine SEO verbessern und deine Webseite in den Suchergebnissen nach oben bringen.
Tipps zur Umsetzung von Responsive Webdesign
Jetzt, da wir wissen, was Responsive Webdesign ist und warum es wichtig ist, lass uns einige Tipps zur Umsetzung betrachten:
- Nutze flexible Layouts: Bei flexiblen Layouts passt sich die Breite der Webseite automatisch an die Größe des Viewports an. Du kannst dies erreichen, indem du relative Einheiten wie Prozentsätze statt fester Einheiten wie Pixel verwendest.
- Nutze flexible Bilder: Stelle sicher, dass sich auch deine Bilder an verschiedene Bildschirmgrößen anpassen. Du kannst dies erreichen, indem du CSS-Befehle verwendest, die die maximale Breite der Bilder auf 100% des Container-Elements setzen.
- Nutze Media Queries: Media Queries sind eine Funktion von CSS, die es dir ermöglicht, verschiedene Styles für verschiedene Geräte anzuwenden.
- Teste deine Webseite auf verschiedenen Geräten: Stelle sicher, dass du deine Webseite auf verschiedenen Geräten und Bildschirmgrößen testest, um sicherzustellen, dass sie auf allen Geräten gut aussieht und funktioniert.
Indem du diese Tipps befolgst, kannst du eine Webseite erstellen, die nicht nur gut aussieht, sondern auch auf jedem Gerät gut funktioniert. So kannst du sicherstellen, dass du deinen Nutzern unabhängig von ihrem Gerät eine positive Erfahrung bietest. Und das ist schließlich das ultimative Ziel des Responsive Webdesigns!
Einleitung
Bilder sind ein wesentlicher Bestandteil jeder Webseite. Sie sorgen nicht nur für visuelle Anziehungskraft, sondern spielen auch eine entscheidende Rolle für die User Experience und letztendlich die Conversion Rate. Doch bei der Wahl der richtigen Bilder geht es nicht nur um das „Was“, sondern auch um das „Wie“. Das richtige Bildformat, die passenden Maße und die optimale Komprimierung können einen signifikanten Unterschied machen – sei es in der Ladegeschwindigkeit deiner Seite, der Bildqualität oder der Gesamtwirkung.
In diesem Beitrag werfe ich einen detaillierten Blick auf die gängigsten Bildformate und erkläre, wann welches Format am besten zum Einsatz kommt. Außerdem gebe ich praxisnahe Tipps für die optimale Bildgröße in verschiedenen Anwendungsfällen wie Header-Bildern, Logos oder Icons. Mein Ziel: dir zu zeigen, wie du deine Bilder so optimierst, dass sie deine Webseite ästhetisch und funktional auf das nächste Level heben.
Die gängigsten Bildformate im Überblick
Um die besten Ergebnisse für deine Webseite zu erzielen, ist es wichtig, das richtige Bildformat auszuwählen. Jedes Format hat spezifische Vor- und Nachteile, die sich je nach Einsatzzweck unterschiedlich auswirken können. Hier sind die am häufigsten genutzten Bildformate und ihre Eigenschaften:
1. JPEG (JPG)
• Merkmale: JPEG ist das am weitesten verbreitete Format für Fotos und komplexe Bilder. Es nutzt eine verlustbehaftete Komprimierung, was bedeutet, dass Details und Qualität reduziert werden, um die Dateigröße zu verkleinern.
• Einsatzgebiete: Ideal für Fotos, großformatige Bilder mit vielen Farben und Verläufen, bei denen die Dateigröße entscheidend ist.
• Vorteile: Gutes Verhältnis von Bildqualität und Dateigröße, weit verbreitet und von allen Browsern unterstützt.
• Nachteile: Qualitätseinbußen bei hoher Komprimierung, keine Unterstützung für Transparenz.
2. PNG
• Merkmale: PNG ist ein verlustfreies Format, das sich besonders für Grafiken, Logos und Bilder mit wenigen Farben eignet. Es unterstützt Transparenz, was es ideal für Icons und Overlays macht.
• Einsatzgebiete: Logos, Icons, Illustrationen, Bilder mit Transparenzeffekten.
• Vorteile: Hohe Bildqualität ohne Verluste, Unterstützung von Transparenz und Teiltransparenz.
• Nachteile: Größere Dateigröße im Vergleich zu JPEG, besonders bei komplexen Bildern.
3. GIF
• Merkmale: GIF ist bekannt für einfache Animationen und Bilder mit geringer Farbanzahl (max. 256 Farben). Obwohl es für moderne Webanwendungen weniger genutzt wird, bleibt es beliebt für kleine, sich wiederholende Animationen.
• Einsatzgebiete: Einfache Animationen, Icons mit wenigen Farben.
• Vorteile: Animationen möglich, geringe Dateigröße bei niedriger Farbtiefe.
• Nachteile: Begrenzte Farbtiefe, veraltet im Vergleich zu modernen Alternativen wie WebP oder SVG.
4. SVG
• Merkmale: SVG ist ein Vektorformat, das sich perfekt für Logos, Icons und Illustrationen eignet. Da SVG-Dateien nicht aus Pixeln bestehen, bleiben sie unabhängig von der Skalierung gestochen scharf.
• Einsatzgebiete: Logos, Icons, Grafiken, Illustrationen.
• Vorteile: Unbegrenzte Skalierbarkeit ohne Qualitätsverlust, geringe Dateigröße bei einfachen Formen, Unterstützung von Animationen.
• Nachteile: Nicht geeignet für komplexe Fotos, erfordert etwas technisches Know-how zur Bearbeitung.
5. WebP
• Merkmale: WebP ist ein modernes Bildformat von Google, das eine hohe Kompression mit guter Bildqualität kombiniert. Es bietet sowohl verlustbehaftete als auch verlustfreie Optionen und unterstützt Transparenz wie PNG.
• Einsatzgebiete: Universell einsetzbar für Fotos, Grafiken und Bilder mit Transparenz.
• Vorteile: Hohe Bildqualität bei kleiner Dateigröße, unterstützt Transparenz, bessere Komprimierung als JPEG und PNG.
• Nachteile: Nicht alle Browser unterstützen WebP vollständig, allerdings verbessert sich die Kompatibilität kontinuierlich.
Die Wahl des richtigen Formats hängt von deinen spezifischen Anforderungen ab: Müssen Bilder skalierbar sein? Benötigst du Transparenz? Oder ist die Ladezeit der entscheidende Faktor? In den folgenden Abschnitten gehe ich auf konkrete Anwendungsfälle ein und zeige, welches Format und welche Bildgröße am besten geeignet sind.
Bildformate im praktischen Einsatz: Empfehlungen und Best Practices
Je nachdem, wo und wie du Bilder auf deiner Webseite einsetzt, variieren die Anforderungen an Format, Größe und Qualität. Hier sind einige konkrete Anwendungsfälle und Empfehlungen:
1. Header-Bilder (Hero-Images)
• Empfohlenes Format: JPEG oder WebP
• Optimale Maße: 1920 x 1080px (bei Full HD), oft auch 1600 x 900px, um Ladezeiten zu reduzieren
• Tipps: Achte auf eine gute Balance zwischen Bildgröße und Ladezeit. Verwende JPEG für starke Komprimierung bei Fotos und WebP, wenn maximale Qualität bei kleiner Dateigröße gewünscht ist. Nutze Tools zur Komprimierung, um die Ladegeschwindigkeit zu optimieren.
2. Logos
• Empfohlenes Format: SVG oder PNG
• Optimale Maße: 250 x 100px (für horizontale Logos), 100 x 100px (für quadratische Logos)
• Tipps: SVG ist ideal für Logos, da es unbegrenzt skalierbar ist, ohne an Qualität zu verlieren. Wenn dein Logo Transparenz benötigt und SVG keine Option ist, verwende PNG. Achte darauf, dass das Logo auch in kleinen Größen lesbar bleibt.
3. Sektionen und Banner-Bilder
• Empfohlenes Format: JPEG oder WebP
• Optimale Maße: 1200 x 600px (je nach Layout und Design)
• Tipps: Bannerbilder müssen groß genug sein, um auf allen Bildschirmgrößen gut auszusehen, ohne dabei die Ladezeit zu beeinträchtigen. Komprimiere die Bilder stark, wenn sie viele Details oder Farben enthalten. WebP bietet hier oft die beste Lösung.
4. Bilder für Rezensionen und Testimonial-Abschnitte
• Empfohlenes Format: JPEG oder PNG
• Optimale Maße: 150 x 150px (quadratisch für Profilbilder)
• Tipps: Für kleine Profilbilder reicht JPEG oft aus. Wenn du jedoch ein Bild mit Transparenz (z.B. freigestellte Personen) benötigst, greife zu PNG. Achte darauf, dass die Bilder authentisch wirken, um Vertrauen aufzubauen.
5. Icons und Grafiken
• Empfohlenes Format: SVG
• Optimale Maße: Flexible Größen, abhängig vom Design (z.B. 32 x 32px, 64 x 64px)
• Tipps: SVG ist hier unschlagbar, da es sowohl für kleine als auch große Icons eine perfekte Schärfe bietet. Achte bei Icons darauf, klare Linien und Kontraste zu verwenden, damit sie auch bei kleinen Größen gut sichtbar sind.
Die Wahl des passenden Formats und der optimalen Bildgröße hängt stark davon ab, welche Rolle das Bild auf deiner Webseite spielt. Passe die Bilder an den jeweiligen Kontext an und optimiere sie für schnelle Ladezeiten und ein ansprechendes Design.
Optimierung und Performance: Worauf es bei der Bildauswahl wirklich ankommt
Die Wahl des richtigen Bildformats ist der erste Schritt, aber um die Performance deiner Webseite wirklich zu optimieren, sind weitere Anpassungen entscheidend. Der wichtigste Schritt ist dabei oft die Konvertierung deiner Bilder in das WebP-Format, das eine hervorragende Bildqualität bei deutlich kleinerer Dateigröße bietet. Hier sind einige Best Practices und Tools, die ich empfehle, um Bilder effizient zu nutzen und die Ladezeit deiner Webseite zu minimieren:
1. Konvertierung in WebP: Der erste Schritt zur besseren Performance
• Der einfachste und wirkungsvollste Weg, deine Bilddateien zu optimieren, ist die Konvertierung in WebP. Dieses Format bietet eine hervorragende Komprimierung bei minimalem Qualitätsverlust. Tools wie TinyWow oder CloudConvert machen die Konvertierung schnell und unkompliziert.
• Solltest du viele Bilder auf einmal konvertieren wollen, bieten Plattformen wie WordPress praktische Erweiterungen, die diesen Prozess automatisieren. In Webflow kannst du ebenfalls mit wenigen Klicks eine automatische Konvertierung aktivieren.
• Für Mac-Nutzer empfehle ich die Software WebP Converter, die ich selbst nutze und mit der ich extrem zufrieden bin. Mit diesem Tool kannst du schnell und mühelos deine Bilder ins WebP-Format umwandeln.
2. Komprimierung: Nach der Konvertierung weitere Optimierungen vornehmen
• Auch nach der Konvertierung in WebP ist es sinnvoll, die Dateigröße weiter zu reduzieren. Tools wie TinyPNG oder Squoosh können auch WebP-Dateien komprimieren, ohne die Bildqualität merklich zu beeinträchtigen. Gerade bei großen Bildern oder komplexen Designs ist es wichtig, die Dateigröße so gering wie möglich zu halten.
3. Responsive Bilder: Einsatz von srcset und sizes
• Um sicherzustellen, dass deine Bilder auf verschiedenen Bildschirmgrößen optimal dargestellt werden, kannst du mehrere Versionen eines Bildes bereitstellen. Der Browser lädt dann automatisch die passende Größe für die jeweilige Auflösung, was die Ladezeit effizient reduziert und gleichzeitig die Bildqualität erhält.
4. Lazy Loading: Effiziente Ladezeiten durch verzögertes Laden von Bildern
• Mit Lazy Loading stellst du sicher, dass Bilder erst geladen werden, wenn sie tatsächlich im sichtbaren Bereich der Webseite erscheinen. Dies beschleunigt die anfängliche Ladezeit und reduziert die Serverlast, besonders bei langen Seiten mit vielen Bildern.
5. SEO-Optimierung: Alt-Tags, Dateinamen und Kontextualität
• Bilder sind auch für SEO relevant. Mit beschreibenden Alt-Tags und aussagekräftigen Dateinamen hilfst du Suchmaschinen, den Inhalt deiner Bilder zu verstehen. Achte darauf, dass die Dateinamen klar und prägnant sind, z.B. „modernes-webdesign-header.jpg“, anstatt „image1.jpg“.
Wenn du diese Techniken kombinierst, stellst du sicher, dass deine Webseite sowohl visuell ansprechend als auch technisch optimiert ist. Schnelle Ladezeiten, scharfe Bilder und eine gute User Experience sorgen dafür, dass deine Webseite professionell und nutzerfreundlich wirkt.
Fazit
Die Wahl des richtigen Bildformats und die anschließende Optimierung sind entscheidend, um eine schnelle und ansprechende Webseite zu gestalten. WebP ist derzeit das effizienteste Format und sollte dein erster Schritt sein, wenn es um Bildoptimierung geht. Mit Tools wie TinyWow, CloudConvert oder spezialisierten Apps für Mac kannst du die Konvertierung einfach durchführen. Plattformen wie WordPress und Webflow bieten zudem automatische Lösungen, die den Prozess weiter erleichtern.
Aber das allein reicht nicht. Um wirklich das Beste aus deinen Bildern herauszuholen, solltest du auch auf Komprimierung, responsive Bildgrößen und Lazy Loading setzen. Diese Maßnahmen sorgen dafür, dass deine Webseite nicht nur optisch überzeugt, sondern auch technisch performant ist. Vergiss dabei nicht die SEO-Aspekte wie Alt-Tags und optimierte Dateinamen – sie tragen maßgeblich zur Sichtbarkeit deiner Seite bei.
Kurz gesagt: Mit der richtigen Kombination aus Formatwahl, Performance-Optimierung und SEO-Strategie kannst du deine Bilder so einsetzen, dass sie deine Webseite ästhetisch aufwerten und gleichzeitig eine reibungslose User Experience gewährleisten.