Wie kann die Dateigröße von Bildern reduziert werden?

[doho]

Es dürfte hier für niemanden neu sein, dass eine schnelle Ladezeit ein wichtiger Onpage-Faktor ist. Das größte Einsparungspotential (auf die Dateigröße bezogen) bieten wohl Bilder.

Ich habe dazu gestern gebloggt und habe die Services tinypng, JPEGmini und das WordPress-Plugin Optimus kurz vorgestellt (zum Artikel)

Mich würde interessieren, welche weiteren Möglichkeiten oder auch Alternativen es gibt. Was nutzt ihr? Womit habt ihr gute oder schlechte Erfahrungen gemacht?

[gurken]

von Website Plugins welche das für einen erledigen höre ich grad zum ersten mal
Ich vermute mal, dass das Ergenis mehr Schlecht als Recht ist da jedes Bild gleich behandelt wird?

Tipps kann ich folgende geben:
* für Fotos jpg, für Grafiken .png
* man braucht Bilder im Blog, oder auf der Website nicht im Originalformat am besten alles auf eine Breite von 800-600px verkleinern
* besonders schnell kann man mit Irfanview arbeiten, Strg+R für Größe ändern, "s" zum speichern, die Qualität kann man hier ruhig auf 50-70% stellen, reicht meistens aus
* Dateigröße sollte nicht über 100kB sein
* Photoshop würde ich nicht empfehlen da zum Teil viele unnötige Infos ins Bild hinterlegt werden, sodass die Dateigröße künstlich vergrößert wird. Zum Beispiel Irfanview und PS, Bild wird mit den selben Einstellungen gespeichert, Bild ist in PS meist doppelt so groß.
In Irfanview kann ich beim speichern auswählen welche Infos gespeichert werden und welche nicht, gerade fürs Web deaktiviere ich hier fast alles.

Meine Bilder sind bei 800px Breite meist um die 40-80Kb je nach Inhalt und das ohne offensichtlichen Qualitätsverlust.

[Cognac]

von Website Plugins welche das für einen erledigen höre ich grad zum ersten mal
Ich vermute mal, dass das Ergenis mehr Schlecht als Recht ist da jedes Bild gleich behandelt wird?

Nein, die Qualität sieht wirklich gut aus. Wenn es schnell gehen muss, nutze ich es auch. Ansonsten arbeite ich mit Gimp, vor der Reduzierungcwähle ich noch den passenden Bildausschnitt. So "gewinnt" man beim verkleinern noch zusätzlich Qualität

Wichtigster Punkt ist hier immer noch: reduziere keine Bilder in html per width und height! Beliebter Fehler, auch unter manch "Profi".

[doho]

Die Ergebnisse sind durchaus gut. Die Bilder im Artikel sind allesamt mit den Tools verkleinert worden
Wenn man sich auskennt kann man von Hand bestimmt kleinere Grafiken mit besserer Qualität erzeugen - aber das kostet dann natürlich auch mehr Zeit.

Ich speichere die Grafiken mit Photoshop über "für Web speichern"
1) jpg: 60-70%
2) png als 24 bit Variante

Den Rest überlasse ich in der Regel den Tools (die übrigens auch Meta-Daten entfernen).

[top]

Von den scheinbar gleichen Einstellungen beim speichern von JPG-Bildern sollte man sich nicht blenden lassen. Entscheidend ist für mich der Vergleich der Qualität eines Bildes bei ungefähr gleichen Dateigrößen. Wie weit ein JPG bei welchen Prozentwerten reduziert wird ist bei jedem Programm anders. Letztlich sind die Unterschiede doch sehr gering und einen eindeutigen Sieger habe ich bei meinen Tests noch nicht ausmachen können.

Wenn man viele kleine Einzelgrafiken auf einer Seite verwendet, sollte man sich mal mit "CSS Sprites" befassen.
Dabei schmeißt man sämtliche Icons, Flaggen-Symbole und was man noch so an Kleinigkeiten auf seiner Seite braucht in eine einzige Bilddatei. Die CSS-Datei wird dadurch zwar wieder ein Stückchen größer, man hat aber statt vielen einzelnen Bild-Dateien nur noch eine einzige Datei die deutlich schneller geladen wird.

[Lugas]

Für das komprimieren ist von PNGs ist neben TinyPNG auch noch CompressPNG (https://compresspng.com/) ziemlich gut.
Für GIMP nutze ich die Erweiterung RIOT, mit der kann man auch nochmal das letzte rausholen.

[dreamy]

Wie wärs mit einer verlustfreien Komprimierung wie google es vorschlägt.

https://developers.google.com/speed/doc ... ressImages


Wieviel eingespart werden kann, kann man hier testen

https://developers.google.com/speed/pagespeed/insights


Ansonsten hatte ich gelesen:

JPEG für Bilder
GIF für Bilder in denen Text vorkommt, da der Text nicht ausfranst, aber die Bilder schlechter Darstellt
PNG für Bilder mit Text, wobei der Text nicht ausfransen soll und die Bilder ähnlich dem JPEG dargestellt/ gespeichert werden.

[ElDiablo]

Mir fällt kein Grund ein heute noch gifs zu verwenden - außer auf einer Webseite für animierte Gifs und Werbebanner

Ich persönlich lasse immer ein Batch mit meinen Settings drüber laufen und ob die Bilder nun etwas größer oder kleiner ausfallen, ist mir völlig egal. Wir surfen heute nicht mehr mit einem 14.4 Modem und da sollten große Bilder kein Problem sein.

[dreamy]

Wir surfen heute nicht mehr mit einem 14.4 Modem und da sollten große Bilder kein Problem sein.

Rund 150 kbit/s konnte ich bei unserem Umzug aus dem Surfstick ziehen, das ist wenn man es mal vergleicht etwas mehr als die Geschwindigkeit eines gekoppelten ISDN Anschlusses (2 x 64 kbit/s) und da macht sowas schon Sinn.

[discountnetz]

Hallo
genau darum geht es. Mobiles Surfen sei es über Smartphone oder Tablet ist ein Krampf. Ich könte jedesmal kot... wenn ich unterwegs bin und Webseiten anschauen möchte/muss deren Startseite mal eben > 1 MB gross ist. Wunderschöne Webseiten, keine Frage, umgesetzt mit MB grossen Frameworks und im responsive Design.

Der Mainstream ala heise propagiert ja das mittlerweile überall sauschnelle mobile Internetzugänge verfügbar sind. Meiner Erfahrung nach ist das Gegenteil der Fall. Langsam bis zum geht nicht mehr im überwiegenden Teil Deutschlands. Und da spielt die Größe der Webseite und der Bilder schon eine Rolle.

Freundliche Grüsse
Jan

[Tippi]

Hier ist aber nicht in erster Linie die Größe von Bildern (ich halte sie so klein wie möglich) ausschlaggebend, sondern die scheiß Verbindungsraten in Germany. Wir sind mittlerweile Hinterbänkler, wenn es um Geschwindigkeit bei Internetverbindungen geht,

[boo]

Man versuche den optimalen Kompromiss zwischen Dateigröße und bestmöglicher Qualität zu finden.

Sicherlich surft eine große Nutzerschaft nicht mehr mit 14.4er Modems (und das war schon Luxus).
Trotzdem gibt es einerseits noch Gegenden in Deutschland, da wundert sich manch Betroffener über
unterirdische DSL-Geschwindigkeiten. Davon mal abgesehen wünscht selbst der Leitwolf der Suchmaschinen
schnell ladende Webseiten! Zwar aus Profitgründen - doch einerlei. Er wünscht es!
Kann man ignorieren, doch dann bitte nicht wundern.

Richtig grantelig wird diese Problematik, wenn auf der Startseite ein Slider 7-10 schlecht komprimierte Bilder anzeigen soll.
Fällt einem Super-Highspeed-DSL-Angeschlossenen vielleicht nicht auf,
wenn der Ladevorgang der Seite gefühlt eine Minute dauert.
Einem mobilen Surfer auf dem Nachhauseweg in einem fast faradayschen Käfig sehr wohl.
Einem mit extrem mikriger DSL-Geschwindigkeit Versorgten ebenfalls.

Diese Problematik kann man ignorieren, doch dann bitte nicht wundern...

Ich empfehle zum Testen der Geschwindigkeit https://tools.pingdom.com/fpt/
Anschließend die größten Zeitfresser maximal verkleinern.

Photoshop = Web speichern unter ->Qualitätsreduktion bis es meinem betrachtenendem Auge
eine Zumutung wird, Quali wieder ein klein wenig anheben und dann abspeichern.

boo

[Ehrenwert]

Guten Tag,

aufgrund der Größe insbesondere unserer Startseite werden wir uns hier auch noch etwas einfallen lassen müssen. Für Joomla gibt es beispielsweise einige Plugins, die eine automatische Kompression von Bildern versprechen. So etwas gibt es sicherlich auch für Wordpress und Co, allerdings haben wir hierzu noch keine Erfahrungsberichte sammeln können.


Beste Grüße aus Göttingen

[Lugas]

So etwas gibt es sicherlich auch für Wordpress und Co, allerdings haben wir hierzu noch keine Erfahrungsberichte sammeln können.

Für WordPress kann ich das Plugin WP Smush.it empfehlen.
Zusammen mit dem W3 Total Cache bringt das echt viel Performance.