Entenattacke

Das Internet, unendliche Weiten. Wir schreiben das Jahr 2014. Dies sind die Abenteuer des Raumschiffs Blogosphere, das mit seiner tausende Mann (und Frau!) starken Besatzung seit Jahren unterwegs ist, um fremde Themen zu erforschen, neues Leben und neue Gedanken. Viele Lichtjahre von den Regierungen dieser Erde entfernt dringt die Blogosphere in Galaxien vor, die nie eine Bundeskanzlerin zuvor gesehen hat.

Gerade erst hat diese unsere Bundesregierung ihre Digitale Agenda verkündet, die diese unsere Blogosphere in neue digitale Sphären vorzustoßen weiterhin einschränken wird. Und doch gibt es immer wieder Blogger, die in besten Wissen und Gewissen mehrere Megabyte große Fotos in ihre Artikel quetschen.

Denn es gibt nach wie vor Leser, die nur eine zwei oder sechs MBit/s-DSL haben (gemerkt? Das “L” steht bereits für Line wie Leitung). Die Kapazität dieser Leitung verteilt sich nicht nur auf das World Wide Web sondern noch auf andere Internet-Dienste. Kaum noch jemand, der ohne Synchronisierung oder Backup im Hintergrund arbeitet. Oder dabei skyped. Oder telefoniert. Und mit der Digitalen Agenda dieser unseren Digilogen Bundesregierung wird das auch bis 2018 nicht wesentlich besser werden – besonders nicht in ländlichen Regionen. Machen wir uns nichts vor, auch die DSL-Alternative LTE ist nur eine Krücke.

Letztens rief ich einen Blogartikel auf, um mehrere Sekunden lang verwundert den Aufbau von zwei Fotos zu betrachten. Insgesamt waren mit dem einen Artikel etwa sechs Megabyte an Fotos durch dieses Internet auf meinem Rechner gelandet.

Also, liebe Blogger (und nicht nur die), sind hier von mir ein paar Tipps:

  • Eine Fotodatei (oder eine Grafik) sollte nicht mehr als maximal 300 bis 800 Kilobyte groß sein (das kommt natürlich auf Verwendungszweck und Bildgröße an, siehe unten)
  • Eine Pixeldichte von 72 dpi reicht online vollkommen aus
  • Eine Bildgröße von maximal 1600 x 1200 ist normalerweise selbst für die Vollbilddarstellung auf großen Desktopmonitoren vollkommen ausreichend, meistens reicht (je nach Motiv und Absicht) sowieso eine wesentlich geringere Größe
  • Das Dateiformat meiner Wahl ist nach wie vor das JPEG oder JPG-Format, damit lässt sich die Qualität auch herunterfahren, ohne dass das einem Betrachter wesentlich auffällt

Bildoptimierung

Um Fotos für meine Blogs zu optimieren verwende ich zwei kostenlose Tools:

Beide Tools beherrschen sowohl das JPG- als auch das PNG-Format. Mit ihnen optimiere ich Fotos, bevor ich sie in das jeweilige Content Mangement System (hier ist es WordPress) hochlade. Für die Anzeige in einem Artikel bieten die CMS mittlerweile verschiedene Anzeigegrößen an, für die sie die Dateien automatisch verkleinern. Deswegen sollte dann auch nicht immer das hochgeladene Foto in seiner maximalen Größe angezeigt werden.

Die Entenattacke

Für einen Vergleich benutze ich ein Foto der Enteninvasion an der Selz, das ich mit meinem HTC One (M8) geschossen habe. Ich habe das Foto auf Flickr, wo man es in unterschiedlichen Größen auch wieder herunterladen kann. Genau das mache ich zur Vereinfachung (Links gehen auf die jeweilige Anzeige- und Downloadseite):

Anschließend optimiere ich die Fotos mit ImageOptim. Dazu ziehe ich per Drag & Drop die fünf Dateien vom Finder in das Fenster von ImageOptim . Die Allgemeinen Einstellungen in ImageOptim habe ich alle aktiviert. Außerdem werden alle EXIF Markierungen und Kommentare entfernt. Die Einstellung in ImageOptim für das JPEG-Format stehen auf 87 Prozent.

Und das ist das Ergebnis (oben ein Teil der Anzeige des Finders, unten die Anzeige von ImageOptim):

ImageOptim (Entenattacke)

Ergebnis der Bildoptimierung mit ImageOptim per Drag & Drop

Aus ursprünglich 6,7 MB macht ImageOptim 3,4 MB. Etwa zwei Drittel sind von den beiden Dateien mit den größten Bildgrößen. Doch die benutze ich nur sehr, sehr selten. Zur Verdeutlichung ist hier die Entenattacke in der Bildgröße 620 x 350 mit nur 102 KB (von WordPress erstellt, beim Klicken bekommt Ihr eine größere Datei angezeigt):

Entenattacke

Die Entenattacke (620 x 350, 102 KB)

Zum Vergleich der Link auf die Fotodatei mit der Bildgröße 1600 x 905 (aufpassen: Der Browser verkleinert möglicherweise die Anzeige, ein Mal klicken zum Vergrößern).

Achtet also bitte auf die Pixeldichte, die Bildgröße und vor allem auf die Dateigröße. Danke!

P.S.: Das funktioniert übrigens auch sehr gut vor dem Versenden der Email mit vier Fotos von dem süßen Katzenbaby – jedes 4 MB groß ;-)

5 Kommentare
  1. Ute Klingelhöfer sagte:

    Hallo Frank,

    ich mache gerade meine Website neu und achte dabei verstärkt auf die Dateigröße der Bilder. Das Thema finde ich auch noch unter Suchmaschinenaspekten interessant, d. h. Bilder sollten auch richtig benannt werden und man sollte beim Hochladen Alt-Titel, Titel und Beschreibung vergeben. Das ist nervige Fleißarbeit, doch ich glaube, sie lohnt sich. ;-)

    Viele Grüße
    Ute

    • Frank Hamm sagte:

      Hallo Ute,

      das sind weitere Punkte, auf die ich auch normalerweise achte. Manchmal vergesse ich das in der Eile. Aber wie Du sagst: Es lohnt sich.

      Und dannist da noch der rechtliche Aspekt. Ich nutze meistens eigene Fotos, oder skizziere etwas auf dem iPad mit Noteshelf und einem Stylus. Gelegentlich verwende ich CC-lizensierte Fotos. Und immer schön die Lizenz und den Urheber nennen :-)

      LG Frank

    • Frank Hamm sagte:

      Hallo Dirk, danke für den Hinweis. Die großen Dateien sind noch nicht optmierte „ältere“ Fotodateien. Die werde ich demnächst mal optimieren und ersetzen.

      Die PNG-Dateien sind aus dem WordPress-Theme, an die hatte ich noch gar nicht gedacht.

      Allerdings ist PageSpeed Insights oft sehr optimistisch, was die Optimierung angeht. Bisher hätte ich die aufgezeigten Reduzierungen meistens nur mit wirklich sichtbaren Qualitätsverlusten erreichen können.

      Da ich bei Fotos fast nur mit JPEG-Dateien arbeite, verwende ich TinyPNG nicht. Ansonsten ist das Tool aber zu empfehlen.

      • Dirk sagte:

        Dachte ich mir fast. ;-) Tinypng-Optimierungen hat Google bislang immer akzeptiert. Allerdings lohnt nicht jede Pagespeed-Empfehlung den Aufwand…

Kommentare sind deaktiviert.