Sende den richtigen
Bildkandidaten.
Ein privates, nur im Browser ausgeführtes Hilfsmittel zum Prüfen grundlegender Bildmetadaten zusammen mit Fragen zur Auslieferung. Es lädt, speichert, optimiert oder untersucht keine Datei über die Metadaten und lokalen Dimensionen hinaus.
VERWENDEN SIE ES, UM: Verwenden Sie dies, um eine Diskussion über Bildplatzierung, responsive Kandidaten, aussagekräftigen Alternativtext und Auslieferungs‑Trade‑offs vorzubereiten.
Untersuche den Ausgangspunkt.
Wählen Sie ein lokales Bild, um grundlegende, vom Browser gemeldete Metadaten und Dimensionen anzuzeigen. SIU lädt, sendet, speichert, optimiert oder archiviert die ausgewählte Datei nicht.
LOKALES BILD WÄHLEN — Kein Bild ausgewählt. Es wurde nichts hochgeladen oder gespeichert.
Nichts verlässt diesen Ort.
Ein ausgewähltes Bild zeigt seinen Namen, vom Browser gemeldeten MIME‑Typ, Byte‑Größe, Zeitstempel der letzten Änderung und lokal decodierbare Dimensionen.
Es wird keine Vorschau generiert. Wählen Sie nur dann ein Bild, wenn die lokalen Metadaten für Ihre Prüfung nützlich sind.
Bearbeite den nächsten bekannten Schritt.
- Wählen Sie ein lokales Bild aus. Der Browser liest nur im Arbeitsspeicher seinen Namen, MIME‑Typ, Byte‑Größe, Zeitstempel der letzten Änderung und — falls decodierbar — Pixel‑Dimensionen aus.
- Beziehen Sie die Dimensionen auf die beabsichtigte gerenderte Breite und die Gerätedichte; entscheiden Sie dann, ob die Seite mehrere Bildkandidaten oder Art‑Direction benötigt.
- Prüfen Sie den Markup‑Kontext: aussagekräftiger Alternativtext, deklarierte Dimensionen wo sinnvoll, responsive Quellauswahl und Ladepriorität sind separate Entscheidungen.
- Bewahren Sie das ursprüngliche Quellasset im etablierten Asset‑ und Lizenzprozess des Teams auf. Diese Seite erzeugt keine Derivate.
Prüfen Sie die gerenderte Seite an den vorgesehenen Breakpoints mit dem vom Team freigegebenen Browser und Performance‑Tools.
Bestätigen Sie Alternativtexte und das tatsächliche responsive Markup im Code‑Review.
Messen Sie die Auslieferung in der realen Umgebung, bevor Sie eine Verbesserung behaupten.
Quellennotizen, keine geliehene Gewissheit.
Planungsgrundlage: web.dev Leitfaden für responsive Images und MDN File API‑Dokumentation
- web.dev — Responsive images ↗web.dev erklärt, dass Bild‑Bytes erheblich sein können, und beschreibt responsive Kandidaten sowie srcset, sizes und picture für passende Anwendungsfälle.
- MDN — Using files from web applications ↗MDN dokumentiert vom Nutzer gewählte File‑Objekte und lokal verfügbare Metadaten wie name, type und size.
Urheberschaft: Redaktioneller Entwurf von SIU Enablement; quellengebundene operative Anleitung. Geprüft von: Design, Accessibility, Performance und Rechte‑Verantwortliche prüfen Bilder im jeweiligen Auslieferungskontext. Erneut prüfen: Bei Änderungen von Platzierung, responsive Regeln, Asset‑Quelle oder Auslieferungsanbieter neu validieren.