So wird Ihre Website schneller – Dank komprimierter Bilder – Claudia Barfuss – Webberatung für Tierunternehmer
Schneller Hund

So wird Ihre Website schneller – Dank komprimierter Bilder

  • vor einigen Jahren

Kennen Sie das? Sie sitzen vor dem PC und die von Ihnen angewählte Website hat gefühlte Stunden, bis sie endlich fertig geladen ist. Ich bin dann meist sofort wieder weg. Es sei denn, es ist mir wirklich wichtig und ich will die Inhalte genau dieser Website unbedingt sehen. Ich vermute mal, bei Ihnen ist es ähnlich. Deshalb ist es wichtig, dass die Bilder Ihrer Website möglichst wenig Zeit zum laden benötigen. Sie müssen also “klein” sein. Dieses “klein” hat nichts mit der Abmessung der Bilder zu tun, sondern mit der Dateigrösse. Selbstverständlich müssen die Bilder ohne Qualitätsverlust komprimiert (verkleinert) werden.

Wie gross sind die Bilder auf dem PC

Um Ihnen das besser erklären zu können schauen Sie doch mal auf Ihnem PC in Ihren Bilderordner und klick mit der rechten Maustaste auf eins der Bilder. Ganz unten in der Liste, die sich nun öffnet, finden Sie den Punkt “Eigenschaften”. Klicken Sie da drauf und schon sehen Sie, wie viele Megabyte (MB) Ihr Bild gross ist. Nun klicken Sie noch auf Details und sehen nun auch, welche Abmessungen Ihr Bild hat.

Bei mir sind das 5184 x 3456px. Nur wie gross ist das eigentlich?

Bildgrösse herausfinden
Eigenschaften deines Fotos
Eigenschaften deines Fotos

Wie gross ist ein Pixel?

Gar nicht so einfach das zu erklären. Denn ein Pixel ist zwar die kleinstmöglichen Elemente auf Ihrem Monitor, aber seine Grösse wechselt von Gerät zu Gerät.

Sie selber können die Grösse eines Pixels verändern, indem Sie die Auflösung Ihres PC’s ändern. Stellen Sie zum Beispiel die Auflösung von 1920 x 1080 auf 1600 x 900 um, sinkt die Anzahl der Pixel, während Ihre Bildschirmgrösse natürlich gleich bleibt. D. h. ein Pixel muss grösser sein, um den Bildschirm trotzdem ausfüllen zu können.

Das kann dazu führen, dass die Schrift etwas unscharf wirkt.

Um ein Gefühl für die Pixel zu bekommen schauen Sie sich doch einmal die Auflösung Ihres PC’s an.

Nach diesem kleinen Exkurs in die Welt der Pixel kommen wir nun zu den Fotos zurück. Sie sehen nun, dass es keinen Sinn macht Bilder mit 5184 x 3456px auf einen Bildschirm zu laden der nur 1920 x 1080px gross ist. Deshalb verkleinern wir sie und verringern so auch die Dateigrösse drastisch.

Wie verkleinern Sie nun die Bilder für die Website?

Auf den meisten PC’s ist ein Programm installiert mit dem Sie Bilder verkleinern und auch noch etwas bearbeiten können. Beispielsweise Paint auf den Windowsrechnern.

Oft ist es aber wesentlich einfacher, wenn Sie ein Online-Programm benutzen. Hier kann ich besonders FOTOSVerkleinern empfehlen. Die Handhabung ist ganz einfach und das Programm verkleinert Ihnen nicht nur die Abmessungen des Bildes, sondern es reduziert auch die Dateigrösse nochmals unglaublich.

Wenn Sie es regelmässig nutzen, registrieren Sie sich am Besten, denn sonst müssen Sie Ihre E-Mail-Adresse angeben, damit Ihnen das Bild zugeschickt werden kann. Der Nachteil: Sie erhalten danach den Newsletter der Firma, den Sie allerdings auch wieder abbestellen können.

Für Inhaltsbilder sollte die Breite 800px nicht übersteigen. Wenn Sie Bilder für den Kopfbereich benötigen können die auch mal 1920px breit sein.

Ganz wichtig: Geben Sie nur die Breite ein und nicht Breite und Höhe. Denn wenn Sie nur die Breite eingeben, rechnet das Programm die korrekte Höhe automatisch aus. Sonst kann es sein, dass das Bild danach verzerrt dargestellt wird.

Es gibt auch noch die Möglichkeit, dass Sie in Paint (oder einem ähnlichen Programm) die Bildabmessung auf 800px Breite verkleinern und danach ein Online-Tool zur Komprimierung der Dateigrösse verwenden. Hier haben sich vor allem diese beiden bewährt:

https://compressor.io/ – neues und sehr ansprechendes Tool um Bilder zu komprimieren. Die Dateigrösse wird stark reduziert, die Abmessung bleibt.

https://tinypng.com/ – Noch ausgereifter und sogar mit einem Plugin für WordPress und Magento. Es können bis zu 5 Bilder gleichzeitig hochgeladen werden. Die Dateigrösse wird stark reduziert, die Abmessung bleibt.

Abspeichern des verkleinerten Bildes

Bevor Sie mit dem Verkleinern des Bildes loslegst noch 4 Tipps:

  • Speichern Sie das verkleinerte Bild in einem anderen Ordner als das Original. Zum Beispiel einem Ordner mit dem Namen “verkleinert” oder so. So sind Sie sicher, dass Sie immer wieder auf Ihr Originalbild zurückgreifen können.
  • Geben Sie dem Bild einen “sprechenden ” Namen. So wissen Sie gleich, was drauf ist und auch für Google ist es von Vorteil.
  • Schreiben Sie den neuen Dateinamen in Kleinbuchstaben. Damit stellen Sie sicher, dass kein Server ein Problem mit dem Namen hat und das Bild immer angezeigt wird.
  • Das gleiche gilt für Abstände und Sonderzeichen. Sie gehören nicht in einen Namen für ein Bild. Lediglich _Unterstriche sollten verwendet werden.

Ein guter Name für ein Porträt von mir ist zum Beispiel: claudia_barfuss

Kein guter Name wäre: IMG.15157, da wissen Sie in einem Jahr nicht mehr, was auf dem Bild ist und auch Google kann keine Rückschlüsse ziehen.

Gratulier, wenn Sie bis zum Schluss gelesen haben, wissen Sie nun einiges mehr über das Verkleinern von Bildern für die Website. Wenn Sie noch mehr wissen wollen, habe ich für Sie eine Liste mit Blogartikeln zur Vertiefung erstellt.

Damit Sie es im Alltag einfacher habe ich für Sie eine Checkliste erstellt auf der Sie die wichtigsten Punkte finden. Sie können sie sich ausdrucken und die Punkte abhaken.

UPDATE 09.10.2016  Neu gibt es ein Video, dass genau zeigt wie Du Bilder optimal zuschneiden und korrekt abspeichern kannst.

Ladezeit der Website verringern

Kommentar hinterlassen: