Eine Pixelgrafik ist ein Bild, das aus einem Raster einzelner Bildpunkte besteht. Jeder Punkt speichert eine Farbe, zusammen ergeben sie das Bild. MDN beschreibt sie als Bilddatei aus einem Gitter von Pixeln und nennt sie auch Bitmap. Fotos sind immer Pixelgrafiken.
- Pixelgrafik
Ein Bild, das aus einem Raster einzelner Bildpunkte besteht, von denen jeder eine Farbe speichert.
Beispiel: „Das Teamfoto ist eine Pixelgrafik mit 2.400 mal 1.600 Bildpunkten.“Auch: Rastergrafik, Bitmap.
Gegenstück: die Vektorgrafik, die Formen statt Punkte speichert.
Warum eine Pixelgrafik unscharf wird
Eine Pixelgrafik hat eine feste Breite und Höhe in Bildpunkten. Wird sie größer angezeigt, als sie ist, sieht sie laut MDN körnig aus, weil jeder Bildpunkt auf mehrere Bildschirmpunkte gestreckt wird. Verkleinern geht dagegen ohne Verlust, kostet aber unnötig Ladezeit, wenn die Datei viel größer ist als nötig.
Formate für Pixelgrafiken im Web
Laut MDN ist JPEG das verbreitetste Format für Fotos, verlustbehaftet und ohne Transparenz. PNG speichert verlustfrei und mit Transparenz. WebP komprimiert deutlich besser als beide und ist seit November 2024 als RFC 9649 beschrieben. AVIF wird bei gleicher Qualität etwa halb so groß wie JPEG; MDN empfiehlt dafür eine Ausweichlösung über das picture-Element.
Pixelgrafik und responsive Bilder
Weil eine Pixelgrafik nur in einer Größe gut aussieht, liefern Websites mehrere Fassungen aus. Mit srcset wählt der Browser die passende für Bildschirmbreite und Pixeldichte; das erklärt der Eintrag zu responsiven Bildern.
<img src="team-800.webp"
srcset="team-800.webp 800w, team-1600.webp 1600w"
sizes="(min-width: 60rem) 50vw, 100vw"
alt="Das Team im Besprechungsraum">