· 

Bilder für Webseite optimieren

Schnelle Ladezeiten hängen sehr stark von den Bildern auf der Webseite ab

Bilder für Webseite optimieren

Die 3 wichtigsten Merkmale eines Bildes

Ein Bild hat mitunter unzählige verschiedene Informationen. Die wichtigsten bezüglich der Optimierung fürs Web sind:

  • Bildgrösse (in Pixel)
  • Dateiformat (jpg, png, gif...)
  • Dateigrösse (kb bzw. mb)
250x250 bildgrösse

Bildgröße eines Bildes

 

Die Maßeinheit für die Bildgröße des Bildes nennt sich Pixel. Das Bild links hat z.B. eine Größe von 250 x 250 Pixel. Bevor man also ein Bild hoch-lädt, sollte man sich darüber Gedanken machen, welche Größe es auf der Webseite einnehmen soll.

Besonders Bilder aus Digitalkameras können oft mehrere Tausend Pixel groß sein. Hier muss auf jeden Fall verkleinert werden. Viele Webseitenbesitzer laden Bilder in ihrer Originalgröße hoch und verkleinern sie dann ohnehin. Also lieber vorher das Bild mit geeigneten Programmen verkleinern. 

IrfanView ist z.B. ein kostenloses Bildbearbeitungsprogramm mit welchem du die Grösse deines Bildes reduzieren kannst. Unter "Größe ändern" kannst du ganz leicht z.B. vorgegebene Standard Größen auswählen oder selbst eigene Größen festlegen. Danach einfach auf "OK" drücken und das Bild speichern. 

Dateiformat - welches ist das beste?

 

Pauschal kann man dazu nur schwer eine Aussage treffen, welches Dateiformat das beste ist. Aber ich kann einen Tipp geben:

Mit dem Dateiformat jpg triffst du sicherlich eine gute Wahl und hast damit vermutlich die wenigsten Probleme. Auch in der Handhabung ist es am einfachsten. 

 

png dateiformat

PNG

Der vermutlich größte Vorteil bei diesem Format ist die "teilweise Durchsichtigkeit". Wenn die Hintergrundfarbe des Bildes exakt dem Hintergrund der Webseite entspricht, merkt man keinen Unterschied. Sollte allerdings nur ein kleiner Unterschied bestehen, erkennt man dies bei einem Jpeg sofort (siehe unten) und wirkt dann sehr unschön und unprofessionell. 

dateiformat bilder

JPG

Dieses ist das gängigste Format und lässt sich am einfachsten komprimieren. Und das benötigst du für deine Webseite: ein komprimiertes Bild (mit geringer Dateigröße), welches trotzdem noch gut aussieht aber die Ladezeit deiner Webseite gering hält. Leider gibt es aber nicht die Möglichkeit der "Transparenz"!

gif

GIF

Der größte Vorteil gegenüber den anderen Dateiformaten - man hat die Möglichkeit der Animation. Wem dies gefällt, der kann dies relativ einfach für seine Seite verwenden, ansonsten würde ich aber jpg wählen. 

Dateigröße eines Bildes

 

Als logische Faustregel gilt natrülich: Je kleiner die Dateigröße, desto schneller kann die Webseite geladen werden. Jedes Bild muss vor der Darstellung der Webseite zunächst einmal heruntergeladen werden. Wenn du also viele "hochauflösende" Fotos mit über 2 MB auf deiner Seite bereitstellst, wird die Seite automatisch langsamer. Bei schnellen Internetverbindungen wird man dies eventuell nicht spüren.

 

SEO - technisch ist es aber auch ein Merkmal, wie schnell die Seite geladen werden kann. - also ACHTUNG!!!  Eine langsame Seite wird bei Google schnell abgestraft. Schon alleine deshalb sollte darauf geachtet werden, die Dateigröße im Idealfall unter 200 KB zu halten. 

 

FAZIT

 

Als Faustregel merken: Die Bilder bzw. Fotos sollten immer nur so groß sein, wie sie tatsächlich auf der Webseite auch dargestellt werden.

Dies wird meist nicht grösser sein als 640 x 400 Pixeln. Im Idealfall erreichen die Bilder  nicht mehr als 200 KB - dazu bedarf es allerdings eines geeigneten Bildprogrammes. Das Bild unterhalb ist sehr stark komprimiert (zu stark) und hat nur 12 KB. Man kann es also auch übertreiben. 

zu stark komprimiert

Weitere Fragen? Website4everyone unterstützt dich in der Umsetzung deiner Ideen und deiner Webseite.


website4everyone logo

Inh. Thomas Bartonik

Schubertgasse 7/5

2231 Strasshof

+43 650 5646366

office@website4everyone.at

Abonniere meinen Blog mit RSS:

website4everyone rss
video4everyone logo

Die Preise verstehen sich inklusive 20% MwSt. Die Angebote beziehen sich auf eine Jimdo-Homepage.

erecht agentur partner website4everyone