Optimale Bildgrößen für Ihre Website

von Jan 25, 2024WEB

Bildergalerie auf verschiedenen Bildschirmen

Wir alle lieben Bilder, ein Bild ist daher auch ein Gestaltungselement Ihrer Website und gehört entsprechend formatiert.

Wie soll man nun Bilder hochladen, die die Ladezeiten Ihrer Website nicht beeinträchtigt? Hier lernen Sie wie es geht …

Bildarten

Ein kleiner technischer Auszug, aber kurz erklärt welche zwei Arten von Bildern es gibt:

  • Vektor Grafik/Bild
  • Pixel Grafik/Bild

Eine Vektor Grafik oder ein Vektor Bild ist ein mathematisches Konstrukt, das durch Koordinaten und Formeln mit Steuerzeichen und Anweisungen beschrieben wird. Diese erklären wie ein Bild auszusehen hat.
z.b. Pfade, Strichgrafiken, Logos, Illustrationen …
Der Vorteil von Vektor Grafiken/Bilder, sie sind beliebig skalierbar und das in bestmöglicher Qualität.

Eine Pixel Grafik ist ein quadratischer Bildpunkt, dem eine bestimmte Farbe zugeordnet ist. Es ist das Maß aller Dinge, es gibt keinen Wert der kleiner oder größer ist als ein Pixel. Qualitätsindikator ist die Anzahl der Pixel in einem Bild, nicht die Größe eines Pixels.

Für die Bearbeitung der Bilder müssen Sie  folgende Parameter beachten:

  • Bildformat – jpg., png., gif etc.
  • Bildgröße – die Breite und Höhe eines Bildes
  • Dateigröße – Speichergröße in KB oder MB angegeben

 

Welches Format sollten nun Bilder im Web haben?

JPEG (JPG) wird für alle Bilder auf Ihrer Website verwendet.
Es ist zwar ein komprimiertes Format, das aber bei einer sehr guten Bildqualität.

PNG dieses Format eignet sich am besten für Logos und Grafiken mit transparentem Hintergrund.

GIF dieses Format eigent sich am besten für Animationen, also bewegte Bilder.

 

Welche Bildgröße sollen Ihre Bilder haben?

Das richtet sich nach dem Verwendungszweck. Ein Headerbild (volle Breite) sollte 1920px breit sein. Eine Standard Inhaltsbreite für sonstige Bereite je nach Verwendungsart 1440px oder 1080px.

 

Welche Dateigröße sollen Ihre Bilder haben?

Hier empfehlen wir immer max. 250KB für große Bilder, bei kleineren Bildern nimmt die Dateigröße entsprechend ab. Icons sollten z.b. max 15KB haben.
Die Ladezeit Ihrer Website wird es Ihnen danken!

Tool´s zur Bildbearbeitung

Hier finden Sie ein paar Tool mit denen Sie Ihre Bilder bearbeiten und skalieren kannst.

 

Es ist eigentlich ganz einfach, Bilder auf eine maximal notwendige Größe zu reduzieren und anschließend nochmal zu skalieren. Gerade in Hinblick auf schnelle Ladezeiten sollten Sie nicht darauf verzichten und diesen kleinen Zwischenschritt immer mit einbauen.