# Medien

Bilder, Videos und Sounds, die Feitio nicht gezeichnet hat. Feitio gibt den Rahmen; die Person liefert das Bild.

## Die Rolle der Medien

### Bilder sind Inhalt, nicht Dekoration

Ein Foto kommt rein, weil es etwas zeigt, das Text nicht kann: ein Produkt, einen Ort, eine Person, ein Ergebnis. Stockbilder "für Atmosphäre" bleiben draußen.

### Zeichnungen zu Hause; Fotos an Fassaden

Zu Hause stammen die visuellen Elemente aus den Handzeichnungen von Feitio, und Fotos erscheinen nur, wenn sie selbst der Inhalt sind. An Außenfassaden gehört die Fotografie zum Kunden und kann die Führung übernehmen; Feitio gibt lediglich den Rahmen: Ecken, Verhältnis, Bildunterschrift.

## Bilder

Feitios Rahmen: die üblichen ungleichen Ecken, kein Rand, keine Schatten. Das Bild sitzt auf dem Papier, es schwebt nicht. Fester Verhältnisverhältnis, drei für alles: die Seite springt nicht beim Laden des Bildes, und eine Reihe bleibt auch bei Fotos unterschiedlicher Größe ausgerichtet.

![](/maid-avatar.png)

16:9, für Highlights und Video

![](/maid-avatar.png)

4:3, für Inhalte und Anhänge

![](/maid-avatar.png)

1:1, für Thumbnails und Gitter

### Eine Beschriftung, wenn Kontext benötigt wird

Wer, wo, wann, woher. In der Sans-Serif, klein, direkt unter dem Bild.

### Keine Filter

Das Bild zeigt so, wie es ist. Keine zusätzliche Sättigung, kein Orangeton, kein Farbverlauf oben.

Do

![](/maid-avatar.png)

Feitio-Ecken, kein Schatten, das Bild so, wie es ist.

Don’t

![](/maid-avatar.png)

Verschwommener Schatten, perfekter abgerundeter Eck und verstärkte Farbe: das Bild wird zu einer App-Karte.

### Das Detail, das zählt, wird in voller Größe sichtbar

Ein Produktfoto, ein Screenshot oder eine detaillierte Diagramm muss zoombar sein. Das Bild selbst verlinkt auf die vollständige Datei, die im selben Tab öffnet: Ansehen und Zurückkehren ist bereits, was der Rückwärts-Button tut.

[![Ver a imagem em tamanho real / See the image at full size](/maid-avatar.png)](/maid-avatar.png)

Klicken Sie, um es in voller Größe anzusehen.

### Am Abend bleiben Fotos so wie sie sind

Ein Foto wird niemals verdunkelt oder invertiert. Zeichnungen und Diagramme, die mit Tinte erstellt wurden, verwenden die Textfarbe und wechseln mit dem Thema von selbst.

## Alt-Text

Jedes Bild hat Alt-Text (`alt`): was jemand, der das Bild nicht sehen kann, darüber wissen muss, direkt dort.

Bild

Solche

Nicht so

Produktfotografie

Braunes Lederhandtasche mit langem Riemen und Goldschloss

`imagem_bolsa_01.jpg`

Grafik

November-Backups: 29 erledigt, 1 spät am 12.

Grafik

Avatar neben einem Namen

(leer: der Name steht bereits daneben)

Profilfoto von Ana

Dekoration ohne Information

(leer, `alt=""`)

Dekorativer Bild

-   Beschreiben Sie den Zweck, nicht die Technik: vermeiden Sie "Bild von" oder "Foto von" am Anfang, es sei denn, der Typ ist relevant.
-   Wenn das Bild wiederholt, was der nächste Text sagt, bleibt `alt` leer, damit es nicht zweimal gesagt wird.
-   Komplexer Diagramm oder Diagramm: die `alt` fasst zusammen, und die Zahlen gehen ebenfalls in eine Tabelle oder Text.

## Vide und Audio

Englische Untertitel · Transkript unten · 2 min 14 s

-   **Nichts läuft von selbst ab.** Video und Audio starten, wenn die Person auf Play drückt. Kein Autoplay, nicht einmal leise.
-   **Stets sichtbare Steuerelemente:** Abspielen, Pause, Lautstärke, Zeit. Der Browser ist in Ordnung.
-   **Untertitel und Transkripte.** Video mit Sprache hat Untertitel; Audio hat einen Transkript direkt darunter.
-   **Reduced motion applies here too:** background video und schleppende Animation existieren nicht in Feitio.
-   **Show the duration before play:** die Person entscheidet, ob sie Zeit hat.

## Weight and loading

-   Bilder unter dem ersten Bildschirm laden nur dann, wenn sie nah kommen (`loading="lazy"`); Video wird vor dem Abspielen nicht heruntergeladen (`preload="none"`).
-   Dateigröße folgt der Anzeigegröße: kein 4000-Pixel-Foto in einem Thumbnail.
-   Das feste Verhältnis reserviert den Platz, bevor das Bild ankommt, und die Seite springt nicht.
-   Während des Ladens zeigt sich die einfache erhabene Oberfläche. Keine blinkenden Skelette.