Image
Ein Image (Bild) ist eine digitale Darstellung visueller Informationen, die aus einer Matrix von Bildpunkten (Pixeln) besteht und in einem Datei‑Format gespeichert wird. In der Web‑ und Anwendungs‑Entwicklung bezeichnet „Image“ häufig jede rasterbasierte oder vektorisierte Grafik, die in Dokumente, Webseiten oder Benutzeroberflächen eingebettet wird.
1. Grundlegende Bildtypen
- Rastergrafiken – Bilddaten werden pixel‑basiert gespeichert; jedes Pixel besitzt Farb‑ und Helligkeitswerte. Typische Formate sind JPEG, PNG, GIF, BMP, WebP, TIFF.
- Vektorgrafiken – Bild wird als mathematisches Modell von Linien, Kurven und Flächen beschrieben; Formate wie SVG, EPS, PDF ermöglichen verlustfreie Skalierung.
2. Auflösung & Farbtiefe
- Auflösung – Angabe in Pixel pro Zoll (PPI/DPI) oder einfach als Breite × Höhe in Pixeln (z. B. 1920 × 1080 px). Höhere Auflösung liefert mehr Details, erhöht jedoch Dateigröße.
- Farbtiefe – Anzahl der Bits pro Pixel, die die mögliche Farbpalette bestimmen:
- 1 Bit (schwarz‑weiß), 8 Bit (256 Farben), 24 Bit (True‑Color, ≈ 16,7 Mio. Farben), 32 Bit (True‑Color + Alpha‑Kanal für Transparenz).
3. Kompression
- Verlustbehaftet – Reduziert Dateigröße durch Verwerfen von Bildinformationen (z. B. JPEG, WebP‑Lossy). Geeignet für Fotos, wo leichte Qualitätsverluste akzeptabel sind.
- Verlustfrei – Bewahrt alle Bilddaten, reduziert Größe nur durch algorithmische Optimierung (z. B. PNG, GIF, WebP‑Lossless, ZIP‑Kompression). Wichtig für Grafiken mit Text, Icons oder Transparenz.
4. Nutzung im Web
- Einbindung mittels
<img src="/path/to/image.jpg" alt="Beschreibung">. Dasalt‑Attribut liefert einen Text‑Alternativinhalt für Barrierefreiheit und Suchmaschinen. - Responsive Images –
srcsetundsizesAttribute ermöglichen Auslieferung verschiedener Auflösungen je nach Gerät oder Display‑Pixel‑Ratio. - Lazy Loading –
loading="lazy"verzögert das Laden von Bildern, die zunächst außerhalb des Sichtfeldes liegen, um Ladezeiten zu reduzieren.
5. Bildoptimierung für Performance
- Komprimierung mit Tools wie ImageOptim, TinyPNG, MozJPEG, oder serverseitig mit
mod_pagespeed. - Größenanpassung – Bilder exakt an die maximal notwendige Anzeigegröße skalieren.
- Web‑optimierte Formate – WebP (besserer Kompressions‑Score), AVIF (neuestes Format, sehr hohe Qualität bei geringer Dateigröße).
- Caching – HTTP‑Header (
Cache‑Control,ETag) konfigurieren, um Bild‑Downloads zu reduzieren.
6. Barrierefreiheit
- Alt‑Text – Kurze, präzise Beschreibung des Bildinhalts, damit Screen‑Reader‑Nutzer die Information erhalten.
- ARIA‑Attribute (
role="img"bei dekorativen SVGs) ergänzen, falls notwendig. - Dekorative Bilder –
alt=""(leeres Attribut) signalisiert, dass das Bild rein visuell ist und keinen informativen Inhalt liefert.
7. Rechtliche Aspekte
- Urheberrecht: Bilder unterliegen dem geistigen Eigentum; Nutzung erfordert Lizenz, Creative‑Commons‑Lizenz oder Eigenproduktion.
- Datenschutz: Personenbezogene Bilder (Gesichter) benötigen Einwilligung nach DSGVO, insbesondere bei Veröffentlichung online.
