Ratgeber: Für eine mobile Anleitung den passenden Bildausschnitt anbieten

Eine breite Werkbankaufnahme erklärt am großen Monitor den gesamten Arbeitsplatz. Auf dem Handy kann die kleine Schraube, um die es in der Anleitung geht, darin kaum noch erkennbar sein. Das Problem lässt sich nicht immer durch eine kleinere Datei lösen. Manchmal braucht dieselbe Aussage einen anderen Ausschnitt. Dieser Ratgeber ordnet dafür das etablierte HTML-Element picture ein.

Auswahl und Rückfallbild verstehen

Nach MDN kann picture mehrere source-Elemente und ein img-Element enthalten. Der Browser prüft passende Bedingungen und Formate. Das img bleibt für die Bilddarstellung und als Rückfalloption wichtig. Ein typischer Anwendungsfall ist die gezielte Motivwahl für verschiedene Anzeigegrößen. Der Auswahlmechanismus erzeugt jedoch keine neuen Ausschnitte; geeignete Bilddateien müssen vorbereitet werden.

Beschreibe deshalb im Bauauftrag zuerst die Bildaussage. „Schraube an der hinteren linken Ecke erkennen“ ist genauer als „mobil optimiertes Bild“. Erst daraus ergibt sich, welche Variante sinnvoll ist.

Zwei zusammenpassende Ansichten vorbereiten

Für eine eigene Anleitung kannst du ein freigegebenes Foto der gesamten Werkbank und einen engeren Ausschnitt der betreffenden Ecke verwenden. Beide müssen denselben Arbeitsschritt zeigen. Falls zwischen den Aufnahmen ein Teil ausgetauscht wurde, ist der Unterschied redaktionell zu erklären. Eine stillschweigend veränderte Baugruppe würde die Anleitung missverständlich machen.

Halte die Bildrechte und eine verständliche Beschreibung fest. Wichtige Warnungen oder Arbeitsschritte sollten zusätzlich als normaler Text verfügbar sein. Die Person soll den Sinn nicht allein aus winzigen Beschriftungen innerhalb des Fotos erschließen müssen.

Den Wechsel inhaltlich kontrollieren

Teste den Entwurf bei breiter und schmaler Ansicht. Prüfe in beiden Fällen, ob die gemeinte Schraube sichtbar ist und die Beschreibung noch zum Motiv passt. Ändere die Breite langsam über den vorgesehenen Wechselpunkt hinweg. Es darf keine Zwischenansicht entstehen, in der der Ausschnitt abgeschnitten oder der Text verdeckt wird.

Auch die einfache Alternative prüfen

Vielleicht reicht für den konkreten Artikel bereits ein einzelnes gut gewähltes Detailfoto mit zusätzlicher Übersicht darunter. Vergleiche diese Lösung mit dem automatischen Motivwechsel. Mehr Bildvarianten erhöhen den Pflegeaufwand, wenn sich die Anleitung später ändert. Freigegeben wird daher die Variante, die den Arbeitsschritt klar erklärt und mit den vorhandenen Bildern zuverlässig geprüft werden kann.