Ladezeiten Optimierung – Bilder und Grafiken

Ladezeiten Optimierung – Bilder und Grafiken

Die Optimierung der Website auf eine schnellere Ladezeit ist mittlerweile schon ein Standard für Webdesigner und Entwickler. Mit welchen Möglichkeiten eine Seite optimiert werden kann und welche Techniken es gibt, soll heute dieser Blogbeitrag beantworten.

Eine Website wird mittlerweile nicht nur auf klassischen Rechnern mit schneller Internetverbindung aufgerufen. Durch das Thema Responsive Design kommen immer mehr Endgeräte wie Smartphones, Tablets oder Laptops hinzu, auf denen die Website trotz eventuell langsamer Internetverbindung schnell angezeigt werden soll. Neben den meist schon eingesetzten Techniken wie dem Einbinden von Script Tags vor dem schließenden </body> Tag oder dem Zusammenfügen aller Scripte und CSS-Dateien zu jeweils einer Datei gibt es noch weitere Möglichkeiten, die die Ladezeiten optimieren können. Im folgenden möchte ich ein paar vorstellen:

Bilder

Im Bereich der Bildkompression herrscht das größte Optimierungspotenzial. Leider gibt es aber noch wenig Tools und Programme, die dieses Potenzial voll ausnutzen und dabei einfach zu bedienen sind. Die meisten Designer nutzen für ihre Bilder und Grafiken Photoshop. Hierbei ist allerdings zu beachten, dass das Exportieren der Bilder über die Funktion „für Web und Geräte speichern“ keine ausreichende Größenreduzierung bietet. Daher ist es erforderlich, nach dem Export das entsprechende Bild über andere Tools weiter zu optimieren.

Welches Format sollte ich nutzen?

Diese Frage lässt sich pauschal nicht beantworten. Es kommt immer auf die entsprechenden Bildinhalte an. GIF und PNG bieten sich vor allem dann an, wenn die Bilder wenig unterschiedliche Farben beinhalten. Dieses trifft meist auf Logos und kleinere Website-Elemente zu. Die Größe der Dateien hängt vor allem mit der Anzahl der verwendeten Farben zusammen. Der Unterschied zwischen GIF und PNG liegt hauptsächlich an dem in PNG zusätzlich enthaltenen Alpha Kanal. So kann nicht nur der Wert für rot, grün und blau pro Pixel gespeichert werden, sondern auch die Transparenz von 0 – 100 %. GIF bietet zwar auch Transparenz, allerdings ohne Abstufungen. Ein Pixel ist also Transparent oder nicht. Für Fotos eignet sich JPG am besten, da hier immer alle Farben zur Verfügung stehen. Mit der Komprimierung und damit Reduzierung der Dateigröße ändert sich zwar die Qualität des Fotos, alle Farben sind aber dauerhaft vorhanden.

Tools für die Optimierung

Für PNG Dateien eignet sich das bisher wenig verbreitete Tool ImageAlpha, welches es derzeit leider nur für MAC gibt. Das Besondere an diesem Tool ist, dass es das PNG-Format, welches meist mit 24-bit Farbtiefe vorliegt, auf ein PNG Bild mit 8-bit Farbtiefe+Alpha Kanal (Transparenz) reduziert. So ergeben sich zwar sehr leichte Qualitätsunterschiede durch die geringere Anzahl an Farben, die Dateigröße kann aber meist sehr weit – teilweise sogar über 90 % – reduziert werden.

Hier mal ein Beispiel von der Website des Tools:

Für alle Nutzer, die keinen MAC verwenden, kann ich das Online Tool TinyPNG empfehlen. Dieses ist sehr einfach zu bedienen und ermöglicht das direkte Komprimieren von PNG Dateien im Browser. Dazu können die Dateien einfach per Drag and Drop in den Browser gezogen werden. Die Komprimierung erfolgt danach sofort automatisiert. Seit Neuestem bietet dieses Tool auch ein – leider nicht ganz kostenloses – Plugin für Photoshop, sodass die Komprimierung direkt aus Photoshop erfolgen kann.

Kommentare

  1. Richard am

    Ich überlege zwar nicht zu wechseln, aber das Thema brennt unter den Nägeln. Über genau solche Services kann sich Mittwald als Hoster des Vertrauens für Agenturen noch weiter von der Konkurrenz abheben. jpegoptim und optiPNG auf den vServern!!!

    Antworten
    1. Kristina Dahl am

      Hallo Richard!

      Das Thema wird auf jeden Fall angegangen! :) Leider können wir aktuell noch keinen festen Termin dafür nennen. Wir halten euch aber natürlich auf dem Laufenden! ;)

      Viele Grüße

      Kristina

      Antworten
      1. Tobias Mahl am
        Gibt es schon einen neuen Stand, wann jpegoptim und optiPNG auf den vServern verfügbar sein werden? Wir haben hier in Bezug auf diverse Shopware-Shops auch dringenden Bedarf!
        Antworten
        1. Andreas am
          der dringende Bedarf ist nicht nur hier vorhanden - wenn Mittwald doch zum Nikolaus diese Tools aus dem Sack zaubern könnte.....
          Antworten
          1. Jan Meyer am
            Hey Tobias und Andreas,

            bestellt euch euer Nikolaus-Geschenk bitte über unser Ticketsystem.
            Die finale Version, die global ausgerollt wird, ist aktuell noch in der Entwicklung.
            Wir haben aber bereits eine erste Version, die bereits eingebaut werden kann.

            Viele Grüße
            Jan von Mittwald
            Antworten
  2. Max Strebel am

    Danke für den Artikel. Ich will mich der Leserschaft anschließen und vorschlagen, dass Sie jpegoptim, optipng und evtl. andere Tools die für die Automatisierung von Bildern und anderen Assets für Google PageSpeed Insights hilfreich sind im Softwaremanager anbieten.

    Ich habe einige Pakete in denen eine automatisierte Installation hilfreich wäre.

    Antworten
  3. Andreas am

    Mein Vorschlag zur Aufwertung des vServer Angebots:

    jpegoptim
    optipng

    als script-tools in den Softwaremanager anbieten!

    Grüße

    Antworten
    1. Stefan Arndt am

      Hier muss ich recht geben vServer Standard sollte optipng sein. Ich bin echt unterwältigt das Mittwald dies hier nicht anbietet. Überlege zu wechseln.

      Antworten
  4. BMS am

    –> jpegoptim.
    Das würde mich auch interessieren, da man dieses Tool dann mittels cron anstoßen könnte.
    Grüßr

    Antworten
  5. Netzlicht Webdesign am

    Wäre es möglich, dass ihr die angesprochen Tools von Google auf den Mittwald-Servern installiert:
    https://developers.google.com/speed/docs/insights/OptimizeImages

    „Programm zur Bildkomprimierung verwenden

    Es sind verschiedene Tools verfügbar, mit denen sich JPEG- und PNG-Dateien ohne Beeinträchtigung der Bildqualität weiter komprimieren lassen. Für JPEG-Dateien empfehlen wir jpegtran oder jpegoptim. Diese Tools sind nur unter Linux verfügbar und werden mit der Option –strip-all ausgeführt. Für PNG-Dateien empfehlen wir OptiPNG oder PNGOUT.“

    So könnte man mit einem Klick alle Bilder, die sich auf dem Server befinden, optimieren…

    Grüße

    Antworten
  6. Matthias Klenk am

    …und wenn man dann noch etwas Zeit hat, sollte man die Bilder der Galerien oder der Seiten mit einer großen Anzahl an Bildern auf ein cdn auslagern… Dadurch werden die Requests auf den eigenen Server und das cdn verteilt…
    Hierzu kann ich nur S3 / Cloudfront empfehlen. Schnell eingerichtet und nahezu kostenfrei…

    Cheers
    Matthias

    Antworten
  7. Michael am

    Ich versuchs nochmal, weil vielleicht für dein einen oder anderen hilfreich:

    PNGQuant (Photoshop Plugin zum Speichern direkt aus PS heraus, Win & OSX; macht dasselbe wie das im Artikel erwähnte ImageAlpha, aber spart einen Zwischenschritt wenn man mit Photoshop arbeitet): https://github.com/pornel/pngquant-photoshop
    Imageoptim: https://imageoptim.com/
    JPEGMini: http://www.jpegmini.com/

    Antworten
  8. Michael am

    Ich habe am 21. od. 22. 1. einen Kommentar auf diesen Blogpost mit Links zu verschiedenen Bild-Optimierungstools verfasst, (+ Links), scheint aber vom Spam Filter verschluckt worden zu sein (wegen der Links vielleicht?)..

    Antworten
  9. Dennis Geldmacher am

    Ihr solltet euch mit dem pagespeed mod von Google mal auseinandersetzen. Dann wäre das mit den Bildern bei euch auf den Servern out-of-the-box möglich. Zuzüglich weiterer schöner Performance Benefits.

    Antworten
  10. Dennis Geldmacher am

    Viel sinnvoller wäre es, wenn ihr euch mal mit dem pagespeed mod (https://developers.google.com/speed/pagespeed/module) von Google auseinander setzen würdet. Da ist das nämlich inkludiert und passiert somit direkt durch eure Server. ;)

    Es gäbe dadurch auch noch weitere Performance Benefits!

    Antworten
  11. Michael am

    Ich verwende sehr gerne aus im Artikel genannten Gründen die Tools ImageOptim (https://imageoptim.com/), ein Standalone Bild-Optimierer für Mac; und zum sofortigen PNG-Speichern aus Photoshop heraus das PNG-Quant Plugin (https://github.com/pornel/pngquant-photoshop) das genau das beschriebene macht, aber man spart sich den Zwischenschritt. Letzteres gibt es für Windows UND OSX.
    Für JPEGs gibt es noch JPEGmini (http://www.jpegmini.com/), allerdings ist dieses z.T. kostenpflichtig und manchmal komprimiert es zu stark (hängt von den Bildinhalten ab).

    Eine serverseitige Lösung würde mich persönlich sehr interessieren, die z.B. bei TYPO3 nachgeschaltet die Bilddaten noch entsprechend verkleinert.. Ist da etwas bekannt?

    Antworten
  12. Andreas am

    Schön wäre es vielleicht, auch noch die Links zu den og. Tools mit anzugeben.

    Danke

    Antworten
    1. Annika Schwanitz am

      Hallo Andreas,

      danke für den Hinweis. Die Links zu den Tools sind jetzt enthalten.

      Viele Grüße
      Annika vom Mittwald Social Media Team

      Antworten

Kommentar hinzufügen