HTML-picture-Element

Ein einzelnes img reicht auf vielen Seiten. Wenn Sie verschiedene Dateien für unterschiedliche Bildschirme oder Formate brauchen — einen weiten Ausschnitt auf dem Desktop, einen engeren auf dem Handy oder ein modernes Format mit JPEG-Fallback — bietet das picture-Element Kandidaten. Der Browser wählt eine; Ihr Fallback-img deckt ältere Clients und Barrierefreiheit ab.

Was picture hinzufügt

picture ist ein Container. Darin platzieren Sie null oder mehr source-Elemente und genau ein Fallback-img. Jedes source kann angeben, wann es gilt (media) oder welches Format es ist (type), und wo die Datei liegt (srcset). Das img ist keine optionale Dekoration: Es ist der erforderliche Fallback und der Ort für alt.

Direkte Antwort

Wickeln Sie ein oder mehrere <source>-Elemente und ein Fallback-<img> in <picture>. Nutzen Sie media für Viewport-Bedingungen und type für Formate wie WebP. Das img braucht weiterhin src und alt. Anfänger können mit zwei Breiten desselben Fotos starten, bevor sie jedes moderne Format sammeln.

Art Direction mit media

Art Direction bedeutet unterschiedliche Ausschnitte oder Layouts für unterschiedliche Viewports — nicht nur „dasselbe Foto kleiner.“ media auf source lässt Sie weite und schmale Layouts auf verschiedene Dateien zeigen.

Das Media-Beispiel lesen

• Sources werden in gängigen Lehrmustern von spezifischeren Bedingungen zu breiteren aufgelistet; der Browser bewertet trotzdem und wählt eine Übereinstimmung
• srcset auf source zeigt auf die URL der Kandidatendatei
• Das abschließende img liefert src und alt, wenn keine Source passt oder die picture-Unterstützung unvollständig ist
• Verkleinern/vergrößern Sie das Fenster in der Übung, um zu sehen, welche Datei passt — nutzen Sie das Network-Panel in den DevTools, wenn Sie die Anfrage bestätigen wollen

Formatwahl mit type

Manchmal wird dieselbe Komposition als WebP für unterstützende Browser und als JPEG für alle anderen ausgeliefert. type nennt dem Browser den MIME-Typ, damit er nicht unterstützte Formate überspringen kann, ohne sie zuerst herunterzuladen.

Den Umfang am ersten Tag klein halten

Sie brauchen nicht jedes Format und jeden Breakpoint beim ersten Versuch. Lassen Sie ein picture mit zwei sinnvollen Kandidaten funktionieren, halten Sie alt ehrlich am img, und erweitern Sie dann. Responsive srcset-Dichte-Deskriptoren und fortgeschrittene sizes-Attribute kommen später, wenn Sie wachsen.

alt bleibt am img

Legen Sie Barrierefreiheitstext nicht nur auf source. Screenreader und Fallback-Darstellung stützen sich auf das img. Die Dekorationsregeln aus der Images-Session gelten weiter: informative Bilder brauchen echtes alt; reine Dekoration kann alt="" nutzen.

picture vs. ein img

Nutzen Sie ein schlichtes img, wenn eine Datei reicht. Greifen Sie zu picture, wenn Sie wirklich unterschiedliche Dateien für Bedingungen brauchen — Viewport-Art-Direction oder Formatwechsel. Extra-Markup ohne echten Bedarf erschwert nur die Wartung.

Reihenfolge- und Fallback-Gewohnheiten

Listen Sie source-Elemente vor dem img. Fügen Sie das img immer ein. Wenn Sie den Fallback vergessen, behandeln manche Browser und viele Lehr-Prüfwerkzeuge das Muster als unvollständig. Testen Sie mit schmalem und weitem Fenster und mit einem Browser, der Ihr modernes Format vielleicht nicht bevorzugt.

Übung in Ihrem Editor

1. Bereiten Sie zwei Bildbreiten desselben Fotos vor (oder zwei klare Übungsdateien).
2. Bauen Sie ein picture mit zwei source-Media-Queries und einem Fallback-img.
3. Verkleinern/vergrößern Sie das Browserfenster und beobachten Sie, welche Datei passt.
4. Bestätigen Sie, dass alt am img bleibt — nicht nur in einem Kommentar.
5. Optional: Fügen Sie ein WebP-source mit type="image/webp" über einem JPEG-img hinzu und bestätigen Sie, dass das Muster überall ein Bild zeigt.

Typische Fehler

• Das Fallback-img vergessen
• alt nur auf source statt auf img setzen
• Mit vielen Formaten überkomplizieren, bevor das grundlegende Media-Muster funktioniert
• picture nutzen, obwohl ein einzelnes optimiertes img gereicht hätte
• Nicht passende Ausschnitte, die Nutzer überraschen, wenn der Viewport einen Breakpoint überschreitet
• srcset auf source mit dem href eines Links verwechseln

Zusammenfassung

• picture bietet mehrere Bildkandidaten; der Browser wählt eine
• Nutzen Sie source plus ein erforderliches Fallback-img
• media steuert die Viewport-Wahl; type steuert die Formatwahl
• alt bleibt am img
• Einfach starten: zwei Breiten oder ein modernes Format plus JPEG-Fallback