Drücke die Tasten ◄ ► für weitere Artikel  

TinyPNG: Bilder mit wenig Qualitätsverlust fürs Web komprimieren

TinyPNG ist ein Online-Tool, das PNG-Dateien verkleinert, dabei aber selbst Bildern mit Transparenzen nicht in der Optik schadet und Photoshop's "Für Web Speichern"-Funktion den Kampf ansagt.

TinyPNG: Bilder mit wenig Qualitätsverlust fürs Web komprimieren

TinyPNG verkleinert, wie der Name schon vermuten lässt, PNG Dateien. Einen ähnlichen Dienst für JPEG Dateien stellten wir euch bereits in unserem Artikel zu JPEGmini vor. Das Verfahren hinter TinyPNG ist zwar verlustbehaftet, rein optisch aber schafft der clevere Algorithmus hinter dem Tool es, die Grafiken verlustfrei aussehen zu lassen. Dabei geht noch weiter als Photoshop: Es bietet indexierte 8Bit PNG mit voller Transparenz an, die mit bloßem Auge kaum von den viel größeren 24Bit PNG unterschieden werden kann.

Das Online Tool der holländischen Agentur Voormedia verspricht viel: Die Größe von PNG-Dateien um bis zu 70% zu reduzieren, ohne optische Verluste hinnehmen zu müssen.

Die Nutzung ist simpel: Man lädt per Drag&Drop bis zu 20 Bilder mit einer maximalen Dateigröße von jeweils 2MB hoch, TinyPNG verarbeitet sie und stellt sie als Download zur Verfügung. Und tatsächlich erspart das Tool im Test zwischen 60% und 70% der Dateigröße.

TinyPNG reduziert die Größe von PNG Dateien um bis zu 70%
TinyPNG reduziert die Größe von PNG Dateien um bis zu 70%

Ein konkretes Beispiel: Uns liegt ein PNG-Ausgangsbild mit einer Größe von 390kb vor. Speichert man das Bild mit der Photoshop Funktion "Für Web Speichern", erreicht man immerhin eine Gesamtgröße von 340kb bei einem 24 Bit PNG. TinyPNG liefert eine qualitativ ebenbürtige Version des Bildes mit einer Größe von nur 104kb zurück.

Vergleich zwischen Kompression von Photoshop und TinyPNG
TinyPNG vs Photoshop

Diese Reduktion ergibt sich durch das Entfernen nicht benutzter Farben und Metadaten. Außerdem kommt bei TinyPNG ein Verfahren namens Quantisierung zum Einsatz. Das in der Bild-, Video- und Tonkompression eingesetzte Verfahren fasst ähnliche Werte zusammen und kann so die Dateigröße stark reduzieren.

TinyPNG - Gute Ergänzung auf für Photoshop Besitzer

Mit TinyPNG vergleichbare Ergebnisse kann Photoshop derzeit nicht liefern: 8Bit Grafiken mit Transparenzen kommen aus dem Programm nur mit unschönen Säumen und weiteren optischen Einbußen raus. Außerdem können mit TinyPNG selbst im Internet Explorer 6 Transparenzen ohne Probleme dargestellt werden. Auch da muss Photoshop sich vorerst geschlagen geben.

TinyPNG - Testen lohnt sich

TinyPNG ist kostenlos auf der Projektseite von TinyPNG verfügbar und auf jeden Fall einen Versuch wert. Wem die Qualität des Tools dann doch nicht ausreichen sollte, kann immer noch zu der Photoshop-Version seiner Grafiken greifen. Das dürfte aber von Bild zu Bild variieren.

Über den Autor

Ilja big Ilja Zaglov ist selbstständiger Kommunikations- & Mediendesigner. Er unterstützt kleine und mittelständische Unternehmen bei der Erstellung von Online- und Offline-Medien. Neben Web-Gestaltung gehören Motion-Graphics und 3D-Inhalte zu seinen Spezialgebieten.

281 Shares bis jetzt – Dankeschön!

Bewerten
VN:F [1.9.22_1171]
20 Antworten
  1. von zodiac1978 am 24.10.2012 (16:39Uhr)

    TinyPNG funktioniert nur bei Grafiken wirklich gut. Bei Fotos erkennt man die Reduzierung des Farbumfangs doch deutlich. Wirklich praktisch ist dagegen, dass die 8-Bit-PNGs auch mit Transparenz im IE6 laufen.

  2. von maddin am 24.10.2012 (16:51Uhr)

    super Tool, nutze ich jeden Tag.

    @zodiac1978
    für Fotos ist png auch das falsche Format. da solltest du lieber jpeg oder tiff nehmen.
    und für jpeg gib's auch ein gutes tool.

    http://www.jpegmini.com/

    auch als download im app store (kostenlose version ist auf 20 bilder pro tag begrenzt)

  3. von SAR.Agentur am 24.10.2012 (16:54Uhr)

    Adobe Fireworks exportiert auch 8-bit PNGs mit Alphatransparenz. Das sollte Photoshop auch dringend lernen. TinyPNG spart bei den mit Fireworks erstellten Grafiken nur noch ~10%.
    Für fotorealitische Bilder ist das natürlich keine Alternative, da der Farbumfang auf 256 Farben begrenzt ist.

  4. von Mike Rathmer via facebook am 24.10.2012 (17:12Uhr)

    Habs ausprobiert. Zack... aus 1,4 MB schmale 699,6 KB gemacht (-50%), innerhalb von ein paar Sekunden...und das kostenlos :-) Geilomat!

  5. von Jürgen Haberfellner via facebook am 24.10.2012 (17:20Uhr)

    der Artikel hat wirklich mal ein dickes (y) verdient!

  6. von Stefanie Bamberg via facebook am 24.10.2012 (17:21Uhr)

    Das klingt gut und wird beim nächsten Webdesign mal getestet :)

  7. von demipress via facebook am 24.10.2012 (17:23Uhr)

    Nehme ich in Test mit auf, aber klingt sehr vielversprechend, danke.

  8. von Dominik Lessel via facebook am 24.10.2012 (17:49Uhr)

    Na ja Unterschiede sieht man definitiv, wenn man Bilder mit Gradients drin hat, aber ansonsten top :)

  9. von Christoph S. Ackermann via facebook am 24.10.2012 (17:56Uhr)

    Werden wir bei cubetech testen :) (y)

  10. von André Wenzel via facebook am 24.10.2012 (21:12Uhr)

    Schon einige Zeit im Einsatz und für gut befunden! (y)

  11. von Frank Lämmer am 24.10.2012 (21:34Uhr)

    fehler in der überschrift?!:
    TinyPNG - Gute Ergänzung AUCH für Photoshop Besitzer

    Das Programm ImageAlpha hier macht glaube ich auch was ähnliches: http://pngmini.com/

  12. von ArtViper Designstudio via facebook am 25.10.2012 (07:11Uhr)

    Seid ihr diesmal aber spät dran das stand schon vor Tagen auf webappers

  13. von Martin Merten via facebook am 25.10.2012 (09:42Uhr)

    habt ihr das gesehen: "you grant the Operator and its suppliers the worldwide, royalty-free, non-exclusive right to copy, store and modify your content as part of the Service"
    GEHT GAR NICHT

  14. von Frank Gerards via facebook am 25.10.2012 (11:58Uhr)

    @martin: lmao :), nutzt nur alle diesen dienst - im zeitalter von 3G und dicken webleitungen gehoeren sich imho 24bit PNGs als transparenz-Standard...

  15. von TinyPNG macht PNGs kleiner - Netzlogbuch am 25.10.2012 (12:19Uhr)

    [...] via t3n Bildbearbeitung, Grafik, PNG 25. Oktober 2012von Matthias Zellmer TinEye – Bilder [...]

  16. von Armin Vieweg via facebook am 25.10.2012 (13:36Uhr)

    Cooler Dienst! Noch cooler wäre, wenn die eine API anbieten würden, über die man das Konvertieren automatisieren kann. Aber das scheint es weder zu geben noch geplant zu sein :-/

  17. von Webseiten Bildoptimierung – Bilder… am 26.10.2012 (21:49Uhr)

    [...] Heute in der T3N gesehen! TinyPNG ist ein Anbieter bei dem man online seine PNG Bilder optimieren kann. Sieht sehr gut aus! Anbei der Link zum T3N Artikel: http://t3n.de/news/tinypng-bilder-wenig-421853/ [...]

  18. von Sizzlepig: Bild-Größe ändern ohne Sof… am 27.10.2012 (16:01Uhr)

    [...] einfach nur Bilder mit wenig Qualitätsverlust fürs Web komprimieren will, der sollte sich einmal das Online-Tool TinyPNG anschauen. Der clevere Algorithmus hinter dem [...]

  19. von Sizzlepig: Bild-Größe ändern ohne Sof… am 27.10.2012 (23:30Uhr)

    [...] einfach nur Bilder mit wenig Qualitätsverlust fürs Web komprimieren will, der sollte sich einmal das Online-Tool TinyPNG anschauen. Der clevere Algorithmus hinter dem [...]

  20. von Performance für Einsteiger Teil 3: Fron… am 29.11.2013 (07:30Uhr)

    […] entsprechenden Export-Einstellungen bereits gut optimierte Bilder aus. Mit einigen Online-Tools wie TinyPNG, JPEGmin oder dem „Image-Optimizer“ von Dynamic Drive können noch bessere Ergebnisse erzielt […]

Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Kennst Du schon unser t3n Magazin?

t3n-Newsletter
Top-Themen der Woche für Web-Pioniere
Jetzt kostenlos
anmelden
Diesen Hinweis verbergen