Grundlagen

Zunächst zu den Basics. Ein solides Verständnis von HTML und CSS sowie Grundwissen in JavaScript sind die wichtigsten Voraussetzungen. Bei CSS solltest du insbesondere folgende Grundlagen sicher beherrschen:

• Das Box-Modell
• Flexbox
• CSS Grid
• Responsive Design

Wer diese Grundlagen sicher beherrscht, kann moderne und responsive Webseiten entwickeln.
Darüber hinaus ist das Verständnis von Selektoren und Spezifität in CSS sinnvoll. Auch Barrierefreiheit (Accessibility) sollte zumindest in den Grundlagen bekannt sein. Du musst mit CSS Custom Properties (Variablen) vertraut sein. Und ein souveräner Einsatz von KI im Arbeitsalltag ist natürlich hilfreich. Browser-Entwicklertools (DevTools) zum Debugging und CSS-Analyse sind ebenfalls unverzichtbar. Und man sollte Probleme bei Performance oder SEO zumindest erkennen können.
Von Mediengestaltern für Digitalmedien sollte man diese Fähigkeiten am Ende des ersten Ausbildungsjahrs erwarten können.
Aber hier solltest du nicht stehen bleiben. Über diese Grundlagen hinaus gibt es interessante neue Entwicklungen in diesem Bereich …

… Neue Entwicklungen in CSS

CSS hat sich in den vergangenen Jahren enorm weiterentwickelt. Während CSS früher hauptsächlich für das Aussehen einer Website zuständig war, übernimmt es heute auch Aufgaben, die früher ausschließlich mit JavaScript gelöst wurden. Dazu gehören beispielsweise bedingte Logik, komplexe Layouts, dynamische Positionierungen oder Animationen und interaktive Effekte.

Zu den wichtigsten Neuerungen gehören zum Beispiel:

• @scope – begrenzt CSS-Regeln gezielt auf bestimmte Bereiche einer Seite.
• @layer – hilft dabei, Stylesheets besser zu strukturieren und Konflikte durch Spezifität zu vermeiden.
• Container Queries – Komponenten reagieren auf die Größe ihres Containers statt nur auf die Größe des Browserfensters.
• Neue Funktionen wie if() – ermöglichen flexiblere und dynamischere Stylesheets.
• Native CSS Carousels – erste browserseitige Lösungen für Slider ohne zusätzliches JavaScript.
• Das neue, besser gestaltbare <select>-Element: Formulare lassen sich künftig einfacher an das Design anpassen.
• Moderne Farbräume wie oklch und oklab – sorgen für bessere Farbverläufe.
• Scroll-driven Animations – Animationen können direkt an die Scrollposition gekoppelt werden, ohne JavaScript einzusetzen.

Außerdem sind einen Blick wert:

• :has()-Selektor: Der „Eltern-Selektor“. Erlaubt Styling basierend auf dem Zustand, der Anwesenheit oder der Anzahl von Kind-Elementen.
• Anchor Positioning: Positioniert Elemente (z. B. Tooltips oder Dropdowns) dynamisch und intelligent relativ zu anderen DOM-Elementen.
• View Transitions API: Ermöglicht native, flüssige Übergänge bei State-Changes (Same-Document) oder beim Seitenwechsel (Cross-Document).
• Relative Color Syntax & color-mix(): Farben lassen sich dynamisch manipulieren, mischen oder aus bestehenden Variablen ableiten (z. B. oklch(from var(–c) l c h / 50%)).
• light-dark()-Funktion: Vereinfacht Dark/Light-Mode massiv, indem sie automatisch den Wert basierend auf color-scheme zurückgibt.
• Typografie-Steuerung: text-wrap: balance (für gleichmäßige, mehrzeilige Überschriften) und text-wrap: pretty (vermeidet isolierte Wörter am Absatzende).
• @property: Macht Custom Properties durch Typisierung erst richtig animierbar (z. B. für fließende Farbverläufe).
• @starting-style: Definiert den Startzustand für Entry-Animationen (z. B. Fade-in beim Einblenden eines Elements).
• CSS Masonry Layout: (Aktuell noch experimentell/flagged) Natives „Mauerwerk“-Layout via grid-template-rows: masonry.
• Popover- & Highlight-API-Integration: Native Styling-Möglichkeiten für die HTML-Popover-API (:popover-open, ::backdrop) und benutzerdefinierte Textmarkierungen.

Aber Achtung: Ob einer der genannten neuen CSS-Eigenschaften bereits eine ausreichende Browserunterstützung hat und für den produktiven Einsatz in realen Projekten geeignet ist, erfährst du unter https://caniuse.com/.
Diese Entwicklungen zeigen jedenfalls deutlich, wohin die Reise geht: CSS entwickelt sich zunehmend zu einer leistungsfähigen Sprache für Layout, Gestaltung und Interaktion. Lass uns dazu ein paar Beispiele anschauen.

Beispiele

Container Queries — responsiv auf Komponentenebene

Container Queries sind von allen neuen Features am weitesten in der Praxis angekommen und verdienen deshalb den ersten Platz.

Das Prinzip: Bisher reagierten Media Queries immer auf die Größe des Viewports — also des gesamten Browserfensters. Das Problem dabei ist, dass eine Komponente (z. B. eine Karte oder ein Teaser) gar nichts darüber weiß, wie viel Platz sie in ihrem jeweiligen Kontext hat. Container Queries lösen das: Eine Komponente kann sich auf Basis der Breite ihres Elterncontainers anpassen, nicht auf Basis des Viewports. Im folgenden Beispiel ist .card-container die Klasse für das Elternelement und .card für das Kindelement.

       .card-container {
            container-type: inline-size;
        }

        @container (min-width: 500px) {
            .card {
                display: grid;
                grid-template-columns: 1fr 1fr;
            }
        }

Dasselbe .card-Element funktioniert damit in einer schmalen Sidebar genauso wie in einem breiten Inhaltsbereich — ohne zusätzliche CSS-Klassen oder JavaScript.
Die Zeile „container-type: inline-size;“ macht das Element .card-container zu einem Container für Container Queries. „inline-size“ bedeutet, dass der Container auf Änderungen seiner Breite (in horizontaler Schreibrichtung) reagiert. Ohne diese Zeile funktionieren die Container Queries nicht. Der Browser-Support ist inzwischen gut; Container Queries sind produktionstauglich.
Mehr dazu unter https://developer.mozilla.org/de/docs/Web/CSS/Guides/Containment/Container_queries.

CSS if() — Bedingungslogik im Stylesheet

Das ist ein konzeptioneller Wendepunkt der aktuellen CSS-Entwicklung: Mit der if()-Funktion lassen sich erstmals Inline-Bedingungen direkt im Stylesheet formulieren — ohne Umweg über SASS oder JavaScript.

  .button {
            width: if(style(--size: large): 200px; else: 100px);
        }

In Kombination mit Custom Properties entstehen damit Design-Systeme, die direkt auf Kontextbedingungen oder Systemeinstellungen reagieren — etwa auf den Dark Mode des Betriebssystems — vollständig in CSS, ohne eine einzige Zeile JavaScript.

Browser-Support: Im Moment (Juni 2026) noch nicht produktionstauglich. if() ist in Chrome hinter einem experimentellen Flag verfügbar und wird gerade standardisiert. Wer das Prinzip heute verstehen will, kann es in Chrome Canary ausprobieren — für echte Projekte ist es noch zu früh.

@function — eigene CSS-Funktionen definieren

Noch einen Schritt weiter geht @function: Damit lassen sich eigene, wiederverwendbare CSS-Funktionen definieren, die dann wie native CSS-Funktionen aufgerufen werden.

@function --spacing(--factor) {
            result: calc(var(--factor) * 8px);
        }

        .card {
            padding: --spacing(2);
            /* ergibt 16px */
            margin: --spacing(3);
            /* ergibt 24px */
        }

Das klingt nach einer Kleinigkeit, ist aber konzeptionell ein großer Schritt: Bisher konnte man über Custom Properties Werte wiederverwenden, aber keine Berechnungslogik kapseln. @function schließt diese Lücke. Besonders mächtig wird es in Kombination mit if(): Theming-Logik, die früher JavaScript oder einen Build-Prozess brauchte, lässt sich damit vollständig in CSS abbilden.
Browser-Support: Aktuell nur als Prototyp in Chrome Canary mit aktiviertem „Experimental Web Platform Features“-Flag. Für den Produktionseinsatz mindestens ein bis zwei Jahre entfernt — aber als Ausblick schon interessant, weil es zeigt, wohin CSS sich entwickelt.

Native Carousels ohne JavaScript

Wer schon mal einen Karussell-Slider gebaut hat, weiß wie mühsam das mit JavaScript ist. CSS löst das Problem jetzt nativ mit zwei neuen Pseudo-Elementen:

.slider {
            overflow-x: scroll;
            scroll-snap-type: x mandatory;
        }

        .slider::scroll-button(next) {
            content: "→";
        }

        .slider::scroll-marker-group {
            display: flex;
            gap: 8px;
        }

::scroll-button() erzeugt browser-native Scroll-Buttons, ::scroll-marker() die Navigationspunkte darunter. Das Ergebnis ist ein zugänglicher, performanter Karussell — ohne JavaScript, ohne externe Bibliothek.

Browser-Support: Chrome unterstützt den Großteil dieser Features, Firefox und Safari sind noch nicht vollständig dabei. Für Produktionsprojekte ist das also noch mit Vorsicht einzusetzen — als Progressive Enhancement aber bereits interessant.

select-Element mit Gestaltungsmöglichkeiten

Das native <select>-Element ließ sich bislang kaum stylen. Wer einen angepassten Dropdown wollte, musste ihn komplett in JavaScript nachbauen — mit allem, was daran hängt: Accessibility, Keyboard-Navigation, Event-Handler.
Das ändert sich jetzt:

select {
            appearance: base-select;
        }

        select::picker(select) {
            border: 2px solid var(--farbe-akzent);
            border-radius: 8px;
        }

Mit appearance: base-select öffnet sich das Element für CSS-Styling, ohne die native Accessibility zu verlieren. Was früher 150 Zeilen JavaScript erforderte, geht jetzt mit wenigen CSS-Eigenschaften.

Browser-Support: Chrome hat das Feature implementiert, browserübergreifende Unterstützung ist noch im Aufbau. Bis Ende 2026 sollte die Lage besser aussehen.

Neue Farbräume: oklch und oklab

Mit oklch und oklab stehen zwei neue Farbformate zur Verfügung, die gegenüber dem klassischen rgb() oder hsl() einen entscheidenden Vorteil haben — sie sind „wahrnehmungslinear“. Das bedeutet: Farbverläufe sehen gleichmäßiger aus, und Helligkeitsabstufungen wirken konsistenter, weil das Modell näher an der menschlichen Farbwahrnehmung liegt.

/* klassisch */color: hsl(200, 80%, 50%);  
/* modern */color: oklch(65% 0.15 220);

oklch ist besonders nützlich für Design-Systeme, in denen Farbpaletten systematisch aufgebaut werden — etwa für Hover-Zustände, Abstufungen oder barrierefreie Kontrastkombinationen.

Browser-Support: Ist OK. oklch und oklab funktionieren in allen modernen Browsern und sind produktionstauglich.

@scope — gezieltes CSS ohne Spezifitätsprobleme

@scope löst ein klassisches CSS-Problem: Styles, die nur innerhalb einer bestimmten Komponente gelten sollen, ohne die Spezifität künstlich hochzutreiben oder auf Klassen-Namenskonventionen wie BEM angewiesen zu sein.

@scope (.card) {
            h2 {
                font-size: 1.25rem;
            }

            p {
                color: var(--farbe-text-sekundaer);
            }
        }

Die h2- und p-Regeln greifen hier nur innerhalb von .card — ohne dass man .card h2 schreiben und damit die Spezifität erhöhen müsste. Für komponentenbasierte Projekte ist das ein echter Gewinn.
Browser-Support: Chrome und Safari unterstützen @scope, Firefox ist im Moment (Juni 2026) noch dabei. Für viele Projekte ist es bereits einsetzbar, aber mit Fallback-Strategie.
Mehr dazu unter https://developer.mozilla.org/de/docs/Web/CSS/Reference/At-rules/@scope.

@layer — Schluss mit Spezifitätskonflikten

@layer ist von allen Features in diesem Artikel das ausgereifteste und gleichzeitig das am meisten unterschätzte. Es ist seit 2022 in allen modernen Browsern verfügbar und löst ein Problem, das jeden trifft, der mit fremdem CSS arbeitet: unkontrollierbare Spezifität.

Das Problem ist bekannt: Man bindet ein Framework oder Plugin ein, und plötzlich schlägt dessen CSS die eigenen Styles. Man schreibt !important, das Framework antwortet mit !important, und irgendwann hat man ein Stylesheet voller Hacks. @layer löst das strukturell, indem es eine explizite Prioritätsreihenfolge für CSS-Quellen definiert — unabhängig von Spezifität.

 /* Reihenfolge festlegen: spätere Layer gewinnen */
        @layer reset, framework, komponenten, overrides;

        @layer framework {

            /* Styles eines eingebundenen Frameworks */
            .button {
                background: blue;
            }
        }

        @layer komponenten {

            /* Eigene Styles gewinnen immer — egal wie spezifisch das Framework ist */
            .button {
                background: var(--farbe-akzent);
            }
        }

Besonders relevant für die Arbeit mit WordPress und Page Buildern: Theme-Styles, Plugin-CSS und eigene Anpassungen lassen sich sauber in Layer trennen.
Was früher mit !important erzwungen wurde, funktioniert damit ohne Hacks. Styles außerhalb eines @layer gewinnen übrigens immer gegen layered Styles — das ist nützlich, um gezielt einzelne Überschreibungen ohne Layer-Logik zu platzieren.

Browser-Support: Ausgezeichnet. @layer wird von Chrome 99+, Firefox 97+, Safari 15.4+ und Edge 99+ unterstützt — globale Abdeckung über 96 Prozent. Sofort produktionstauglich.

Scroll-driven Animations — Animationen ohne JavaScript

Scroll-Animationen gehören zu den Effekten, die Websites lebendig machen: Elemente, die beim Scrollen einblenden, Fortschrittsbalken, Parallax-Effekte. Bisher war dafür JavaScript Pflicht — IntersectionObserver, GSAP oder ähnliche Bibliotheken. CSS kann das jetzt nativ.

Das Prinzip: Eine normale @keyframes-Animation wird nicht zeitgesteuert abgespielt, sondern an den Scroll-Fortschritt gekoppelt.

@keyframes einblenden {
            from {
                opacity: 0;
                translate: 0 40px;
            }

            to {
                opacity: 1;
                translate: 0 0;
            }
        }

        .teaser {
            animation: einblenden linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 100%;
        }

animation-timeline: view() koppelt die Animation an die Sichtbarkeit des Elements im Viewport — sobald .teaser ins Bild scrollt, läuft die Animation ab. Kein JavaScript, kein Event-Listener, kein externes Script.

Es gibt zwei Varianten: scroll() koppelt die Animation an die Scroll-Position eines Containers — nützlich für Leseanzeigen oder Parallax. view() reagiert auf die Sichtbarkeit eines Elements — nützlich für Einblend-Effekte.

Ein wichtiger Hinweis für barrierefreies Design: Scroll-Animationen sollten immer in eine @media (prefers-reduced-motion: no-preference)-Abfrage gewickelt werden, damit Nutzer, die Animationen systemweit deaktiviert haben, nicht beeinträchtigt werden.

 .teaser {
            @media (prefers-reduced-motion: no-preference) {
                animation: einblenden linear both;
                animation-timeline: view();
                animation-range: entry 0% entry 100%;
            }
        }

Browser-Support: Chrome und Edge unterstützen Scroll-driven Animations vollständig. Safari hat das Feature mit Version 26 (2025) implementiert. Firefox hat es hinter einem Flag — vollständige Unterstützung steht kurz bevor. Für progressive Enhancement bereits einsetzbar; für kritische UI-Elemente noch mit Fallback arbeiten.
Siehe auch: „Snippets Code“ https://www.youtube.com/watch?v=0TnO1GzKWPc 

Auch HTML entwickelt sich weiter

In HTML überschlagen sich die Ereignisse nicht so, wie bei CSS. Aber auch hier tut sich was.
Zum Beispiel die Popover-API, Web-Components oder …
HTML Invoker Commands (oft einfach Invoker Commands genannt) zum Beispiel sind ein relativ neues HTML-Feature, mit dem HTML-Elemente andere Elemente ohne JavaScript steuern können. Sie gehören zu den aktuellen Bemühungen, mehr Interaktivität direkt in HTML und CSS zu ermöglichen.

<button command="show-modal" commandfor="dialog">
    Dialog öffnen
</button>
<dialog id="dialog">
    Hallo Welt!
</dialog>

Die Idee ist ähnlich wie bei den bereits etablierten <dialog>-Elementen: Statt JavaScript zu schreiben, beschreibst du direkt im HTML, welche Aktion ausgelöst werden soll.
Invoker Commands sind ein sehr neues Feature und werden zur Zeit (Juni 2026) noch nicht von allen Browsern vollständig unterstützt. Sie sind aber ein gutes Beispiel dafür, wohin sich HTML entwickelt.
Siehe auch https://www.youtube.com/watch?v=vO6BQqflRsM von Coding2GO.

Es lohnt sich

Soviel zum Thema CSS und fortgeschrittene Produktionstechniken im Webbereich.
Dieser Artikel richtet sich in erster Linie an diejenigen, die zwischen der Gestaltungs- und der Programmierungs-Abteilung in der Agentur sitzen. Auf Themen, wie Skills in Gestaltung oder Frontendentwicklung mit React bin ich hier deswegen nicht eingegangen. Die Grenze zu diesen Bereichen sollte man dabei kennen; nicht um sie nie zu überschreiten, sondern um zu wissen, wo das eigene Berufsbild endet und ein anderes beginnt.

Also – auch wenn du mit Homepagebaukästen oder ContentManagementSystemen arbeiten solltest, hilft ein Grundverständnis von HTML und CSS immer. Wer heute im Frontend arbeitet, sollte die neuen Möglichkeiten kennen und die Entwicklung gerade von CSS aufmerksam verfolgen. Es lohnt sich hier also, auf jeden Fall am Ball zu bleiben.

Wie funktioniert eigentlich KI?

Künstliche Intelligenz übernimmt komplexe Aufgaben wie Textgenerierung, Analyse oder Automatisierung. Ein gutes Beispiel dafür ist ChatGPT, eine der bekanntesten KI-Plattformen weltweit. Entwickelt und betrieben wird sie von OpenAI, einem US-amerikanischen Unternehmen, das 2015 gegründet wurde.

Was viele nicht wissen: ChatGPT ist die Plattform – das Modell dahinter ist etwas anderes. OpenAI entwickelt unter der Bezeichnung GPT (Generative Pre-trained Transformer) verschiedene Modellgenerationen, die sich in Leistung, Geschwindigkeit und Einsatzbereich unterscheiden. GPT-5, im August 2025 veröffentlicht, ist dabei ein vereinheitlichtes System: Es entscheidet intern, wann es schnell antwortet und wann es länger „nachdenkt“, um präzisere Antworten zu liefern.
ChatGPT greift je nach Kontext und Abonnement auf unterschiedliche Varianten dieser Modelle zurück: Die kostenlose Version arbeitet mit einem abgespeckten Modell, während zahlende Nutzer Zugang zu leistungsstärkeren Varianten – inklusive erweiterter Reasoning-Modi – erhalten. Die Plattform ist also das Interface, das KI-Modell ist die eigentliche Intelligenz darunter.

OpenAI als Unternehmen trainiert und hostet die Modelle und stellt sie über APIs (über Programmierschnittstellen) auch anderen Anbietern bereit. Dieses Prinzip – eine Plattform, mehrere Modelle – findet sich bei nahezu allen großen KI-Anbietern. Es ermöglicht, verschiedene Anforderungen mit demselben Produkt abzudecken: schnelle Antworten für einfache Anfragen, tiefere Verarbeitung für komplexe Aufgaben.

Anbieter und Plattformen

Natürlich ist ChatGPT der Firma OpenAI nicht der einzige Anbieter in dem Bereich. Statt eines klaren Marktführers gibt es heute ein großes Feld verschiedener Akteure, die in unterschiedlichen Disziplinen die Nase vorn haben. Die Frage lautet also nicht „Welche KI ist die beste?“, sondern „Welche KI ist die beste für meinen Anwendungsfall?“.

Bei Anthropic steht aktuell die Claude 3-Modellreihe (Opus, Sonnet und Haiku) im Zentrum. Diese Modelle sind ebenfalls große Sprachmodelle, unterscheiden sich aber in Trainingsansatz und Zielsetzung: stärkerer Fokus auf Sicherheit, sauberen Antworten, Steuerbarkeit und konsistentes Verhalten über lange Kontexte hinweg.

Qwen ist eine KI-Modellfamilie von Alibaba. Qwen gehört aktuell zu den günstigsten leistungsfähigen KI-Modellen am Markt — besonders im API-Bereich. Für viele Anwendungen kostet Qwen nur einen Bruchteil von OpenAI, Anthropic oder Google Gemini.
Die KI steht größtenteils unter der Apache 2.0 Lizenz zur Verfügung. Sie erlaubt kommerzielle Nutzung, Modifikation und Weiterverteilung. Qwen bietet eine interessante Kombination aus hoher Leistungsfähigkeit, vergleichsweise offener Verfügbarkeit und der Möglichkeit zum lokalen Betrieb. Mit dem lokalen Betrieb behältst du die Kontrolle über deine Daten oder kannst Modelle an eigene Workflows anpassen.

Aus Europa kommt mit Mistral AI ein weiterer Anbieter mit Modellen wie Mistral 7B oder Mixtral 8. Ziel ist es, leistungsfähige Alternativen mit stärkerer Offenheit und europäischer Datenhoheit zu etablieren. Die Modelle sind sowohl als Open-Source-Varianten, als auch über eine API für Unternehmen verfügbar.

Google verfolgt mit Gemini und den Gemini 1.5 Pro- und Flash-Modellen einen stärker integrierten Ansatz. Die Gemini-Modelle sind multimodal (ein multimodales System kann Text, Bilder und weitere Medien zusammen verarbeiten) und sie sind tief in Googles Produktlandschaft eingebunden (Google-Suche, Workspace, Android). Technisch liegt der Fokus auf Skalierbarkeit, Tool-Nutzung und der Kombination mit proprietären Datenquellen.

Auch Microsoft spielt eine zentrale Rolle, weniger durch eigene Basismodelle als durch Integration. Über Azure AI werden Modelle von OpenAI und anderen Anbietern in Unternehmensumgebungen bereitgestellt, ergänzt durch Copilot-Funktionen in Office, GitHub und Windows. Der Fokus liegt auf Produktivitätsanwendungen und Enterprise-Integration.

Die chinesische Plattform Deepseek nutzt eigene KI-Modelle wie Deepseek Coder (für Codegenerierung) und Deepseek Chat (für Sprachmodelle). Das Besondere an Deepseek ist der Fokus auf hoher Performance bei geringen Kosten.

Meta setzt mit der Llama-Familie auf ein offenes Modell. Llama ist in verschiedenen Größen verfügbar und kann lokal oder in eigenen Infrastrukturen betrieben werden. Der strategische Unterschied liegt in der Verfügbarkeit: Meta fördert ein Ökosystem aus Forschung und Anpassung, statt primär geschlossene APIs zu kontrollieren.

Perplexity ist eine Mischung aus Suchmaschine und KI-Assistent. Die Plattform nutzt große Sprachmodelle, um Fragen direkt zu beantworten, statt nur Links anzuzeigen – ähnlich wie ein Chatbot, aber mit stärkerem Fokus auf aktuelle Informationen und Quellenangaben. Die Plattform kombiniert dabei mehrere KI-Modelle verschiedener Anbieter und wählt je nach Anfrage das passende aus.

Du findest am Ende dieses Artikels eine ausführliche Tabelle mit allen aktuell bedeutenden KI-Plattformen und den dazugehörigen Anbietern.

KI-Modelle – die Technik hinter den Plattformen

Was treibt nun ein KI-Modell im Inneren an? Ein Large Language Model (LLM) ist ein Programm, das darauf trainiert wurde, Text zu verstehen und zu erzeugen. Der Name ist wörtlich zu nehmen: Es handelt sich um ein Modell für Sprache – und zwar ein sehr großes.

Das Training funktioniert folgendermaßen: Das Modell liest enorme Mengen an Text – Bücher, Webseiten, Artikel – und lernt dabei statistische Muster. Es lernt also nicht „was wahr ist“, sondern „welche Wörter und Sätze wahrscheinlich zusammenpassen“. Aus diesen Mustern kann es später selbst Texte erzeugen, die sinnvoll klingen.
Das Wort „Modell“ kommt aus der Mathematik: Intern ist ein LLM eine riesige Sammlung von Zahlenwerten – sogenannte Parameter – die während des Trainings so justiert werden, dass das System immer bessere Antworten liefert. GPT-4 etwa soll über eine Billion solcher Parameter haben.
Was ein LLM nicht ist: eine Datenbank, die Fakten nachschlägt. Es gibt keine Suche im Hintergrund – das Modell generiert Antworten auf Basis seiner gelernten Muster. Das erklärt auch, warum KI-Modelle manchmal Dinge erfinden, die falsch sind – man nennt das „Halluzinieren“.

Kurz zusammengefasst: Ein LLM ist ein sehr komplexes, mathematisch trainiertes System, das gelernt hat, wie menschliche Sprache funktioniert – und das dieses Wissen nutzt, um sinnvolle Texte zu produzieren.

FAQs

Und nun zu den wichtigsten Fragen rund um KI und ihren Antworten …

Was ist ein Prompt?

Ein Prompt im Zusammenhang mit KI ist eine Eingabe oder Anweisung, die du an ein KI-System gibst, um eine bestimmte Antwort oder Aktion zu erhalten. Stell dir den Prompt wie eine Frage, eine Aufgabe oder eine Beschreibung vor, die der KI sagt, was sie tun soll.

Was ist „Prompt-Engineering“ und wie schreibe ich einen guten Prompt?

Prompt-Engineering ist die Kunst, Anweisungen an ein KI-Modell so zu formulieren, dass man möglichst präzise und nützliche Ergebnisse bekommt. Ein paar Grundregeln für einen guten Prompt:
Sei konkret und klar
Statt „Schreib mir was über CSS“ lieber: „Erkläre CSS Grid in drei kurzen Absätzen für Einsteiger, ohne Fachbegriffe.“
Gib Kontext
Je mehr die KI über deinen Hintergrund und das Ziel weiß, desto besser die Antwort. Zum Beispiel: „Ich schreibe einen Blogartikel für Web-Entwickler mit Grundkenntnissen…“.
Definiere das Format
Sag der KI, wie die Antwort aussehen soll – als Liste, als Fließtext, in einer bestimmten Länge oder Sprache.
Verwende Beispiele
Wenn du einen bestimmten Stil oder eine Struktur willst, zeig ein Beispiel direkt im Prompt.
Weise der KI eine Rolle zu
„Agiere als erfahrener Frontend-Entwickler und erkläre…“ führt oft zu fokussierteren Antworten.
Iteriere
Selten ist der erste Prompt der beste. Verfeinere ihn schrittweise, bis das Ergebnis passt.
Lass die KI den Prompt für dich schreiben.
Du kannst die KI dafür nutzen deine Prompts zu verbessern oder von Grund auf zu erstellen. Zum Beispiel mit „Schreibe mir einen Prompt für ChatGPT, um einen Artikel zum Thema XYZ schreiben zu lassen“ oder „Schreibe mir einen Prompt für Midjourney, um ein Bild für XYZ zu erstellen“.
Für eine tiefere Einführung lohnt sich ein Blick in Anthropics offizielle Prompt-Engineering-Dokumentation unter docs.claude.com.

Was ist ein Large Language Model?

Ein LLM (Large Language Model) ist ein KI-Modell, das auf riesigen Mengen an Textdaten trainiert wurde, um menschliche Sprache zu verstehen und zu generieren. Es kalkuliert kontextabhängig Wahrscheinlichkeiten um eine Antwort zu generieren und basiert technisch gesehen meist auf Transformer-Architekturen, um das nächste Wort in einer Sequenz vorherzusagen.
Die Transformer-Architektur ist ein Modell aus dem Bereich des Maschinellen Lernens, das Sequenzen (z. B. Text) mithilfe von Aufmerksamkeit („Self-Attention“) verarbeitet, statt sie Schritt für Schritt zu lesen. Sie bildet die Grundlage moderner Sprachmodelle und ermöglicht effizientes paralleles Verarbeiten sowie ein besseres Verständnis von Kontext.

LLMs unterscheiden sich z. B. in:
· Größe (Parameteranzahl)
· Trainingsdaten
· Offenheit (Open Source vs. proprietär)
· Spezialisierung (z. B. Code, Dialog, Wissenschaft)

Siehe auch „Large Language Modelle einfach erklärt“: https://www.youtube.com/watch?v=SLcAtQQ483Y und zur Transformer-Architektur: https://www.youtube.com/watch?v=LPZh9BOjkQs sowie https://de.wikipedia.org/wiki/Large_Language_Model.

Was sind Tokens?

Tokens sind die kleinsten Einheiten, in die ein KI-Modell Text aufteilt – das können einzelne Wörter, Silben oder auch nur einzelne Zeichen sein. Sprachmodelle verarbeiten und generieren Text ausschließlich in Form dieser Tokens, weshalb Kosten und Limits bei KI-APIs meist in Token-Anzahl gemessen werden.

Welche Fehler machen Anfänger gerne, wenn sie KI einsetzen?

Die häufigsten Anfängerfehler: KI-Outputs blind vertrauen, ohne Fakten gegenzuprüfen. Zu vage prompten – je konkreter die Anweisung, desto besser das Ergebnis. Und die erste Antwort als finale Antwort nehmen, statt den Dialog zu nutzen und nachzufassen.
Was viele außerdem unterschätzen: KI klingt immer selbstsicher, auch wenn sie falsch liegt. Und sie ist kein Ersatz für echtes Urteilsvermögen – bei aktuellen Daten, komplexen Berechnungen oder kontextsensiblen Entscheidungen stößt sie schnell an ihre Grenzen.
Zum Thema Programmieren lernen: Hier ist Vorsicht angebracht. Wer sich Code einfach generieren lässt, ohne ihn zu verstehen, lernt im Grunde nichts. KI kann beim Lernen aber sehr hilfreich sein – etwa um Fehlermeldungen zu erklären, Konzepte zu veranschaulichen oder eigenen Code Schritt für Schritt überprüfen zu lassen. Die sinnvollste Nutzung ist also: selbst schreiben, dann mit KI reflektieren – nicht umgekehrt.

Was kann KI und was kann sie nicht?

KI kann mit Daten arbeiten: Muster erkennen, Texte zusammenfassen, übersetzen, Bilder erzeugen und Routineaufgaben automatisieren. Sie ist besonders stark bei klaren, wiederholbaren Aufgaben und bei allem, was sich gut aus Beispielen lernen lässt.
KI kann aber keine echten Gefühle haben, kein Bewusstsein entwickeln und keine moralische Verantwortung übernehmen. Sie versteht Situationen nicht wie ein Mensch und kann in unbekannten oder unklaren Fällen Fehler machen oder falsche Antworten liefern, deshalb muss man Ergebnisse prüfen.

Klaut mir die KI den Job?

Kurz gesagt: Nein – aber sie verändert ihn spürbar.
KI ersetzt selten ganze Berufe, sondern vor allem klar strukturierte, wiederholbare Teilaufgaben. Alles, was stark regelbasiert ist (Texterstellung nach Schema, einfache Analysen, Standard-Code), lässt sich gut automatisieren – genau hier sind Systeme wie ChatGPT, Gemini oder Claude besonders effizient.
Gleichzeitig entstehen neue Anforderungen:

• Bewertung statt Erstellung (Output prüfen, einordnen, korrigieren)
• Steuerung statt Ausführung (Prompts, Workflows, Tool-Kombination)
• Kontext und Verantwortung (fachliche Einordnung, Entscheidungen)

Berufe mit hohem Anteil an kreativer, sozialer oder strategischer Arbeit sind deutlich robuster. Ebenso Tätigkeiten, die stark von Erfahrung geprägt sind. KI kann hier unterstützen, aber selten vollständig ersetzen.
Realistisch ist daher ein anderes Szenario: Menschen, die KI produktiv einsetzen, ersetzen nicht andere Menschen – sondern diejenigen, die sie nicht nutzen.
Die Frage ist weniger „Werde ich ersetzt?“, sondern „Wie verändert sich mein Arbeitsprofil?“.
Wer lernt, KI als Werkzeug einzusetzen, verschiebt sich typischerweise in Richtung höherwertiger, steuernder Tätigkeiten.
Was bleibt – und sogar wichtiger wird – ist die Fähigkeit, gute Fragen zu stellen, Ergebnisse zu beurteilen und Kontext zu liefern, den eine KI nicht hat. Wer KI-Tools gut einsetzen kann, erledigt in einer Stunde, wofür er früher einen Tag gebraucht hat.
Das klingt nach Bedrohung, ist aber auch eine echte Chance: Lerne KI nutzen (z. B. Tools integrieren), nicht bekämpfen – das schützt deinen Job.

Was versteht man unter dem Begriff „Generative KI“?

„Generative KI“ bezeichnet KI-Systeme, die neue Inhalte erzeugen können, anstatt nur bestehende Daten zu analysieren. Dazu gehören z. B. Texte, Bilder, Musik oder Code. Bekannte Beispiele sind ChatGPT und Claude für Texte, Midjourney oder DALL·E für Bilder, und Suno für Musik

Was versteht man unter „Mustererkennung“ in der KI?

Muster-Erkennung bedeutet, dass ein KI-Modell aus Daten bestimmte Regelmässigkeiten ableiten kann. D.h. es lernt aus den Beispielen heraus Vorhersagen zu treffen; zum Beispiel, welche Bilder ein bestimmtes Objekt zeigen oder welche Texte eine bestimmte Stimmung haben.

Woher kommen die Trainingsdaten der KI?

Trainingsdaten von KIs kommen meist aus mehreren Quellen: öffentlich verfügbare Webseiten, Bücher, wissenschaftliche Texte, Foren, Nachrichten, Bilder, Audio, Videos sowie speziell zusammengestellte Datensätze. Oft werden sie zusätzlich von Menschen bereinigt, beschriftet und ergänzt; teils kommen auch synthetische, also künstlich erzeugte Daten dazu.
Nicht jede KI wird mit denselben Daten trainiert. Ein Bilderkennungsmodell braucht andere Trainingsdaten als ein Chatbot oder ein medizinisches Modell.

Was sind Agents und KI-Workflows?

KI-Agents sind autonome KI-Systeme, die Ziele verfolgen, ihre Umgebung wahrnehmen, Entscheidungen treffen und Aktionen ausführen.
Siehe auch KI-Agents und Workflows von Jonas Keil: https://www.youtube.com/watch?v=yN2iYWbwFFs , So funktionieren KI Agenten in ChatGPT und Co.: https://www.youtube.com/watch?v=hiCthsCiJow,
Felicia Simon über die Entwicklungen bei KI-Agenten und KI generell: https://youtu.be/wRQUipPUQ3U?t=646

Was ist das MCP-Protokoll?

Das Model Context Protocol (MCP) ist ein offener Standard von Anthropic (November 2024), der die Kommunikation zwischen KI-Modellen (z. B. LLMs oder Agents) und externen Tools, Datenquellen oder Systemen standardisiert. Es folgt einem Client-Server-Modell: Der Host (KI-Anwendung) nutzt Clients, um über JSON-RPC 2.0 Requests an Server zu senden, die Daten (z. B. Datenbanken, APIs) oder Funktionen bereitstellen – lokal via stdio oder remote via SSE. Siehe auch https://www.bigdata-insider.de/was-ist-das-model-context-protocol-mcp-a-0e33ecbbb78766be468420d2f8284ad5/
MCP löst das Problem individueller API-Adapter, indem es eine universelle „Sprache“ schafft, ähnlich HTTP fürs Web. Dadurch können Agents dynamisch auf Echtzeitdaten zugreifen, Aktionen ausführen und Workflows automatisieren, ohne modell- oder tool-spezifische Anpassungen.
In der Praxis vereinfacht MCP die Interoperabilität in Agentic AI: Ein Agent kann z. B. eine Datenbank abfragen oder GitHub-APIs nutzen, ohne benutzerdefinierte Logik. Es wird in IDEs, Chatbots und Enterprise-Tools integriert, um skalierbare, sichere Verbindungen zu gewährleisten.

Ist das MCP-Protokoll sicher?

Das Model Context Protocol (MCP) ist grundsätzlich kein unsicheres Protokoll, sondern ein Ansatz, um den Zugriff von KI-Modellen auf externe Daten und Tools strukturierter und kontrollierter zu gestalten. Es kann sogar helfen, Sicherheit zu verbessern, weil Zugriffe klar definiert und besser überprüfbar sind. Allerdings hängt die tatsächliche Sicherheit stark davon ab, wie MCP implementiert wird. Wo Risiken liegen:

• Unsichere Tool-Implementierungen
  Wenn ein angebundenes Tool schlecht abgesichert ist (z. B. keine Authentifizierung), hilft auch MCP nicht viel.
• Prompt Injection / Tool Abuse
  Ein Modell kann durch manipulierte Eingaben dazu gebracht werden, unerwünschte Tool-Aufrufe zu machen (klassisches LLM-Risiko).
• Datenlecks durch falsche Konfiguration
  Wenn zu viele Rechte vergeben werden, kann das Modell auf sensible Daten zugreifen, die es eigentlich nicht sehen sollte.
• Transport-Sicherheit
  MCP selbst definiert nicht zwingend die Transportverschlüsselung – wenn kein TLS genutzt wird, kann Datenverkehr abgefangen werden.

Insgesamt gilt: MCP kann eine sichere Grundlage bieten, ersetzt aber keine saubere Sicherheitsarchitektur. Entscheidend ist, wie sorgfältig Zugriffskontrollen, Absicherung der Tools und Überwachung umgesetzt werden.

Was ist OpenClaw und was kann das System?

OpenClaw ist eine Open-Source-Software, mit der sich ein KI-Agent auf dem eigenen Computer betreiben lässt. Gesteuert wird er über Messenger wie WhatsApp, Telegram oder Signal – Aufgaben werden einfach als Nachricht übermittelt, OpenClaw erledigt sie selbstständig. Das Projekt wurde 2025 vom österreichischen Entwickler Peter Steinberger gestartet und sorgte Anfang 2026 für großes Aufsehen in der KI-Community.
OpenClaw kann Dateien lesen und schreiben, Shell-Befehle ausführen, E-Mails senden, Websites aufrufen und Aufgaben über verschiedene Anwendungen hinweg automatisieren. Im Hintergrund nutzt es bestehende KI-Modelle wie Claude oder ChatGPT als „Gehirn“. Der entscheidende Unterschied zu einem normalen Chatbot: OpenClaw wartet nicht auf Eingaben, sondern kann auch eigenständig im Hintergrund aktiv werden.
Das birgt allerdings Risiken. Da die Software auf Betriebssystemebene arbeitet und auch ohne aktive Nutzung Aktionen ausführen kann, empfiehlt sich der Einsatz ausschließlich in kontrollierten Umgebungen – nicht auf Geräten mit Zugang zu sensiblen Daten.

Kann ich eine KI lokal auf meinem PC laufen lassen?

Ja, du kannst KI-Modelle lokal auf deinem Rechner laufen lassen – das hängt aber stark von deiner Hardware ab. Moderne Tools wie Ollama oder LM Studio machen es relativ einfach, kleinere bis mittelgroße Modelle offline zu nutzen.
Für gute Ergebnisse brauchst du idealerweise eine starke CPU, viel RAM (mind. 16 GB, besser 32 GB) und – wenn möglich – eine GPU; ohne GPU laufen Modelle zwar auch, aber deutlich langsamer. Artikel von heise dazu: https://www.heise.de/news/Lokale-KI-Modelle-sind-jetzt-brauchbar-und-auf-dieser-Hardware-laufen-sie-10864518.html.

Warum laufen KI-Modelle so gut auf Grafikkarten?

Grafikkarten (GPUs) wurden ursprünglich für 3D-Spiele entwickelt, sind aber zufällig perfekt für KI-Training geeignet – weil sie tausende einfache Rechenoperationen gleichzeitig ausführen können, statt wie eine CPU wenige komplexe nacheinander.

Welche Hardware und was für ein Rechenzentrum brauche ich, um eine Plattform wie ChatGPT laufen zu lassen?

Kurz gesagt: unvorstellbar viel. Der Betrieb eines Modells in ChatGPT-Größenordnung erfordert tausende High-End-GPUs (meist NVIDIA H100 oder ähnliche), die jeweils 30.000–40.000 Dollar kosten – OpenAI betreibt geschätzt über 100.000 solcher Chips. Dazu kommen spezialisierte Netzwerkinfrastruktur mit extrem niedriger Latenz, riesige Mengen an Arbeitsspeicher, Stromanschlüsse im Megawatt-Bereich und aufwändige Kühlung. Das Training eines großen Modells kostet schnell Millionen bis Milliarden Euro und benötigt Wochen auf solchen Clustern. Der Betrieb (also das Beantworten von Anfragen) ist etwas weniger aufwändig, aber immer noch weit entfernt vom „Heim-PC-Niveau“. Für Einzelpersonen oder kleine Unternehmen ist das schlicht unrealistisch; realistischer ist es, kleinere Open-Source-Modelle lokal zu betreiben oder über Cloud-APIs auf bestehende Modelle zuzugreifen.

Wie viel Strom benötigt so ein Rechenzentrum?

Ein einzelnes großes KI-Rechenzentrum verbraucht typischerweise zwischen 100 und 500 Megawatt – das entspricht dem Strombedarf einer mittleren Großstadt. Zum Vergleich: Eine einfache Google-Suche verbraucht etwa 0,3 Wattstunden, eine Anfrage an ChatGPT schätzungsweise das 10-fache davon. Der Stromhunger ist so enorm, dass große Tech-Konzerne wie Microsoft, Google und Amazon inzwischen massiv in eigene Kernkraftwerke oder Solarparks investieren – weil das öffentliche Stromnetz in vielen Regionen schlicht nicht mithalten kann.

Macht uns die KI dümmer?

Das ist eine spannende Frage, die Wissenschaftler und Gesellschaft gerade intensiv diskutieren! Es gibt Argumente auf beiden Seiten: Einerseits besteht die Sorge, dass wir durch das ständige Auslagern von Denkaufgaben an KI unsere eigenen Fähigkeiten wie kritisches Denken, Problemlösen oder Schreiben verlernen könnten – ähnlich wie das Navi uns schlechter im Orientieren gemacht hat. Andererseits kann KI als Werkzeug uns entlasten und Kapazitäten für kreativeres und komplexeres Denken freimachen, wenn wir sie bewusst einsetzen.

Die entscheidende Frage ist eigentlich: Wie nutzen wir KI? Wer sie unkritisch als Ersatz für eigenes Denken nutzt, riskiert tatsächlich einen Kompetenz-Verlust. Wer sie als Assistent einsetzt und die Ergebnisse hinterfragt, kann davon profitieren.

Ist eine KI voreingenommen, hat sie Vorurteile?

Ja, definitiv – KI-Modelle spiegeln die Vorurteile wider, die in ihren Trainingsdaten stecken, und da das Internet nun mal von bestimmten Kulturen, Sprachen und Perspektiven dominiert wird, sind westliche, englischsprachige Sichtweisen in westlichen KIs deutlich überrepräsentiert. Dazu kommt Bias (Voreingenommenheit) durch menschliches Feedback beim Training: Die Menschen, die ein Modell bewerten und verfeinern, bringen ihre eigenen blinden Flecken mit. Hersteller wie Anthropic oder OpenAI arbeiten aktiv daran, diese Verzerrungen zu reduzieren – aber vollständig neutral ist kein Modell, und wer KI kritisch nutzt, sollte das im Hinterkopf behalten.

Sind meine Daten bei einer KI sicher?

KI verarbeitet oft sensible Daten (Prompts, Dateien), die gespeichert, trainiert oder an Dritte weitergegeben werden können. Es gibt hier zwar europäische Datenschutzrichtlinien, aber die lassen sich nur in Europa durchsetzen. Außerhalb Europas (USA, China) muss man damit rechnen, dass staatliche Stellen Zugriff auf diese Informationen haben. Nur beim lokalen Betrieb eines Open-Source LLMs (Qwen, Llama, Mistral) auf dem eigenen Rechner bist du einigermaßen gegen diese Zugriffe geschützt.

Welche rechtlichen Rahmenbedingungen zur KI gibt es?

Einen AI Act der EU gibt es seit 2024. Es ist das weltweit erste umfassende Gesetz zur Regulierung von KI. Er verfolgt einen risikobasierten Ansatz, bei dem die Anforderungen je nach Risikostufe des KI-Systems unterschiedlich streng ausfallen – von komplett verbotenen Anwendungen bis hin zu weitgehend unregulierten. Er könnte zum globalen Standard werden (ähnlich wie DSGVO).

Kann ich mich dagegen wehren, wenn meine Fotos von anderen per KI modifiziert und publiziert werden?

Kann ich die weitere Verbreitung eines mittels Bild-zu-Bild-KI erstellten Folgewerks untersagen lassen? Im Urteil vom 2. April 2026 hat der 20. Zivilsenat des Oberlandesgerichts Düsseldorf eine entsprechende Beschwerde einer Fotografin zurückgewiesen. Demnach ist zu prüfen, ob exakt die kreativen Elemente übernommen wurden, welche die persönliche Leistung der Fotografin ausmachen. Das können etwa Kameraeinstellung, spezifische Beleuchtung, Schärfentiefe oder der gewählte Ausschnitt sein. Das abstrakte Motiv dagegen, also in dem konkreten Fall ein unter Wasser nach einem Spielzeug greifender Hund, ist eine bloße Idee und nicht schutzfähig. Ein KI-gestütztes Nachbauen bildlicher Einfälle muss sie also hinnehmen. Näheres dazu siehe https://www.heise.de/news/KI-Bilder-im-Urheberrecht-Wann-Prompting-schuetzt-und-warum-Kopieren-erlaubt-ist-11296517.html und https://www.ferner-alsdorf.de/ki-bildgenerierung-und-lichtbildschutz-olg-duesseldorf-setzt-massstaebe/.

Seit wann gibt es KI?

Die Idee der künstlichen Intelligenz ist nicht neu, es gibt sie schon seit vielen Jahrzehnten, so veröffentlichte Alan Turing zum Beispiel schon 1950 seinen Turing Test, ein Kriterium für maschinelle Intelligenz. Weitere Schritte in Richtung KI waren zum Beispiel in den sechziger Jahren das Programm Eliza, ein einfacher Chatbot. Oder IBM Deep Blue, das 1997 den Schachweltmeister Garri Kasparow geschlagen hat.  Ein weiterer wichtiger Meilenstein war 2016, als Google AlphaGo den Go Weltmeister Lee Sedol geschlagen hat.
Einen echten Durchbruch gab es dann mit ChatGPT, welches im November 2022 der Öffentlichkeit vorgestellt wurde und die Möglichkeiten von KI einem breiten Publikum bekannt gemacht hat.

Und die finale Frage: Wann werden die Maschinen, wann wird KI die Weltherrschaft übernehmen?

Vermutlich nie – das ist eher Hollywood als Realität. Aktuelle KI-Modelle sind beeindruckend in klar definierten Aufgaben, haben aber keinerlei eigene Ziele, Wünsche oder Bewusstsein. Eine KI „will“ nichts – sie berechnet die wahrscheinlichste nächste Antwort. Die wirklich relevante Frage ist nicht, ob KI die Macht übernimmt, sondern wer die Menschen sind, die KI kontrollieren und welche Interessen sie dabei verfolgen (z. B. Regulierung, Missbrauch, Kontrolle durch Unternehmen oder Staaten).
Kleine Anmerkung des Autors: Diese Antwort wurde von einer KI generiert 😉

Details zu Technik und Plattformen

Wenn du es bis hier durchgehalten hast und es wirklich genauer wissen willst, habe ich im folgenden noch ein paar tiefergehende Informationen für dich …

KI-Plattformen

In der nachfolgenden Tabelle findest du einen detaillierten Überblick über die wichtigsten KI-Plattformen und den dazugehörigen KI-Modellen (Stand April 2026).

Bei mehreren Plattformen wechselt das zugrunde liegende Modell regelmäßig oder es werden mehrere Modelle parallel eingesetzt, deshalb sind die Modellangaben immer eine Momentaufnahme. Besonders bei Copilot, Perplexity und den Cloud-Plattformen ist die „KI im Inneren“ oft ein Orchestrator aus mehreren Modellen statt nur ein einziges LLM.

Um die Sache jetzt noch etwas komplizierter zu machen, hier der Hinweis, dass viele KI-Modelle ihre Fähigkeiten per API (Application Programming Interface) zur Verfügung stellen. So lässt sich zum Beispiel das KI-Modell des Bildgenerators Nano Banana von Google auch auf anderen Plattformen als Google Gemini nutzen.
Auch Azure AI und AWS Bedrock sind keine eigenständigen KI-Modelle, sondern Cloud-Marktplätze. AWS Bedrock bietet Zugang zu Modellen von Anbietern wie Anthropic, Cohere, DeepSeek, Meta, Mistral oder OpenAI über eine einheitliche API. Azure AI Foundry funktioniert nach demselben Prinzip, primär mit OpenAI-Modellen plus weiteren Drittanbietern.

Einordnung der wichtigsten Plattformen

Für viele Nutzer sind ChatGPT, Claude, Gemini und Perplexity im Moment die relevantesten Alltagsplattformen, weil sie direkt für Schreiben, Recherche, Analyse und Assistenz optimiert sind. ChatGPT ist am breitesten als Allrounder aufgestellt für Schreiben, Recherche, Ideen, Zusammenfassungen und flexible Wissensarbeit. Claude punktet besonders bei langen, anspruchsvollen Text- und Codeaufgaben, Gemini ist stark in Multimodalität (es kann mehrere Arten von Eingaben, wie Text, Bild, Sprache etc. verarbeiten) und bietet eine gute Google-Integration. Perplexity ist am besten für recherchestarke, quellennahe Antworten und faktenorientierte Antworten geeignet. Für Produktivität im Büroalltag ist oft Microsoft Copilot die beste Wahl, wenn du viel mit Outlook, Word, Excel, Teams und Team-Workflows in Microsoft 365 arbeitest.

Kosten einiger ausgewählter Plattformen

Hier eine Übersicht mit den im Moment wichtigsten KI-Plattformen samt typischer Kosten und Kernmodell vom April 2026. Die Preise sind als typische Monatskosten angegeben und können je nach Region und Geschäftskontext variieren.

Stand: April 2026 · Alle Preise in USD · API-Preise je Mio. Tokens (Input/Output) · Preise können sich ändern.

Die günstigsten Einstiege liegen bei den meisten Consumer-Tools bei etwa 10 bis 20 USD pro Monat. Die teureren Stufen lohnen sich vor allem dann, wenn du hohe Nutzung, Teamfunktionen, mehr Limits oder Enterprise-Governance brauchst.

Literaturhinweise und weiterführende Links

Wie Maschinen Sprache verstehen | Terra X: https://www.youtube.com/watch?v=MsqL9fzOzXU 
Die Maus erklärt KI: https://www.youtube.com/watch?v=_80pKGuyKWc 
KI-Update kompakt von Heise: https://www.youtube.com/watch?v=0hpwFCE6Qjk&list=PLYdUuFJNX_Z6od8asata18r0BtW5qeN-R
KI Playlist von Felicia Simon: https://www.youtube.com/watch?v=2NwpetiyJpc&list=PLAp0rrcjobW7ych82_jDFDGzsYZazuEqA
Plattform-Kosten: https://brainyboss.ai/the-10-best-ai-platforms-in-2026-pros-cons-and-pricing/
Tools für KI-Nutzung: https://text-to-speech.online/, https://elevenlabs.io/de, https://elevenlabs.io/de, https://bestofai.com/

Was ist WordPress?

WordPress ist ein Content Management System (CMS), mit dem du Webauftritte und Blogs ohne Programmierkenntnisse erstellen und verwalten kannst. Es ist kostenlos, quelloffen, also Open Source und das CMS mit dem weltweit größten Marktanteil. WordPress war ursprünglich für Blogs gedacht, wird aber mittlerweile auch häufig für normale Webauftritte eingesetzt.

Die Bedienung von WordPress ist relativ einfach, Inhalte lassen sich über eine grafische Benutzeroberfläche bearbeiten. Es ist sehr flexibel und bietet durch eine große Auswahl von so genannten Themes und Plugins eine breite Palette an Lösungsmöglichkeiten für unterschiedlichste Anforderungen bei der Websiteentwicklung.

Wie funktioniert WordPress?

Damit eine WordPress Website funktioniert, braucht es ein Zusammenspiel aus drei verschiedenen Komponenten: da ist zunächst der Web Server selber zum Beispiel ein Apache oder NginX; du benötigst zweitens eine Datenbank (zum Beispiel MySQL oder Maria DB); und dann hast du natürlich WordPress selber (das in PHP geschriebene Content Management System), das zusammen mit den Themes und Plugins (welche zusätzliche Funktionen für WordPress bieten) die Logik für den Aufbau der Webseiten zur Verfügung stellt.

Der Besucher deiner Website stellt eine Anfrage an den Webserver, und in dem Moment wird die benötigte Seite dynamisch aus den verschiedenen Komponenten zusammengesetzt. Die Inhalte werden dabei von der Datenbank geliefert und mit den in WordPress vorgesehenen Templates zusammengeführt. Danach kann die Seite an den Client (den Webbrowser) ausgeliefert werden.

Wie startet man jetzt seinen eigenen Webauftritt?

Du brauchst dafür ein Hosting bei einem Anbieter wie beispielsweise LimaCity, Hetzner, Netcup oder ähnlichen Providern und kannst, wenn du einen solchen Web Server zur Verfügung hast, dort WordPress installieren. Zu dem Thema WordPressinstallation kann ich dir drei verschiedene YouTube Videos empfehlen, du findest die Links dazu unten auf dieser Seite. Hier geht es in dem ersten Video um eine Installation bei LimaCity, das wäre ein Provider, der auch ein kostenloses Angebot im Portfolio hat. Im zweiten Video zeige ich dir wie WordPress bei einem kommerziellen Anbieter wie zum Beispiel Netcup manuell installiert wird und im dritten Video geht es darum, WordPress auf einem eigenen Computer lokal zu installieren (was aber nur für besondere Spezialfälle interessant ist und etwas mehr EDV-Kentnisse erfordert).

Alternativ könntest du auch auf ein bereits fertig gehostetes WordPress gehen, zum Beispiel auf wordpress.com und dort deinen Web-Auftritt veröffentlichen. Hier könntest du im Prinzip auch mit einer kostenfreien Lösung eine Website erstellen, hast aber relativ große Einschränkungen. Die Möglichkeiten, die dir auf wordpress.com zur Verfügung stehen, sind nicht mit einem selbst gehosteten WordPress zu vergleichen.

Links

WordPress installieren bei einem kostenlosen Webhoster: https://www.youtube.com/watch?v=H7VkMe_7MLM

WordPress auf eigenem Webserver / eigener Domain installieren: https://www.youtube.com/watch?v=dzR8l61h4MQ

WordPress lokal auf Deinem Computer installieren: https://www.youtube.com/watch?v=KLnSLT3Jj5g

Meine Playlist zum Thema WordPress mit dem Theme Kadence findest du unter https://www.youtube.com/watch?v=KLnSLT3Jj5g&list=PL-ct8huC3tV83Z-xyaxCfp6I3Q4xv2DwE.

Benutzerfreundliches Design

Ein benutzerfreundlicher Button zeichnet sich durch klare, gut lesbare Beschriftungen aus. Auch der Kontrast zwischen Text und Hintergrund ist entscheidend, damit der Button leicht erkennbar ist. Außerdem sorgt ausreichend Padding für eine großzügige Klickfläche, die besonders auf Touch-Geräten wichtig ist. Bei der grundlegenden Gestaltung von einfachen und benutzerfreundlichen Buttons sollte man ein paar zentrale Aspekte beachten:

1. Klarheit und Einfachheit: Gib Buttons klare und aussagekräftige Beschriftungen, damit Nutzer sofort verstehen, welche Aktion hinter dem Button steckt.
   
2. Kontrast und Lesbarkeit: Achte darauf, dass der Button sich durch ausreichenden Farbkontrast vom Hintergrund abhebt.
   
3. Größe und Klickfläche: Der Button sollte groß genug sein, damit er leicht angeklickt werden kann, besonders auf Touch-Geräten. Eine großzügige Klickfläche sorgt für bessere Benutzerfreundlichkeit.
   Im Allgemeinen empfiehlt es sich, dass die Klickfläche mindestens etwa 44 mal 44 Pixel groß ist, um eine bequeme Bedienung auf Touch-Geräten zu gewährleisten. In der Praxis empfiehlt man oft sogar etwas größere Klickflächen, also um die 48 mal 48 Pixel oder sogar 50 mal 50 Pixel, damit auch dickere Finger oder schnelle Berührungen problemlos funktionieren. Wichtig ist also, dass der Button bequem erreichbar ist, ohne dass man daneben tippt.
   
4. Feedback und Zustände: Der Button sollte visuelles Feedback geben, zum Beispiel durch Farbänderungen beim Hover oder beim Klicken, damit die Nutzer wissen, dass ihre Aktion angenommen wurde.
   
5. Runde Ecken und Form: Ein sanfter, abgerundeter Stil wirkt oft freundlicher und einladender, aber auch die Form sollte zum Gesamtdesign passen.

Semantik und Barrierefreiheit

Ein gut gestalteter Button beginnt mit der richtigen Semantik. Das bedeutet, dass man immer das <button>-Element verwendet, um sicherzustellen, dass der Button von Screenreadern erkannt wird. Dadurch wird die Zugänglichkeit für alle Nutzer gewährleistet, auch für Menschen mit Einschränkungen.
Es ist nicht nur semantisch korrekt, sondern sorgt auch für eine bessere Zugänglichkeit, zum Beispiel durch Unterstützung der Tastaturbedienung. Verwendet man stattdessen ein <div> oder ein anderes Element, muss man selbst dafür sorgen, dass alle Interaktionen und die Barrierefreiheit gegeben sind.  Für eine barrierefreie Gestaltung von Buttons ist es wichtig, auf folgende Punkte zu achten:

1. Semantik: Nutze immer das <button>-Element, damit Screenreader den Button korrekt erkennen.
2. ARIA-Attribute für zusätzliche Informationen:
   Falls ein Button eine spezielle Funktion hat, kann man ARIA-Attribute nutzen, zum Beispiel:
   <button aria-label=“Schließen“>X</button>
3. Fokus-Management: Achte darauf, dass Buttons per Tastatur erreichbar sind und einen sichtbaren Fokus-Stil haben.
   Du kannst den Fokus mit CSS sichtbar machen:
   button:focus {
     outline: 2px solid #005fcc;
   }
4. Kontraste: Stelle sicher, dass die Farbkontraste hoch genug sind, damit auch Menschen mit Sehschwäche den Button gut erkennen können.

Gestaltung von Buttons in verschiedenen Zuständen

Buttons gewinnen an Benutzerfreundlichkeit, wenn sie auf unterschiedliche Zustände reagieren. Beim Hover-Zustand verändert sich oft die Hintergrundfarbe oder der Schatten, um visuelles Feedback zu geben. Der Focus-Zustand zeigt an, dass der Button aktuell ausgewählt ist, beispielsweise durch eine Bedienung mit der Tastatur. Der Active-Zustand wiederum zeigt, dass der Button gerade gedrückt wird, oft durch eine leichte Einfärbung oder eine Veränderung der Größe. Solche Mikro-Interaktionen sorgen für eine angenehmere und intuitive Benutzererfahrung.

Hier drei Beispiele für unterschiedlich gestaltete Buttons. Du findest die Dateien auf meinem Server web-einfach-machen.de und kannst dir dort den Quellcode anschauen.

Ein Beispiel für einen einfachen Button. Ein hover-Effekt ändert lediglich die border des buttons. Den Quellcode dazu findest du unter https://web-einfach-machen.de/Kursmaterialien/Kurs_Frontend-komplett/Vorarbeiten/Buttons/simple-button.html.

Ein weiteres Beispiel für einen Button mit box-shadow. Schau dir den Quellcode an unter https://web-einfach-machen.de/Kursmaterialien/Kurs_Frontend-komplett/Vorarbeiten/Buttons/button_box-shadow.html.

Ein Beispiel für einen auffällig gestalteten Button mit animiertem Glüh-Effekt beim hover- bzw. active-Zustand. Schau dir den Quellcode unter https://web-einfach-machen.de/Kursmaterialien/Kurs_Frontend-komplett/Vorarbeiten/Buttons/fancy-button.html an.

Links

Beispiele und Inspirationen auf Codepen: https://codepen.io/search/pens?q=buttons, https://codepen.io/musab-boaidani/pen/EaVBwRr, https://codepen.io/Yvonne-Angelica/pen/MYywLbJ,
sehr auffälliger Button: https://codepen.io/bhadupranjal/pen/vYLZYqQ,
diverse Buttons: https://codepen.io/derekmorash/pen/XddZJY, Bubbly Button: https://codepen.io/nourabusoud/pen/ypZzMM, Wibbly button: https://codepen.io/cassie-codes/pen/LYxBZEG, Realistic Red Switch (Pure CSS): https://codepen.io/ykadosh/pen/ExNOmZx.
CSS buttons examples – CSS Scan: https://getcssscan.com/css-buttons-examples
Create an animated, glowing, gradient border (Kevin Powell): https://www.youtube.com/watch?v=-VOUK-xFAyk und https://codepen.io/gayane-gasparyan/pen/jOmaBQK.

Vorteile des modularen Designs

Der modulare Aufbau mit Web Components zerlegt Websites in eigenständige Teile: Custom Elements wie <mein-button> oder <site-footer> werden zentral entwickelt und per einfachem selbst definierten Tag in HTML eingebunden.
Ein sogenanntes Shadow DOM kann jeden Baustein komplett abkapseln – CSS-Stile und Inhalt bleiben isoliert, dadurch ergeben sich keine Konflikte mit anderen Modulen. 

Dadurch hast du …

• Schnelle Anpassung der kompletten Website: Footer, Header, Cards oder ähnliche Elemente kannst du einmal erstellen und überall einsetzen – Änderungen sind zentral und sofort site-weit sichtbar.
• Design-Systeme: Du hast einheitliche Module für Agentur-Projekte zur Verfügung.
• Effizienz-Steigerung: Weniger Copy-Paste, kürzere Ladezeiten durch kleine, fokussierte Komponenten.
• Allerdings bedeutet das externe Kapseln des CSS im Shadow DOM auch, dass du mit CSS Custom Properties arbeiten musst, um ein globales Theming (z.B. bei dark-mode) zu erreichen.

Vergleich: Web Components vs. React vs. PHP

Web Components stehen bei ihrer modularen Arbeitsweise in Konkurrenz zu vergleichbaren Techniken wie PHP-Includes oder React. Web Components laufen nativ im Webbrowser ohne Framework-Abhängigkeit. React glänzt eher bei komplexen UIs, und PHP mit vorgefertigten serverseitigen Funktionen. Wenn du über weniger Frontenderfahrung oder Wissen über das DOM verfügst, ist evtl. React die bessere Lösung für dich. Wenn du Framework-übergreifende Komponenten brauchst, solltest du zu Web-Components greifen.

Einen schönen Vergleich von React, Vue.js, Angular & Co findest du auf https://www.youtube.com/watch?v=xsxNzKvpBIk. Oder auch auf https://www.uxpin.com/studio/blog/react-vs-web-components/,  https://blog.logrocket.com/web-components-vs-react/ und https://www.zealousys.com/blog/why-react-and-php-are-a-perfect-pair-for-web-development/. 

Browserunterstützung

Web-Components haben eine ausgezeichnete Unterstützung in allen modernen Browsern (Chrome 54+, Firefox 63+, Safari 10.1+, Edge 79+), die über 98% der globalen Nutzer abdecken.

Live Demos

Schau dir dazu ein einfaches Beispiel unter https://web-einfach-machen.de/Kursmaterialien/Kurs_Frontend-komplett/Vorarbeiten/Webcomponent-01.html  an. Hier habe ich einen Footer als Web-Component mit dem Element <site-footer></site-footer> in zwei HTML-Seiten eingebaut. Die Inhalte und Funktionen dieses Elements werden in der Datei footer-component.js festgelegt.
Falls der Kunde Änderungswünsche während oder nach der Projekterstellung hat, lassen sich die Inhalte des Footers auf der gesamten Website schnell aktualisieren, indem ich lediglich die zuständige Javascript Datei anpasse.

Ein etwas umfangreicheres Beispiel findest du unter https://web-einfach-machen.de/Kursmaterialien/Kurs_Frontend-komplett/Vorarbeiten/Leihinstrumente.html. Ziel bei diesem Beispiel ist es, eine Liste mit Leihinstrumenten auf diversen Seiten einer Musikschule anzeigen zu lassen. Die Liste lässt sich mit der Web-Component <instrumenten-liste data-src="./js/instrumente.json"></instrumenten-liste> an beliebigen Stellen des Webauftritts einbauen. Die Leihinstrumente werden in einer externen JSON-Datei gespeichert.

Literaturhinweise

1. Gutes englischsprachiges Tutorial von Web Dev Simplified: „Learn Web Components In 25 Minutes“ auf https://www.youtube.com/watch?v=2I7uX8m0Ta0
2. Tutorial von Traversy Media: https://www.youtube.com/watch?v=PCWaFLy3VUo
3. Einführung auf CSS-Tricks: https://css-tricks.com/an-introduction-to-web-components/
4. Weitere Infos unter https://www.ionos.de/digitalguide/websites/web-entwicklung/web-components/ oder https://kinsta.com/de/blog/web-komponenten/

Du findest das oben stehende Beispiel unter  https://web-einfach-machen.de/Kursmaterialien/Kurs_Frontend-komplett/Vorarbeiten/background-clip-Verlauf.html. Schau dir den gut kommentierten Quellcode in der Datei an, wenn du mit diesem Effekt in deinen Projekten arbeiten möchtest.

Statt eines Verlaufs kannst du auch ein Bild oder ein Video in den Hintergrund des Textes legen.

Auch hier findest du den Quellcode in der Datei https://web-einfach-machen.de/Kursmaterialien/Kurs_Frontend-komplett/Vorarbeiten/background-clip-Bild.html.

Das Hintergrundbild lässt sich auch animieren …
wie du in der Datei unter https://web-einfach-machen.de/Kursmaterialien/Kurs_Frontend-komplett/Vorarbeiten/background-clip-animiert.html sehen kannst.

Einen weiteren interessanten Effekt kannst du mit der CSS-Eigenschaft mix-blend-mode erzeugen.
mix-blend-mode ist eine CSS-Eigenschaft, mit der du steuerst, wie ein Element farblich mit dem Hintergrund verschmolzen wird.
Du kannst dieser CSS-Eigenschaft verschiedene Werte zuweisen. Zum Beispiel multiply, was dazu führt, dass ein Element abgedunkelt wird. Screen hat den gegenteiligen Effekt und hellt auf. Und overlay ist eine Mischung aus screen und multiply, es sorgt für eine kontrastreiche Mischung. Weitere Werte wären difference oder lighten siehe
https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode.

Unter https://web-einfach-machen.de/Kursmaterialien/Kurs_Frontend-komplett/Vorarbeiten/mix-blend-mode.html findest du den entsprechenden Quellcode.

An der Stelle soll nicht unerwähnt bleiben, dass du auch Masken mit SVG erstellen kannst. SVG (Scalable Vector Graphics) unterstützt die Eigenschaften mask oder clipPath. Eine Maske definiert, welche Bereiche sichtbar und welche transparent sind. Siehe mein Beispiel unter https://web-einfach-machen.de/Kursmaterialien/Kurs_Frontend-komplett/Vorarbeiten/SVG-Maske.html.

Generell kommst du mit reinem CSS etwas schneller und einfacher als mit SVG-Masken zum Ziel, du hast eine bessere Browserkompatibilität  und Performance. Nur in einem Punkt haben SVG-Masken etwas die Nase vorn, nämlich, wenn es um komplexe Animationen geht. Du findest unter anderem auf CodePen viele weitere interessante Beispiele zu diesem Thema.
SVG gradient animation: https://codepen.io/k-ivan/pen/XVzEZb
SVG-Animation: https://codepen.io/theadhocracy/pen/qBjNeOb
Oder https://codepen.io/collection/LPZWGv?cursor=eyJwYWdlIjoxfQ==

Literaturhinweise

CSS mask-image Eigenschaft: https://www.w3schools.com/css/css3_masking.asp und https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image
Mein Youtube–Tutorial zu diesem Thema: https://www.youtube.com/watch?v=F3VjLaEdDmE
Per Maske animierte Illustration: https://www.youtube.com/watch?v=dldpud1PuL8

Schau dir dazu mein Beispiel unter https://web-einfach-machen.de/Kursmaterialien/Kurs_Frontend-komplett/Vorarbeiten/barrierearme-Dropdown-Navigation.html an. Du findest im Quellcode dieser Demodatei ausführliche Kommentare zu den einzelnen Code-Bestandteilen, in denen ich vor allen Dingen die Funktionen der aria-Attribute erläutere. 

Wenn du diese Seite auf unterschiedlichen Viewports betrachtest, siehst du, dass diese Navigation responsiv ist, d.h. die Menüpunkte werden auf Smartphones in einem Toggle-Menü / Hamburger-Menü untereinander und auf größeren Desktop-PC-Monitoren nebeneinander angezeigt.
Die Navigationselemente sind, wie üblich, in einer ungeordneten Liste <ul> organisiert. Für Dropdown-Menüs verwende ich allerdings <button>-Elemente, was für Tastatur- und Screenreader-Nutzer besser geeignet ist, als Hyperlinks mit JavaScript in Schaltflächen zu verwandeln.

Die Navigation ist vollständig per Tastatur bedienbar. Mithilfe der Enter- oder der Leertaste öffnet man das Dropdown-Menü. Mit den Pfeiltasten kannst du Elemente innerhalb des Dropdown-menüs auswählen und mit der Escape-Taste ein Dropdown schließen.

Ein blinder Nutzer, der sich die Seite von einem Screenreader vorlesen lässt, sollte hier die Information bekommen, dass er einen Dropdown Button mit entsprechendem ausklappenden Menü vor sich hat. Und die Information, ob dieses Untermenü aktuell ein- oder ausgeklappt ist.
An dieser Stelle arbeiten wir mit so genannten Aria Attributen.

Die wichtigsten aria-Attribute, die ich in meiner Demodatei nutze, sind

• aria-haspopup: Weist Screenreader darauf hin, dass ein Element ein Kontextmenü, Untermenü oder ein Pop-up-Element öffnet, wenn es aktiviert wird.
• aria-expanded: Gibt an, ob ein Element ausgeklappt (true) oder eingeklappt (false) ist.
• aria-hidden: Versteckt Text vor Screenreadern. Nutze ich, damit das Sonderzeichen für die Darstellung des Burger-Icons vom Screenreader nicht vorgelesen wird.

Eine Übersicht über alle aria-Attribute findest du unter https://developer.mozilla.org/de/docs/Web/Accessibility/ARIA/Reference/Attributes.

Das Öffnen und Schließen der Navigation und der Dropdowns geht per Javascript. Du findest einen gut kommentierten Quellcode in meiner Beispieldatei unter https://web-einfach-machen.de/Kursmaterialien/Kurs_Frontend-komplett/Vorarbeiten/barrierearme-Dropdown-Navigation.html in dem das Zusammenspiel von aria-Attributen, JS und CSS erklärt wird.

Um die Wirkungsweise der aria-Attribute wirklich zu verstehen, solltest du das Beispiel mit einem Screenreader testen. Ich verwende dafür VoiceOver auf dem Mac. Hinweise zur Bedienung von VoiceOver findest du unter https://dequeuniversity.com/screenreaders/voiceover-keyboard-shortcuts.

Soweit zur Einführung in grundlegende Techniken für die barrierearme Navigation. Jetzt ist es an der Zeit, dass du dir den gut kommentierten Quellcode in meiner Beispieldatei unter https://web-einfach-machen.de/Kursmaterialien/Kurs_Frontend-komplett/Vorarbeiten/barrierearme-Dropdown-Navigation.html anschaust, analysierst und für eigene Webprojekte adaptierst.

Die Navigation gehört zu den wichtigsten Elementen jeder Website. Sie leitet Besucher, schafft Orientierung und wirkt sich maßgeblich auf User Experience, Conversion und SEO aus.
In diesem Artikel zeige ich dir, wie du eine moderne Webseiten-Navigation erstellst, die nicht nur gut aussieht, sondern auch funktioniert – auf jedem Gerät und für jeden Nutzer.

1. Klarheit vor Kreativität: Struktur schlägt Spielerei

Auch wenn kreative Menüs optisch beeindrucken können, ist eine klare, logisch aufgebaute Navigationsstruktur immer die bessere Wahl. Nutzer erwarten bestimmte Konventionen – z. B. dass das Hauptmenü oben oder links zu finden ist und dass die Begriffe eindeutig sind („Leistungen“ statt „Was wir tun“).

Praxistipp:

• Verwende sprechende, selbsterklärende Bezeichnungen.
• Begrenze die Hauptnavigation auf 5–7 Hauptpunkte – je weniger, desto besser.
• Nutze Dropdowns oder Megamenüs nur bei echten Informationshierarchien – nicht als Platzhalter für schlechte Planung.
• Zeige den Nutzern, auf welcher Seite sie sich aktuell befinden, indem du den entsprechenden Menüpunkt hervorhebst.
• Ein Klick auf das Logo sollte zur Startseite des Webauftritts führen.

2. Mobile Navigation: Nutzerführung auf kleinen Bildschirmen

Mobile Menüs haben sich stark weiterentwickelt. Klassische Hamburger-Menüs sind weit verbreitet, aber nicht immer die beste Lösung. Je nach Zielgruppe und Inhalt kann auch ein direkt ausgeklapptes Menü sinnvoller sein, hier siehst du alle Menüpunkte direkt ohne langes Suchen.

Praxistipp:

• Priorisiere Inhalte: Was muss sofort sichtbar sein, was darf hinter ein Icon?
• Nutze Off-Canvas-Menüs, um Platz zu sparen.
• Vermeide mehrstufige Dropdowns auf Mobilgeräten – sie sind oft schwer bedienbar.
• Achte auf große Touch-Elemente (mind. 48px Höhe/Breite) und ausreichend Abstand zwischen den Buttons.

3. Megamenüs: Große Seiten, klare Ordnung

Für Websites mit vielen Kategorien (z. B. Onlineshops oder große Organisationen) sind Megamenüs eine sinnvolle Option – wenn sie gut umgesetzt sind.

Praxistipp:

• Gruppiere Inhalte visuell durch Spalten und Überschriften.
• Verwende Icons oder kurze Beschreibungen, um Inhalte besser erfassbar zu machen.
• Zeige das Megamenü bei Hover (Desktop) und per Tap/Klick (mobil) – vermeide Menüs, die ausschließlich beim Mouseover funktionieren.
• Teste die Darstellung auf Touchgeräten mit Hover-Ersatz, z. B. per Doppelklick oder ARIA-Attribute.

4. Barrierefreiheit: Navigation für alle

Eine zugängliche Navigation ist nicht nur Pflicht im Sinne der WCAG-Richtlinien, sondern verbessert auch die Usability für alle.

Praxistipp:

• Nutze semantisches HTML (<nav>, <ul>, <li>, <a>) statt div-Spaghetti.
• Verwende ARIA-Rollen und -Attribute für komplexe Menüs (z. B. aria-haspopup, aria-expanded, aria-label). Oder mit dem ARIA-Attribut aria-current=“page“ kennzeichnest du den Menüpunkt der aktuellen Seite.
• Stelle sicher, dass alle Menüpunkte per Tastatur erreichbar und bedienbar sind.
• Bau einen Skip-Link zu Anfang der Seite ein. Damit ermöglichst du es Nutzern, die Navigation zu überspringen und direkt zum Inhalt zu gehen.
• Verwende sichtbare Fokuszustände – vermeide outline: none ohne Ersatz.
• Achte auf ausreichende Farbkontraste der Bedienelemente.
• Teste dein Menü mit einem Screenreader wie NVDA oder VoiceOver.

Aber nutze ARIA-Attribute nur, wenn sie wirklich nötig sind und versuche statt dessen Zugänglichkeitsprobleme zunächst mit semantisch korrektem HTML zu lösen.

Zum Thema barrierearme Dropdownnavigationen findet du einen interessanten Artikel unter https://web-einfach-machen.de/Blog/webproduktion/barrierefreie-website-navigation/.

5. Konsistenz und Wiedererkennbarkeit

Gute Navigation ist wie ein roter Faden durch die Seite. Wer auf einer Unterseite plötzlich ein anderes Menü sieht oder das Design springt, verliert schnell die Orientierung.

Praxistipp:

• Halte Navigation auf allen Seiten konsistent – sowohl optisch als auch strukturell.
• Markiere die aktive Seite klar sichtbar.
• Zeige bei Bedarf eine Brotkrumen-Navigation, engl. Breadcrumbs für zusätzliche Orientierung, vor allem bei tiefen Hierarchien.

6. Technische Umsetzung: Flexibel und performant

Moderne Menüs müssen nicht nur nutzerfreundlich, sondern auch technisch sauber sein – besonders im Hinblick auf Performance und Wartbarkeit.

Praxistipp:

• Setze auf CSS Flexbox oder Grid, um Menüs responsiv zu gestalten.
• Nutze Container Queries, um Menüs abhängig vom tatsächlichen Platz umzubauen – nicht nur vom Viewport.
• Vermeide unnötiges JavaScript – und wenn nötig, dann so modular und barrierefrei wie möglich.
• Mikro-Interaktionen (wie eine dezente Animation beim hovern eines Links) verbessern die UX.

Biete deinen Besucherinnen und Besuchern auch gerne weitere Möglichkeiten der Navigation an, wenn du sehr umfangreiche Inhalte hast. Zum Beispiel eine Suchen-Funktion oder eine Sitemap. Falls du hingegen ein eher übersichtliches Informationsangebot hast, kann ein Onepager eine gute Idee sein.

Navigation ist weit mehr als nur ein Menü. Sie ist Wegweiser, Orientierungshilfe und strukturelles Rückgrat deiner Website. Wer sich Zeit für eine durchdachte, barrierefreie und mobilfreundliche Navigation nimmt, verbessert die User Experience spürbar – und tut gleichzeitig etwas für SEO, Conversion und Vertrauen.

Sinnvolle Einstellungen 

VS Code lässt sich unter Datei → Einstellungen (bzw. Strg+,) umfangreich konfigurieren. Generell würde ich dir folgende Einstellungen empfehlen:

wordWrap: true – Suche in den Einstellungen nach dem Stichwort Word Wrap und schalte es ein, damit lange Zeilen in deinem Code automatisch umbrechen. Ansonsten müsstest du horizontal scrollen, um das Ende einer langen Zeile sehen zu können.

editor.formatOnSave: true – Aktiviert die automatische Formatierung des Codes beim Speichern der Datei.

explorer.sortOrder: auf den Wert „modified“ setzen, um die Darstellung in der Explorer-Seitenleiste nicht nach Namen, sondern nach Änderungsdatum zu sortieren.

editor.bracketPairColorization.enabled: true – um zusammengehörige Klammern farblich zu markieren

Bei den Einstellungen unterscheidet man zwischen Benutzereinstellungen bzw. Workspace-Einstellungen:  Du kannst unter dem Menüpunkt Datei → Einstellungen entweder generelle Einstellungen für alle Projekte (Benutzer) oder solche nur für das aktuelle Projekt (Arbeitsbereich) wählen. Ersteres gilt global für alle Projekte, letzteres nur für das aktuelle. Sehr praktisch, wenn du z. B. für ein Projekt andere Formatierungsregeln brauchst.

Oberfläche einrichten

• Wenn du mehr Platz auf deinem Monitor benötigst, kannst du die linke Seitenleiste einklappen: Drücke Cmd+B (Mac) bzw. Ctrl+B (Windows/Linux), um mehr Platz für den Code zu schaffen.
  
• Mir persönlich ist die voreingestellte Schriftgröße des Editors ein bisschen zu klein, aber sie lässt sich anpassen: Cmd + / Ctrl + vergrößert schrittweise die Schrift.
  
• Minimap ein-/ausblenden: Mit der Minimap kannst du in umfangreichen Dateien ein bisschen einfacher scrollen. Die Minimap, die oben rechts im Programmfenster einen Überblick über den Inhalt deiner aktuellen Datei gibt, kannst du an- oder ausschalten, indem du (in Version 1.101) auf Anzeigen → Darstellung und dann Minimap gehst. Alternativ kannst du auch einen Rechtsklick auf der rechten Scroll-Leiste ausführen und die Minimap ein- oder ausblenden. Das Aussehen der Minimap selber kannst du über Datei →  Einstellungen →  Einstellungen konfigurieren.
  

Effizienter Code-Workflow

Tabs und Splitscreen nutzen

Wenn du an mehreren Dateien gleichzeitig arbeitest (z. B. HTML, CSS und JavaScript), kannst du durch Tabs oben schnell wechseln oder mit einem Klick auf das Icon „Editor rechts teilen“ (Doppelfenster-Symbol oben rechts) zwei oder mehr Dateien parallel anzeigen. Alternativ: Rechtsklick auf eine Datei im Explorer von VS Code → An der Seite öffnen.

Mehrere gleichzeitige Cursor 

Ein echtes Power-Feature: Markiere Text in deinem Code und drücke Ctrl+D (Windows/Linux) oder Cmd+D (Mac), um weitere Vorkommen auszuwählen und gleichzeitig zu bearbeiten – ideal für schnelle Massenänderungen.

Tastenkombinationen 

Mach dich gerne mit den Tastenkombinationen in VS Code vertraut. Du kannst zum Beispiel mit Command + Shift + 7 Kommentare in deinen Quellcode einsetzen. Eine Übersicht über alle Tastenkombinationen findest du, wenn du unten links auf das Verwalten-Icon (das Zahnrad) klickst und dann auf Tastenkombinationen gehst.

Nutze die Befehlspalette von Visual Studio Code

Die Befehlspalette ist ein zentrales Werkzeug, mit dem du schnell auf viele Funktionen, Befehle und Einstellungen zugreifen kannst, ohne dass du durch Menüs oder die Benutzeroberfläche navigieren musst. Du kannst sie dir mit Cmd+Shift+P (Mac) oder Ctrl+Shift+P (Linux/Windows) anzeigen lassen. 
Um zum Beispiel einem Bild die Attribute für Breite und Höhe zuzuweisen, lasse ich mir die Befehlspalette anzeigen und gebe den Befehl „size“ ein, um einem Bild die entsprechenden Größen-Attribute automatisch zuzuweisen. 

Schneller Coden mit IntelliSense, Emmet und Snippets

IntelliSense bietet dir beim Schreiben automatisch passende Code-Vervollständigungen an. Das ist in VS Code bereits voreingestellt, hier musst du nichts ändern. Ein weiteres super hilfreiches Hilfsmittel zum schnellen Schreiben von Code ist Emmet, ein leistungsstarkes Snippet-Tool für HTML und CSS. Ein einfaches ! + Tab erzeugt z. B. ein vollständiges HTML-Grundgerüst. Für eine tiefergehende Einführung lohnt sich ein Blick auf https://emmet.io/ oder das Youtube-Tutorial „Optimiere Emmet in VSCode“ auf https://www.youtube.com/watch?v=GX81t3pdLDI. 

Und wenn du ganze Codeschnipsel schnell in dein Projekt einfügen möchtest, dann sind die so genannten Codes Snippets empfehlenswert.
Um eigene Snippets anzulegen, kannst du die Befehlspalette öffnen und „Snippets“ eingeben.  Wenn du das auswählst, findest du eine Übersicht über vorhandene Snippets oder kannst neue erstellen.
Ein gut gemachtes Video zum Thema „Eigene Code Snippets in Visual Studio Code anlegen“ findest du unter: https://www.youtube.com/watch?v=tPvaQBdIBLU, hier wird dir die Syntax anhand konkreter Beispiele erklärt. 

Erweiterungen, die du ausprobieren solltest

VS Code ist mithilfe von Extensions umfangreich erweiterbar. Hier hat jeder Entwickler seine eigenen Lieblingserweiterungen. Was ich dir empfehlen kann, sind die folgenden Erweiterungen:

• Live Server: Gibt dir eine Vorschau deiner Webseite in Echtzeit direkt im Browser. Besonders praktisch, wenn du auf einem sehr großen oder besser zwei Monitoren arbeitest. 
• MinifyAll: Ermöglicht das automatische Minifizieren und Komprimieren von gängigen Webdateien wie CSS, HTML, JavaScript oder JSON.
• Auto Rename Tag: Ändert automatisch den schließenden oder öffnenden Tag beim Editieren (was du allerdings mit F2 auch ohne die Erweiterung erreichen kannst).
• Prettier: VS Code hat bereits gute Formatierer eingebaut, aber mit dieser Erweiterung hast du noch ein paar mehr Einstellungsmöglichkeiten. Aktiviere Format on Save in den Einstellungen (settings.json) für ein automatisches Formatieren deines Quellcodes.
• Icon Themes: Du kannst dir die Oberfläche des Programms mit verschiedenen so genannten Themes und Icon Themes anpassen.  Hier wäre zum Beispiel das „Material Icon Theme“ oder die Erweiterung „VS Code-icons“ bei vielen Entwicklern beliebt. Es macht die Dateiansicht mit passenden Icons etwas übersichtlicher.
• Aber die wichtigste Extension von allen ist sicherlich „vscode-pets“ 🙂

Ein guter Einstieg in die Extension-Welt ist „The Best VSCode Extensions 2024“ auf https://www.youtube.com/watch?v=YjhkcvS1xKU. 

Arbeiten mit dem integrierten Terminal

VS Code bietet ein vollwertiges Terminal direkt im Editor. Wenn du also mit einer Software arbeiten möchtest, die keine grafische Benutzeroberfläche hat, dann kannst du das direkt aus VS Code steuern. Hier kannst du beispielsweise Bildkonvertierungen, npm-Befehle, Git-Kommandos oder Build-Skripte direkt ausführen, über: Terminal → Neues Terminal.
Wenn du dich mit dem Thema Terminal vertraut machen möchtest, empfehle ich einen Blick auf „Command Line Crash Course For Beginners“ – https://www.youtube.com/watch?v=uwAqEzhyjtw und meinen Artikel zum Thema Bilder für Websites aufbereiten unter https://web-einfach-machen.de/Blog/webproduktion/bilder-optimal-fuer-website-aufbereiten/.  

Versionskontrolle mit Git und GitHub

Mit Git kannst du Quellcode verwalten. Es wurde entwickelt, um Änderungen an Dateien (meistens Quellcode) zu verfolgen und Zusammenarbeit zu ermöglichen. Während Github eine Kopie deines Codes und die dazugehörigen Repositories online zur Verfügung stellt. Github bietet:

• Online-Speicherplatz und BackUps für deine Git-Projekte („Repositories“)
• Werkzeuge für Zusammenarbeit (z. B. Pull Requests, etc.)
• Versionsübersicht und Code-Vergleiche im Browser

Die Versionskontrolle ist nahtlos in VS Code integriert. Zunächst musst du Git auf deinem Rechner installieren. Du kannst Git unter anderem von https://git-scm.com/downloads runterladen oder unter Linux mit sudo apt install git installieren.
Mehr zum Installieren und den Grundlagen von Git findest du auf https://lerneprogrammieren.de/git/, https://www.ionos.de/digitalguide/websites/web-entwicklung/git-tutorial/ oder https://www.youtube.com/watch?v=mJ-qvsxPHpY.  

1. Wenn Git auf deinem Rechner installiert ist und du in Github angemeldet bist, kannst du in VS Code den Projektordner öffnen.
2. In der linken Seitenleiste auf das Quellcodeverwaltung-Icon klicken → Initialize Repository.
3. Neue Dateien sind dem Repository zunächst noch nicht hinzugefügt und mit U (untracked) markiert. Mit Klick auf + werden sie zum Repository hinzugefügt (A = added).
4. Den Branch (Zweig) umbenennen? Öffne die Befehlspalette (Cmd+Shift+P) und gib Rename ein.

Mehr zum Arbeiten mit Git in VS Code findest du unter anderem auf „Using Git with Visual Studio Code (Official Beginner Tutorial)“: https://www.youtube.com/watch?v=i_23KUAEtUM 

Zum Thema Versionskontrolle gibt es in VS Code übrigens auch eine so genannte Zeitachse. Sie ist eine integrierte Funktion, die eine lokale Versionshistorie für jede Datei bereitstellt und es erlaubt, die Änderungen in einzelnen Dateien detailliert nachzuvollziehen – und das ganz ohne externe Plugins oder ein Git-Repository. 

KI-Unterstützung: GitHub Copilot und Agent Mode

Es gibt zahlreiche Tools, die dir mit Hilfe von künstlicher Intelligenz das Arbeiten erleichtern, auch in Visual Studio Code kannst du dir mit Co-Pilot helfen lassen. Mit GitHub Copilot und dem Agent Mode kannst du künstliche Intelligenz direkt aus VS Code nutzen. Dazu musst du mit deinem GitHub-Konto angemeldet sein. Du kannst CoPilot in drei Modi nutzen: 

• Ask-Mode: Stelle Fragen zur Codebasis.
• Edit-Mode: Lass Code direkt von der KI bearbeiten.
• Agent-Mode: Copilot arbeitet wie ein Entwickler und fragt dich bei jedem Schritt nach Bestätigung.
  

Mit #fetch kannst du Copilot sogar gezielt Hinweise liefern, um spezifische Inhalte (z.B. von Webseiten oder Dokumentationen) in den Kontext einzubinden.

Schau dir dazu auch die Dokumentation unter https://code.visualstudio.com/docs/copilot/overview an. Zwei empfehlenswerte Videos hierzu: Copilot und Agent Mode in VS Code: https://www.youtube.com/watch?v=sYepbevm8TY und https://www.youtube.com/watch?v=dutyOc_cAEU.  

Fazit

Visual Studio Code ist weit mehr als ein Code-Editor – es ist ein mächtiges, flexibles Werkzeug, das sich gut an deine individuellen Arbeitsgewohnheiten anpassen lässt. Wer die vielen Möglichkeiten kennt und gezielt nutzt, kann damit effizienter entwickeln.

Literaturhinweise

Du kannst VS Code von https://code.visualstudio.com/Download herunterladen.Weitere Tipps zu VS Code: https://code.visualstudio.com/docs/getstarted/tips-and-tricks
Und mein Video zu VS Code findest du unter: https://www.youtube.com/watch?v=NZ8XUWdBqzw

Dateiformate für Webauftritte

Die Wahl des richtigen Dateiformats ist entscheidend für die Performance deiner Webseite. Hier sind die gängigsten Formate und ihre Vor- bzw. Nachteile:

• AVIF: Ein modernes Format, das die besten Komprimierungsraten bei hoher Bildqualität bietet. AVIF unterstützt sowohl verlustbehaftete als auch verlustfreie Komprimierung und ist ideal für Fotos und Grafiken. Es unterstützt kein progressives Rendering, sodass Dateien vollständig heruntergeladen werden müssen, bevor sie angezeigt werden können, was aber in der Praxis kaum auffällt. Die Browserunterstützung liegt zur Zeit (im Februar 2025) bei ca. 95 %.
• WebP: Ein weiteres modernes Format. WebP bietet in der Regel bessere Komprimierungsraten als JPEG und PNG. Die Browserunterstützung ist mit ca. 97 % mittlerweile sehr gut.
• JPEG, PNG und Gif: Diese Dateiformate sind nur noch in Ausnahmefällen sinnvoll. JPEG und PNG bieten im Vergleich zu AVIF und WebP eine eher mäßige Komprimierung bei akzeptabler Qualität, sind aber inzwischen nicht mehr die ideale Lösung für Webauftritte. JPEG wird von allen Webbrowsern unterstützt und du kannst es gegebenenfalls noch als Fallback für veraltete Browser nutzen. Im Gegensatz zu den anderen hier vorgestellten Dateiformaten unterstützt JPEG keine Transparenz.
  Bei PNG hast du die Möglichkeit, mit transparenten Hintergründen und verlustfreier Komprimierung zu arbeiten. Und wenn du eine animierte Pixelgrafik zeigen möchtest, um etwas 90er-Jahre Charme in deinen Webauftritt zu bringen, könntest du mit Gif-Dateien arbeiten 😉 Gifs haben mit maximal 256 Farben im Vergleich zur Abbildungsqualität allerdings eine sehr hohe Dateigröße.
  JPEG XL hat eine ähnlich gute Kompression wie AVIF, wird aber zurzeit nur von 14 % aller Webbrowser unterstützt.
• SVG: Für Vektorgrafiken wie Logos und Icons. SVG-Dateien sind skalierbar und behalten ihre Qualität bei jeder Größe. Mehr zu diesem Dateiformat findest du in meinem Artikel unter https://web-einfach-machen.de/Blog/edv/svg-vektorgrafik-im-webbrowser/.

Weitere detaillierte Informationen zu den Dateiformaten findest du unter https://developer.mozilla.org/de/docs/Web/Media/Guides/Formats/Image_types.

AVIF-Konvertierung mit avifenc

In diesem Artikel geht es vor allem um das zukunftsweisende AVIF Format.
Es wird zwar von einem kleinen Teil der Webbrowser nicht unterstützt, aber das ist kein Problem. Mithilfe des Picture-Elements hast du für solche Uralt-Browser eine ausgezeichnete Fallback-Lösung zur Verfügung. Mehr dazu weiter unten in diesem Artikel.
Um die erstaunliche Qualität der AVIF-Komprimierung einschätzen zu können, schaust du dir am besten die verschiedenen Beispielbilder auf meiner Demo-Seite unter https://web-einfach-machen.de/Kursmaterialien/Kurs_Frontend-komplett/Vorarbeiten/Vergleich-Kompression-Qualitaet.html an. Hier siehst du verschiedene Komprimierungs-Varianten im direkten Vergleich.

Die einzelnen Bilder habe ich größtenteils mit dem Programm avifenc erstellt, das ist ein sogenanntes Kommandozeilen-Programm. Um damit zu arbeiten, muss man in seinem Betriebssystem ein Terminal öffnen. Zum Arbeiten mit dem Terminal auf deinem Betriebssystem habe ich dir in den Literaturhinweisen ein paar Tutorials verlinkt. Du kannst AVIF-Dateien auch mit Programmen wie Gimp oder Adobe Photoshop (im Februar 2025 nur Windows und mit kostenpflichtigen PlugIn) abspeichern. Du hast aber im Terminal mehr Möglichkeiten für das Feintuning, deswegen erkläre ich die einzelnen Optionen bei der AVIF-Komprimierung anhand des Kommandozeilenprogramms „avifenc“. Lass uns also einen beispielhaften Befehl näher betrachten: Zunächst ein Beispiel für eine Konvertierung mit ausgewogener Balance zwischen Kompression und Qualität:
avifenc -j all -s 3 --min 0 --max 63 -a tune=ssim --ignore-icc input.jpg output.avif

Hier wird zunächst mit avifenc der Encoder (das Programm) avifenc im Terminal aufgerufen. Danach folgen verschiedene Parameter.

Als erster Parameter steht in diesem Beispiel mit -j all die Anzahl der Jobs (Threads), hier wird die CPU aufgefordert, alle vorhandenen Kerne für die einzelnen Threads des Prozesses zu nutzen, was die Verarbeitungsgeschwindigkeit erhöht.
Der Parameter -s 3 beeinflusst die Geschwindigkeit der Kodierung. Die Skala reicht hier von 0 (am langsamsten) bis 10 (am schnellsten). Wenn du einen niedrigen Wert festlegst, dauert das Erstellen der komprimierten Datei ein wenig länger, dafür wirst du mit einer etwas kleineren Dateigröße belohnt.

Die Parameter --min 0 --max 63 beziehen sich auf die Quantisierungsparameter (QP) für die Bildkompression.
„- -min 0“ setzt den minimalen Quantisierungswert auf 0, was der höchsten Qualität entspricht.
„- -max 63“ setzt den maximalen Quantisierungswert auf 63, was der niedrigsten Qualität entspricht. Diese Einstellung erlaubt dem Encoder, für jeden Block im Bild den optimalen QP-Wert zwischen 0 und 63 zu wählen. Dies ermöglicht eine effizientere Kodierung und bessere psychovisuelle Qualität, da der Encoder die Kompression an die Anforderungen verschiedener Bildbereiche flexibel anpassen kann. Im Gegensatz dazu würde eine Einstellung wie „–min 20 –max 20“ den Encoder zwingen, für jeden Block denselben QP-Wert zu verwenden, was in der Regel zu einem weniger optimalen Ergebnis führt.

Weitere Parameter sind -a tune=ssim: „-a tune=ssim“ (Structural Similarity Index Measure) sorgt für eine größere visuelle Ähnlichkeit zwischen dem Original und dem komprimierten Bild.
Diese Einstellung kann die Dateigröße leicht reduzieren.
Und „--ignore-icc“ Dieser Parameter ignoriert eingebettete ICC-Farbprofile im Eingabebild.

Und am Ende des Befehls gibst du mit „input.jpg output.avif“ die Ausgangsdatei und den Namen der komprimierten Ausgabe-Datei an.

Wenn du avifenc -h im Terminal eingibst, bekommst du die Hilfe mit den kompletten Optionen des Encoders angezeigt. Hier habe ich auf meiner Demoseite beispielsweise film-grain-test=1 für die Kodierungen mit problematischen Verläufen genutzt.

Um mit mit dem Kommandozeilenprogramm avifenc zu arbeiten zu, musst du es auf deinem Betriebssystem erstmal installieren. Das geht unter Linux zum Beispiel mit apt. Und unter MacOS mit dem Paketmanager Homebrew (brew install joedrago/repo/avifenc ), der wiederum die Xcode Command Line Tools erfordert. Im Videotutorial „How to Install Homebrew on Mac“: https://www.youtube.com/watch?v=IWJKRmFLn-g findest du dazu eine Anleitung.

Arbeiten mit dem Terminal?

Das Abspeichern eines Bildes als AVIF-Datei lässt sich auch mit Programmen wie Gimp oder https://squoosh.app/ realisieren, aber mit den hier beschriebenen Techniken bist du flexibler, kannst mit Stapelverarbeitungen arbeiten und holst das Beste aus deinen Bildern raus. Tatsächlich ist das Arbeiten mit dem Terminal kein Hexenwerk und in einigen Situationen ein echter Rettungsanker.
Zum Arbeiten mit dem Terminal kann ich dir folgende Literatur empfehlen:
Beginners tutorial: https://ubuntu.com/tutorials/command-line-for-beginners#3-opening-a-terminal
Die 15 wichtigsten Linux-Befehle im Terminal: https://www.giga.de/extra/linux/specials/linux-befehle/
Die 20 wichtigsten Kommandos: https://www.heise.de/tipps-tricks/Linux-Befehle-Die-20-wichtigsten-Kommandos-3843388.html
Video – 20 Terminal Befehle in 6 Minuten: https://www.youtube.com/watch?v=J2SXhVzVJbM

Bilder für responsive Webseiten

Verwende in deinen Webprojekten keine Bilder mit unnötig hohen Auflösungen. Um Bilder responsiv in die Webseite einzubinden, kannst du mit den Attributen scrset und sizes arbeiten.
Srcset ist eine Liste von unterschiedlich aufgelösten Versionen deines Bildes mit der Angabe, für welche Breite das Bild geeignet ist.
Mit dem Attribut sizes legst du die Bedingungen fest, wie groß das Bild im Seiten-Layout dargestellt werden soll. Ohne die Angabe von sizes würde der Browser ein Bild immer auf der Grundlage der kompletten Fensterbreite raussuchen, auch wenn beispielsweise in einem zweispaltigen Layout das Bild nur 50 % des kompletten Viewport einnimmt. Der Viewport ist der sichtbare Teil des Browserfensters, also ohne Elemente wie Scrollbalken oder Adressleiste.
Du kannst den Einsatz von sizes gut anhand meines Beispiels unter der Adresse https://web-einfach-machen.de/Kursmaterialien/Kurs_Frontend-komplett/Vorarbeiten/srcset.html nachvollziehen.

In diesem Beispiel sollen Bilder auf größeren Monitoren (bei einer Viewportbreite ab 920 Pixel) zwei- beziehungsweise drei-spaltig angezeigt werden. Auf Smartphones unterhalb von 921 Pixel Viewportbreite hingegen sollen sie formatfüllend über die gesamte Breite des Browserfensters angezeigt werden.
Da ist zunächst ein Bild, was oben auf der Seite als Aufmacherbild auf Displays über 920 Pixel Auflösung eine Breite von 100% des Elternelementes hat.
Da drunter siehst du auf meiner Beispielseite ein zwei- bzw. drei-spaltiges Layout.
In allen Fällen soll jeweils eine Version des Bildes geladen werden, die nicht unnötig groß ist, aber eine ausreichende Auflösung hat, um zum einen in das Layout zu passen und zum anderen auch bei Bildschirmen mit einer höheren DPR (device-pixel-ratio) nicht unscharf aussieht.

Die Device Pixel Ratio eines Displays gibt an, wie viele Hardwarepixel des Displays zu einem logischen CSS Pixel zusammengefasst werden. So hat zum Beispiel das Retina Displays eines iPhone 16 Pro eine DPR von 3, was dazu führt, dass seine physische Bildschirmauflösung von 1320 x 2868 Pixeln in 440 × 956 CSS-Pixel resultiert.

Hier der dazugehörige HTML Code, um die Bilder responsiv einzubinden; zunächst das Aufmacherbild mit 50% Breite auf Ausgabegeräten über 920px Viewportbreite:

<img srcset="Bilder/dummy-400.webp 400w,
    Bilder/dummy-800.webp 800w,
    Bilder/dummy-1024.webp 1024w,
    Bilder/dummy-1600.webp 1600w,
    Bilder/dummy-2048.webp 2048w,
    Bilder/dummy-3840.webp 3840w" 
sizes="(max-width:920px) 100vw, 50vw" 
src="Bilder/dummy-1024.webp" alt="Ein sehr schönes Bild" width="1024" height="512">

Mit dem Attribut srcset lege ich zunächst mehrere Bildquellen fest, aus denen der Browser je nach Bildschirmgröße und Auflösung das passende auswählt.
Mit dem Attribut sizes, sage ich dem Webbrowser durch die Angabe (max-width: 920px) 100vw, dass das Bild bis zu einer Viewportbreite von 920 Pixel die komplette Breite des Viewports einnehmen soll. Denn auf Smartphones bevorzuge ich eine ein-spaltige Darstellung. Ab einer Größe von 921 Pixel hingegen ändert sich mein Seitenlayout auf zwei-spaltig und hier sorgt die Angabe von 50vw dafür, dass das Bild nur noch 50 % der Viewportbreite benötigt und eine entsprechend kleinere Datei geladen werden kann.
Falls ein sehr veralteter Browser das Attribut srcset nicht kennen sollte, wird ein Fallback-Bild mithilfe der Angabe src="Bilder/dummy-1024.jpg" angezeigt.

Und nun zu den drei Bildern, welche auf Smartphones bis 920 Pixeln vollformatig über die komplette Breite, auf Desktop-PC Monitoren hingegen in einem dreispaltigen Layout angezeigt werden sollen.

img srcset="Bilder/dummy-400.webp 400w,
    Bilder/dummy-800.webp 800w,
    Bilder/dummy-1024.webp 1024w,
    Bilder/dummy-1600.webp 1600w,
    Bilder/dummy-2048.webp 2048w,
    Bilder/dummy-3840.webp 3840w" 
sizes="(max-width:920px) 100vw, 33vw" 
src="Bilder/dummy-1024.webp" alt="Ein sehr schönes Bild" width="1024" height="512">

Hier sorgt die Angabe von 33vw ab einer Breite von 921 Pixeln dafür, dass die Bezugsbreite für das srcset nur noch ein Drittel der Viewportbreite betragen soll. Unterhalb von 921px wird 100vw als Bezugsgröße genommen, wobei die Annahme von 100vw ohnehin der Standard ist, falls keine andere Angabe gemacht wird.
Am besten schaust du dir das wie gesagt direkt an meinem Beispiel auf https://web-einfach-machen.de/Kursmaterialien/Kurs_Frontend-komplett/Vorarbeiten/srcset.html an und veränderst die Breite deines Browserfenster. Hier siehst du, welche Bilder bei welcher Fensterbreite vom Browser geladen werden. Hier wird auch automatisch die DPR des Displays in die Berechnung einbezogen.
Du hast übrigens in den Entwicklertools von Browsern wie Firefox oder Chrome auch die Möglichkeit, eine individuelle device-pixel-ratio zu simulieren. Wenn du die DPR auf zwei oder drei erhöhst, werden dir entsprechend höher aufgelöste Bilder angezeigt.

Das picture-Element

Eine einfache Möglichkeit, Bilder in Webseiten einzubinden, ist das img-Element. Wenn du Bilder aber responsiv für verschiedene Ausgabegeräte optimiert anzeigen willst, dann empfehle ich dir stattdessen das <picture>-Element . Das <picture>-Element ermöglicht es dir, nicht nur verschiedene Bildversionen für unterschiedliche Bildschirmgrößen und Auflösungen bereitzustellen, sondern auch das Bild im optimalen Dateiformat bereitzustellen.

Das Picture-Element kann mehrere source-Elemente enthalten, wobei der Webbrowser die erste source, also die erste Quelle, die er verarbeiten kann, anzeigt. Damit der Browser die optimale Datei finden kann, kannst du im Picture Element mit Media Queries und Attributen wie zum Beispiel sizes arbeiten.

Hier ist ein Beispiel, wie du das <picture>-Element mit srcset und sizes verwenden kannst:

<picture>
                    <!-- AVIF -->
                    <source type="image/avif" srcset="
                 Bilder/dummy-400.avif 400w,
    Bilder/dummy-800.avif 800w,
    Bilder/dummy-1024.avif 1024w,
    Bilder/dummy-1600.avif 1600w,
    Bilder/dummy-2048.avif 2048w,
    Bilder/dummy-3840.avif 3840w" sizes="(max-width:920px) 100vw, 50vw">

                    <!-- Webp -->
                    <source type="image/webp" srcset="
                 Bilder/dummy-400.webp 400w,
    Bilder/dummy-800.webp 800w,
    Bilder/dummy-1024.webp 1024w,
    Bilder/dummy-1600.webp 1600w,
    Bilder/dummy-2048.webp 2048w,
    Bilder/dummy-3840.webp 3840w" sizes="(max-width:920px) 100vw, 50vw">
                    <!-- Fallback mit JPEG -->
                    <img src="Bilder/dummy-3840.jpg" alt="Ein sehr schönes Bild" width="3840" height="1920" loading="lazy" srcset="
                 Bilder/dummy-400.jpg 400w,
    Bilder/dummy-800.jpg 800w,
    Bilder/dummy-1024.jpg 1024w,
    Bilder/dummy-1600.jpg 1600w,
    Bilder/dummy-2048.jpg 2048w,
    Bilder/dummy-3840.jpg 3840w" sizes="(max-width:920px) 100vw, 50vw">
 </picture>

In diesem Beispiel passiert folgendes: Mit dem source-Element kannst du mehrere Bildquellen angeben, die der Browser je nach Bildschirmgröße und Auflösung auswählt. Die Dateiformate, die er nicht unterstützt, überspringt der Browser. Ein Safari 16.0 würde beispielsweise eine AVIF Datei nicht verarbeiten können und zu WebP springen. Auch die für die Anzeige benötigte Mindestbreite des Bildes kann der Browser anhand von srcset und sizes aus der Liste auswählen. Die erste Datei, deren Medienabfrage einen Treffer ergibt, wird im Webbrowser angezeigt.
Welche Datei hier vom Webbrowser genommen wird, ist also davon abhängig, ob er einen bestimmten Dateityp verarbeiten kann, in welcher Größe die Datei abgebildet wird und welche Device Pixel Ratio das Display besitzt.

Im picture-Element lassen sich übrigens auch Media-Abfragen wie beispielsweise orientation: landscape oder oder prefers-color-scheme: dark und ähnliche einsetzen, um die richtige Bildquelle zu wählen. Siehe den folgenden Code-Schnipsel von https://www.mediaevent.de/html/picture.html.

  <picture>
	<source media="(min-width: 300px) and (orientation:portrait) and (prefers-color-scheme: dark)"  srcset="nacht-800.webp">
	<source media="(min-width: 300px) and (orientation:landscape) and (prefers-color-scheme: dark)"  srcset="nacht-1000.webp">
	<source media="(min-width: 300px) and (orientation:portrait)"  srcset="tag-800.webp">
	<source media="(min-width: 300px) and (orientation:landscape)"  srcset="tag-1000.webp">
	<img loading="lazy" src="tag-1000.webp" width="1108" height="458" alt="tag-1000">
</picture>

Automatisierung in Visual Studio Code

Das manuelle Schreiben des Codes für das <picture>-Element kann etwas mühsam sein, insbesondere wenn du viele Bilder auf deiner Website hast. Zum Glück kannst du dir die Arbeit in Visual Studio Code erleichtern, indem du Snippets und Erweiterungen verwendest.

Snippets in Visual Studio Code

Snippets sind vorgefertigte Codeblöcke, die du in VS Code schnell einfügen kannst. Und so erstellst du ein Snippet für das <picture>-Element:

• Öffne in Visual Studio Code die Kommando-Palette mit Strg+Shift+P (Windows/Linux) oder Cmd+Shift+P (Mac).
• Suche nach „Konfigurieren von Codeausschnitten“ oder „Configure User Snippets“ und wähle „New Snippets“ aus.
• Wähle ggf. die Sprache aus, für die du das Snippet erstellen möchtest (z.B. HTML).
• Füge den folgenden Code in die Snippet-Datei ein:

{
	// Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. 
	// picture-Elemente 
	"Bild (Vollständig über die gesamte Breite)": {
		"prefix": "bildvoll", // Das Kürzel, um das Snippet auszulösen.
		"body": [
			"<picture>",
			"  <!-- AVIF -->",
			"  <source",
			"    type=\"image/avif\"",
			"    srcset=\"",
			"      ${1:Bild}-400.avif 400w,",
			"      ${1:Bild}-800.avif 800w,",
			"      ${1:Bild}-1024.avif 1024w,",
			"      ${1:Bild}-1600.avif 1600w,",
			"      ${1:Bild}-2048.avif 2048w,",
			"      ${1:Bild}-3840.avif 3840w\"",
			"    sizes=\"100vw\">",
			"",
			"  <!-- WebP -->",
			"  <source",
			"    type=\"image/webp\"",
			"    srcset=\"",
			"      ${1:Bild}-400.webp 400w,",
			"      ${1:Bild}-800.webp 800w,",
			"      ${1:Bild}-1024.webp 1024w,",
			"      ${1:Bild}-1600.webp 1600w,",
			"      ${1:Bild}-2048.webp 2048w,",
			"      ${1:Bild}-3840.webp 3840w\"",
			"    sizes=\"100vw\">",
			"",
			"  <!-- Fallback JPG mit fetchpriority -->",
			"  <img",
			"    src=\"${1:Bild}-3840.jpg\"",
			"    srcset=\"",
			"      ${1:Bild}-400.jpg 400w,",
			"      ${1:Bild}-800.jpg 800w,",
			"      ${1:Bild}-1024.jpg 1024w,",
			"      ${1:Bild}-1600.jpg 1600w,",
			"      ${1:Bild}-2048.jpg 2048w,",
			"      ${1:Bild}-3840.jpg 3840w\"",
			"    sizes=\"100vw\"",
			"    alt=\"${2:Bildbeschreibung}\"",
			"    fetchpriority=\"high\"",
			"    width=\"20\"",
			"    height=\"20\">",
			"  <!-- Preload bei Aufmacherbildern above the fold manuell in den head setzen. Ggf. für Bilder, die nicht als Aufmacherbild dienen, ein lazy-loading hinzufügen und fetchpriority entfernen. width und height per Emmet-sizes anpassen.  -->",
			"</picture>"
		],
		"description": "Fügt ein Bild ein, das immer die gesamte Breite der Seite einnimmt"
	},
	"Bild (Responsiv, 2 Breakpoints, Lazy Loading)": {
		"prefix": "bild2bp", // Das Kürzel, mit dem du das Snippet auslösen kannst
		"body": [
			"<picture>",
			"  <!-- AVIF -->",
			"  <source",
			"    type=\"image/avif\"",
			"    srcset=\"",
			"      ${1:Bild}-400.avif 400w,",
			"      ${1:Bild}-800.avif 800w,",
			"      ${1:Bild}-1024.avif 1024w,",
			"      ${1:Bild}-1600.avif 1600w,",
			"      ${1:Bild}-2048.avif 2048w,",
			"      ${1:Bild}-3840.avif 3840w\"",
			"    sizes=\"(max-width: 920px) 100vw, 50vw\">",
			"",
			"  <!-- WebP -->",
			"  <source",
			"    type=\"image/webp\"",
			"    srcset=\"",
			"      ${1:Bild}-400.webp 400w,",
			"      ${1:Bild}-800.webp 800w,",
			"      ${1:Bild}-1024.webp 1024w,",
			"      ${1:Bild}-1600.webp 1600w,",
			"      ${1:Bild}-2048.webp 2048w,",
			"      ${1:Bild}-3840.webp 3840w\"",
			"    sizes=\"(max-width: 920px) 100vw, 50vw\">",
			"",
			"  <!-- Fallback JPG mit Lazy Loading -->",
			"  <img",
			"    src=\"${1:Bild}-2048.jpg\"",
			"    srcset=\"",
			"      ${1:Bild}-400.jpg 400w,",
			"      ${1:Bild}-800.jpg 800w,",
			"      ${1:Bild}-1024.jpg 1024w,",
			"      ${1:Bild}-1600.jpg 1600w,",
			"      ${1:Bild}-2048.jpg 2048w,",
			"      ${1:Bild}-3840.jpg 3840w\"",
			"    sizes=\"(max-width: 920px) 100vw, 50vw\"",
			"    alt=\"${2:Bildbeschreibung}\"",
			"    loading=\"lazy\"",
			"    width=\"20\"",
			"    height=\"20\">",
			"  <!-- Ggf. große srcsets bei gering aufgelösten Bildern löschen und „Bild-original.jpg“ für Fallback nutzen; width und height per Emmet-sizes anpassen.  -->",
			"</picture>"
		],
		"description": "Fügt ein responsives Bild mit 2 Breakpoints und Lazy Loading ein"
	},
	"Bild (Responsiv, 3 Breakpoints, Lazy Loading)": {
		"prefix": "bild3bp", // Das Kürzel, mit dem du das Snippet auslösen kannst
		"body": [
			"<picture>",
			"  <!-- AVIF -->",
			"  <source",
			"    type=\"image/avif\"",
			"    srcset=\"",
			"      ${1:Bild}-400.avif 400w,",
			"      ${1:Bild}-800.avif 800w,",
			"      ${1:Bild}-1024.avif 1024w,",
			"      ${1:Bild}-1600.avif 1600w,",
			"      ${1:Bild}-2048.avif 2048w,",
			"      ${1:Bild}-3840.avif 3840w\"",
			"    sizes=\"(max-width: 920px) 100vw, (max-width: 1600px) 50vw, 33.33vw\">",
			"",
			"  <!-- WebP -->",
			"  <source",
			"    type=\"image/webp\"",
			"    srcset=\"",
			"      ${1:Bild}-400.webp 400w,",
			"      ${1:Bild}-800.webp 800w,",
			"      ${1:Bild}-1024.webp 1024w,",
			"      ${1:Bild}-1600.webp 1600w,",
			"      ${1:Bild}-2048.webp 2048w,",
			"      ${1:Bild}-3840.webp 3840w\"",
			"    sizes=\"(max-width: 920px) 100vw, (max-width: 1600px) 50vw, 33.33vw\">",
			"",
			"  <!-- Fallback JPG mit Lazy Loading -->",
			"  <img",
			"    src=\"${1:Bild}-2048.jpg\"",
			"    srcset=\"",
			"      ${1:Bild}-400.jpg 400w,",
			"      ${1:Bild}-800.jpg 800w,",
			"      ${1:Bild}-1024.jpg 1024w,",
			"      ${1:Bild}-1600.jpg 1600w,",
			"      ${1:Bild}-2048.jpg 2048w,",
			"      ${1:Bild}-3840.jpg 3840w\"",
			"    sizes=\"(max-width: 920px) 100vw, (max-width: 1600px) 50vw, 33.33vw\"",
			"    alt=\"${2:Bildbeschreibung}\"",
			"    loading=\"lazy\"",
			"    width=\"20\"",
			"    height=\"20\">",
			"  <!-- Ggf. große srcsets bei gering aufgelösten Bildern löschen und „Bild-original.jpg“ für Fallback nutzen; width und height per Emmet-sizes anpassen.  -->",
			"</picture>"
		],
		"description": "Fügt ein responsives Bild mit 3 Breakpoints und Lazy Loading ein"
	}
}

• Speichere die Datei.

Jetzt kannst du das Snippet verwenden, indem du ein Prefix wie z.B. „bild2bp“ eingibst und mit Tab die Autovervollständigung nutzt. Danach musst du nur noch die Platzhalter, also Dateiname und Alt-Text sowie height- und width-Attribute des Bildes manuell anpassen. Aber das geht bei dieser Arbeitsweise sehr zügig, die Platzhalter für die Dateinamen sind bereits alle ausgewählt.

Die Attribute height und width

In meinen Beispielen gebe ich für die Bilder übrigens immer die Attribute width und height an. Durch die Information zum Seitenverhältnis von Höhe zu Breite ermöglichst du es Webbrowsern, den Platz für das Bild bereits beim Seitenaufbau zu reservieren. Dadurch kann der Browser das Layout bereits rendern, bevor das Bild geladen ist und vermeidet ein Layout-shift. So bleibt das Layout stabil, auch wenn das Bild noch nicht geladen ist.
Auch hier ist VS Code hilfreich.

• Platziere den Cursor innerhalb des img-Tags.
• Öffne die Befehlspalette (unter Mac mit Cmd + Shift + p, bzw. unter Linux/Windows: Ctrl + Shift + p).
• Tippe in die Befehlspalette: „Emmet: Update Image Size“ (oder einfach nur „size“).
• Emmet ermittelt automatisch die Breite und Höhe des Bildes und schreibt sie in das img-Tag.

Bilderstellung mit einem Batch-Skript automatisieren

Um mit dem <picture>-Element zu arbeiten, benötigst du viele unterschiedliche Versionen eines Bildes in diversen Auflösungen und Dateiformaten. Mit einem Batch-Skript im Terminal kannst du die Erstellung dieser Bilder automatisieren. Hier ist ein Beispiel, wie du dir die Arbeit mit ImageMagick oder avifenc erleichtern kannst. Dieses Skript erstellt automatisch verschiedene Versionen des Originalbildes in den Formaten AVIF, WebP und JPEG.
Das Skript benötigt Kommandozeilenprogramme wie imageMagick (zum Skalieren und Konvertieren von Bildern), cwebp (WebP-Konvertierung) oder avifenc (AVIF-Konvertierung – aus libavif).
Wenn du diese Programme auf deinem Rechner zur Verfügung hast, kannst du die Stapelverarbeitung starten:

• Erstelle ein Batch-Skript:

Erstelle eine Text-Datei (zum Beispiel mit dem Namen „Dateiformat-batch.sh“) und füge den folgenden Code ein:

#!/bin/bash

# Ein Skript zur Größen- und Dateiformat-Stapelverarbeitung von Bilddateien.
# Quell- und Zielverzeichnis definieren
SOURCE_DIR="./input_bilder"   # Hier den Ordner mit den Originalbildern anpassen
OUTPUT_DIR="./output_bilder"   # Zielverzeichnis für die konvertierten Bilder

# Falls das Ausgabe-Verzeichnis nicht existiert, erstelle es
mkdir -p "$OUTPUT_DIR"

# Definiere die gewünschten Breiten
SIZES=(400 800 1024 1600 2048 3840)

# Durchlaufe alle Bilder im Quellordner
for file in "$SOURCE_DIR"/*.{jpg,jpeg,png,webp,avif}; do
    # Prüfe, ob die Datei existiert (damit keine Fehler auftreten)
    [ -e "$file" ] || continue

    # Extrahiere den Dateinamen und die ursprüngliche Breite
    filename=$(basename "$file")
    width=$(identify -format "%w" "$file")

    # Originalgröße in hoher Qualität speichern
    output_name="${filename%.*}-original"

    # Original als JPEG (Qualität 90)
    convert "$file" -quality 90 "$OUTPUT_DIR/${output_name}.jpg"

    # Original als WebP (Qualität 90)
    cwebp -q 90 "$file" -o "$OUTPUT_DIR/${output_name}.webp"

    # Original als AVIF
    avifenc -j all -s 4 --min 0 --max 63 -a cq-level=0 -a tune=ssim "$file" "$OUTPUT_DIR/${output_name}.avif"


    # Zu kleine Bilder nicht künstlich hochskalieren. Falls das Original-Bild kleiner als 1025px ist, speichere es nur mit 400px, 800px und 1024px.
    if [ "$width" -lt 1025 ]; then
        selected_sizes=(400 800 1024)
    else
        selected_sizes=("${SIZES[@]}")  # Nutze alle Größen
    fi

    # Erstelle für jede definierte Größe eine Version
    for size in "${selected_sizes[@]}"; do
        output_name="${filename%.*}-${size}"
        
        # Verlustfreies PNG
	convert "$file" -resize "${size}x" -define png:compression-level=9 -quality 100 "$OUTPUT_DIR/${output_name}.png"


        # Erstelle verkleinertes JPEG (Qualität 80)
        convert "$file" -resize "${size}x" -quality 80 "$OUTPUT_DIR/${output_name}.jpg"

        # Erstelle WebP (Qualität 85)
        cwebp -q 85 "$OUTPUT_DIR/${output_name}.png" -o "$OUTPUT_DIR/${output_name}.webp"
        
	# Erstelle AVIF (ausgewogene Qualität)
        avifenc -j all -s 4 -a cq-level=20 -a end-usage=q "$OUTPUT_DIR/${output_name}.png" "$OUTPUT_DIR/${output_name}.avif"

    done
done

echo "Bildverarbeitung abgeschlossen!"

Stapelverarbeitung starten:

• Mache das Skript ausführbar: chmod +x Dateiformat-batch.sh
• Führe das Skript im Terminal deines Betriebssystems aus mit: ./Dateiformat-batch.sh

Anpassungsmöglichkeiten

In dem oben stehenden Skript kannst du unter anderem den Pfad zum Quellordner ändern: Setze die Angabe SOURCE_DIR=“./Bilder“ auf deinen gewünschten Ordner.
Du kannst andere Qualitätsstufen wählen: Ändere die -quality Werte bei convert, cwebp oder avifenc.
Oder weitere Bildgrößen erstellen: Füge einfach weitere Werte zu SIZES=(400 800 … ) hinzu.

Lazy Loading

Neben den bislang besprochenen Techniken gibt es noch weitere Möglichkeiten, die Geschwindigkeit und Usability deiner Website zu verbessern. Lazy Loading beispielsweise ist eine Technik, bei der Bilder erst geladen werden, wenn sie im sichtbaren Bereich des Browsers erscheinen. Dies verbessert die Ladezeiten erheblich, da nicht alle Bilder sofort beim Laden der Seite heruntergeladen werden müssen. Um Lazy Loading zu aktivieren, füge einfach das loading="lazy"-Attribut zu deinem <img>-Tag hinzu:

<!-- WebP-Format -->
   <source type="image/webp" srcset="Bilder/dummy-400.webp 400w,
      Bilder/dummy-770.webp 770w,
      Bilder/dummy-1440.webp 1440w,
      Bilder/dummy-2880.webp 2880w" sizes="(max-width: 768px) 100vw, 50vw">

<!-- Fallback für ältere Browser (JPEG) -->
   <img src="Bilder/dummy-2880.jpg" srcset="Bilder/dummy-400.jpg 400w,
      Bilder/dummy-770.jpg 770w,
      Bilder/dummy-1440.jpg 1440w,
      Bilder/dummy-2880.jpg 2880w" sizes="(max-width: 768px) 100vw, 50vw" width="2880" height="2880" alt="Alternativtext" loading="lazy">                       
</picture>

Alternative CDN

Wenn du das Erstellen der Bildvarianten nicht selber vornehmen möchtest, könntest du auch Services wie Image Kit unter https://imagekit.io/ oder Cloudinary unter https://cloudinary.com/ nutzen. Hier kannst du ein hoch aufgelöstes Bild hochladen und anschließend werden dir unterschiedliche Varianten in verschiedenen Auflösung und Dateiformaten automatisch generiert. Das Hosten der Bilder auf solchen CDNs (Content Delivery Networks) kann allerdings Geschwindigkeitseinbußen nach sich ziehen.

Weitere Performance-Optimierungen

Mit Preloading und FetchPriority kannst du Resourcen bevorzugt laden, die beispielsweise im Kopfbereich der Seite „above the fold“ angezeigt werden; siehe https://developer.mozilla.org/de/docs/Web/API/HTMLImageElement/fetchPriority und https://developer.mozilla.org/de/docs/Web/HTML/Attributes/rel/preload.

Eine weitere Technik wäre decoding="async": Standardmäßig wird ein Bild im HTML-Element synchron dekodiert. Das bedeutet, dass der Browser die Bilddaten dekodiert, bevor er mit der Anzeige der Seite fortfährt. Wenn du jedoch decoding=“async“ verwendest, wird das Bild asynchron dekodiert. Das bedeutet, dass der Browser die Bilddaten in einem separaten Thread dekodiert, ohne den Hauptthread der Seite zu blockieren. So können andere Aufgaben wie das Rendern der restlichen Seite parallel ablaufen.
Wenn du viele oder große Bilder auf deiner Seite hast, kann das asynchrone Dekodieren helfen, die Ladezeiten zu verkürzen und die Gesamtleistung zu verbessern.
Allerdings laden moderne Webbrowser Bilder bereits intelligent, so dass diese Optimierungen in der Regel nur einen geringen Effekt haben.

Fazit

Durch die Verwendung der richtigen Dateiformate, des <picture>-Elements mit srcset und sizes, Lazy Loading, Automatisierungen in Visual Studio Code und Batch-Skripte zur Bilderstellung kannst du sicherstellen, dass deine Bilder schnell laden und auf allen Ausgabegeräten gut aussehen.

Ich gebe zu, dass es ein bisschen aufwendiger ist, ein Bild über das picture-Element in eine Webseite einzubinden als nur über das img-Element, aber du wirst hier mit optimierten Ladezeiten, verbesserter Abbildungsqualität auch auf Bildschirmen mit hoher Auflösung und einem benutzerfreundlichen Webauftritt belohnt. Und natürlich trägt die Verbesserung der Ladegeschwindigkeit auch dazu bei, deinen Webauftritt SEO-optimiert, also suchmaschinenfreundlicher zu gestalten.

Literaturhinweise

Meine Youtubetutorials zum Thema „Bilder richtig in Webseiten einbetten“ findest du unter https://www.youtube.com/watch?v=1-vKgWLvNO0
und zu AVIF-Komprimierung: https://www.youtube.com/watch?v=O9bifhT8a-4
Quellcode meiner Beispieldatei aus dem Video: https://web-einfach-machen.de/Kursmaterialien/Kurs_Frontend-komplett/Vorarbeiten/picture-element.html
Bildergalerie mit AVIF-komprimierten Bildern im Vergleich: https://web-einfach-machen.de/Kursmaterialien/Kurs_Frontend-komplett/Vorarbeiten/Vergleich-Kompression-Qualitaet.html
Gute Artikel zum Thema picture-Element: https://www.mediaevent.de/html/picture.html,
https://webdesign.tutsplus.com/quick-tip-how-to-use-html5-picture-for-responsive-images–cms-21015t, https://developer.mozilla.org/de/docs/Web/HTML/Element/picture
Blog von Kyle (WDS): https://blog.webdevsimplified.com/2023-05/responsive-images/
Batch-processing in GIMP: https://www.youtube.com/watch?v=lAQtItwKKvo
Batch in Photoshop: https://www.youtube.com/watch?v=JcXwhrvHu3w
Batch-processing in Affinity Photo: https://www.youtube.com/watch?v=4qrQjD_0LyI und
https://affinity.help/photo2/de.lproj/index.html?page=pages/Macros_Batch/batchjobs.html&title=Die%20Stapelverarbeitung
WordPress-PlugIn (Converter for Media): https://de.wordpress.org/plugins/webp-converter-for-media/
Online-Konverter für AVIF und andere Dateiformate: https://squoosh.app/
Auch die freie Online-Bildbearbeitung Photopea exportiert AVIF: https://www.photopea.com/
Dateiformate im Vergleich: https://www.mediaevent.de/bilddatenformate-jpg-avif-png-webp/
Videotutorial „How to Install Homebrew on Mac“ (um Kommandozeilenprogramme zu installieren): https://www.youtube.com/watch?v=IWJKRmFLn-g
Terminal / Kommandozeile: https://www.giga.de/extra/linux/specials/linux-befehle/, https://wiki.ubuntuusers.de/Shell/Befehls%C3%BCbersicht/, macOS-Terminal – Das kleine Einmaleins der Kommandozeile: https://www.heise.de/ratgeber/Einfuehrung-in-die-macOS-Kommandozeile-Das-kleine-Terminal-Einmaleins-3463440.html, 7 nützliche CMD Befehle (solltest du kennen): https://www.youtube.com/watch?v=ZIzXVIq0lIo, The 50 Most Popular Linux & Terminal Commands – Full Course for Beginners: https://www.youtube.com/watch?v=ZtqBQ68cfJc, Beginner’s Guide to the Bash Terminal: https://www.youtube.com/watch?v=oxuRxtrO2Ag, https://www.shellbefehle.de/befehle/,