Kom­pri­mier­te Bilder wirken sich ins­be­son­de­re positiv auf die La­de­zei­ten von Webseiten aus. Doch wie kom­pri­miert man Bilder möglichst ver­lust­frei, also ohne sichtbare Einbußen der Bild­qua­li­tät? Und welche Mög­lich­kei­ten stehen Ihnen dafür zur Verfügung? Wir bieten Ihnen einen Überblick zum Thema Bild­kom­pres­si­on.

Profi-Website in Sekunden dank KI.
  • Profi-Website in Sekunden dank KI
  • Aus tausenden Vorlagen auswählen
  • 30 Tage kostenlos testen

Warum sollte ich meine Bilder kom­pri­mie­ren?

Bilder und Fotos in hoher Auflösung sind keine Sel­ten­heit mehr. Die Pi­xel­an­zahl digitaler Fo­to­gra­fien steigt und damit auch die Größe der Bild­da­tei­en. Doch un­ab­hän­gig davon, ob Sie Bilder für Ihre Website nutzen oder per E-Mail ver­schi­cken wollen, sollten Sie auf die Da­tei­grö­ße achten. Denn je kleiner die ver­wen­de­ten Dateien sind, desto schneller verläuft deren Über­tra­gung, was ins­be­son­de­re aus zwei Gründen von Vorteil ist:

  • Ein schneller La­de­pro­zess erhöht die Zu­frie­den­heit der Be­su­che­rin­nen und Besucher (ins­be­son­de­re die von Usern mit mobilem In­ter­net­zu­gang).
  • Schnelle La­de­zei­ten wirken sich positiv auf das Ranking bei Such­ma­schi­nen aus.

Das richtige Da­tei­for­mat für Bilder im Web

Bevor Sie Bilder auf Ihre Website stellen, sollten Sie das Format der Bild­da­tei­en prüfen. Nicht jedes Gra­fik­for­mat ist für die Ver­wen­dung im Internet geeignet. Diese fünf Da­tei­for­ma­te bieten sich für den Einsatz im Internet besonders an:

  • JPG/JPEG: Das JPG-Format gehört zu den am häu­figs­ten ver­wen­de­ten digitalen Bild­for­ma­ten. Es kann bis zu 16,7 Millionen Farben dar­stel­len und stark kom­pri­miert werden (ver­lust­be­haf­tet). JPGs bieten sich vor allem für die Spei­che­rung von Fotos oder fo­to­ähn­li­chen Grafiken an – besonders von solchen mit vielen ver­schie­de­nen Farben und starken Kon­tras­ten.
  • PNG: Das PNG-Format kann 256 (PNG8) bis 16,7 Millionen (PNG24) Farben abbilden und wird ebenfalls sehr oft im Internet genutzt. Es lässt sich im Gegensatz zu JPGs nahezu ver­lust­frei kom­pri­mie­ren. PNG-Dateien bieten sich für die Spei­che­rung von Grafiken, Logos und Texten an. Vor allem Ab­bil­dun­gen, die nur wenige Farben verwenden, lassen sich als PNGs auf einen Bruchteil der Ori­gi­nal­grö­ße kom­pri­mie­ren.
  • WebP: WebP ist ein modernes Bild­for­mat, das von Google ent­wi­ckelt wurde, um eine bessere Kom­pri­mie­rung bei hoher Bild­qua­li­tät zu er­mög­li­chen. Es un­ter­stützt sowohl ver­lust­be­haf­te­te als auch ver­lust­freie Kom­pri­mie­rung, wodurch kleinere Da­tei­grö­ßen im Vergleich zu JPEG und PNG erzielt werden. Durch ef­fi­zi­en­te Al­go­rith­men wie prä­dik­ti­ve Kodierung kann WebP Bilder um bis zu 30 % kleiner kom­pri­mie­ren als JPEG bei ver­gleich­ba­rer Qualität. Zudem un­ter­stützt das Format Trans­pa­renz (Alpha-Kanal) und Ani­ma­tio­nen, was es zu einer viel­sei­ti­gen Al­ter­na­ti­ve zu PNG und GIF macht.
  • SVG: SVG (Scalable Vector Graphics) ist ein XML-basiertes Bild­for­mat, das für Vek­tor­gra­fi­ken verwendet wird. Da es auf ma­the­ma­ti­schen Be­schrei­bun­gen von Formen und Linien basiert, bleibt die Bild­qua­li­tät un­ab­hän­gig von der Ska­lie­rung erhalten. Im Gegensatz zu pi­xel­ba­sier­ten Formaten kann SVG mit einfachen Code-Op­ti­mie­run­gen und gzip-Kom­pri­mie­rung stark reduziert werden, ohne die visuelle Qualität zu be­ein­träch­ti­gen. Besonders für Logos, Icons und Il­lus­tra­tio­nen im Web ist SVG ideal.
  • GIF: Auch GIF-Dateien werden – obwohl sie nur 256 Farben abbilden können – relativ häufig im Netz verwendet. Dies liegt vor allem daran, dass man mit dem GIF-Format kleine Ani­ma­tio­nen von an­ein­an­der­ge­reih­ten Bildern dar­stel­len kann, die in Social Media und Co. sehr beliebt sind.
Tipp

Die Kom­pri­mie­rung von Fotos und Bildern zählt zu den wich­tigs­ten Schritten, um die Per­for­mance des eigenen Web­pro­jekts zu ver­bes­sern. Es gibt jedoch noch weitere Wege, um das ver­wen­de­te Bild­ma­te­ri­al zu op­ti­mie­ren: So lohnt es sich etwa, die Maße eines Bildes im Quellcode anzugeben, damit der Browser diese nicht selbst berechnen muss. Auch das Entfernen von Metadaten (Meta-Tags, EXIF-In­for­ma­tio­nen etc.) wirkt sich durchaus positiv auf die La­de­ge­schwin­dig­keit aus. Enthält Ihre Web­an­wen­dung sehr viele Bilder, ist zudem die Aus­lie­fe­rung über ein Content Delivery Network (CDN) zu empfehlen.

Option 1: Bilder online kom­pri­mie­ren

Wenn Sie Fotos kom­pri­mie­ren möchten, ohne eine spezielle Software in­stal­lie­ren zu müssen, können Sie Ihre Bilder auch ganz einfach direkt online op­ti­mie­ren. Zu diesem Zweck exis­tie­ren ver­schie­de­ne Angebote im Web, die Ihnen die kos­ten­freie Kom­pri­mie­rung er­mög­li­chen. Die Tools un­ter­schei­den sich dabei in der Regel in den zur Verfügung stehenden Da­tei­for­ma­ten, den möglichen Kom­pres­si­ons­gra­den und haben häufig Li­mi­tie­run­gen hin­sicht­lich der Zahl möglicher Kom­pri­mie­run­gen. Einige der besten Lösungen finden Sie in den folgenden Ab­schnit­ten.

Op­ti­mi­zil­la

Das On­line­tool Op­ti­mi­zil­la von Mediafox Marketing er­mög­licht es, bis zu 20 Bilder gleich­zei­tig hoch­zu­la­den und im Anschluss zu kom­pri­mie­ren. Vor­aus­set­zung ist, dass die Bilder entweder im JPEG- oder im PNG-Format vorliegen. Die Web­an­wen­dung greift zu diesem Zweck auf eine Kom­bi­na­ti­on aus ver­schie­de­nen Kom­pres­si­ons­al­go­rith­men zurück, die sich durch ein gutes Ver­hält­nis von Kom­pri­mie­rung und Bild­qua­li­tät aus­zeich­nen. Per Schie­be­reg­ler können Sie dabei den Kom­pri­mie­rungs­grad festlegen, bevor Sie die Er­geb­nis­se einzeln oder im Verbund als ZIP-Datei her­un­ter­la­den.

Bild: Bildkomprimierung in Optimizilla
Nachdem der ge­wünsch­te Kom­pri­mie­rungs­grad gefunden ist, be­stä­ti­gen Sie ihn in Op­ti­mi­zil­la durch einen Klick auf „Apply“. Hier im Beispiel wird das um 22 Prozent ver­klei­nert.

Damit Sie die best­mög­li­chen Ein­stel­lun­gen finden, un­ter­stützt Op­ti­mi­zil­la Sie durch Mi­nia­tur­an­sich­ten von Original und kom­pri­mier­tem Pendant. Zu­sätz­lich gibt das Tool die jeweilige Da­tei­grö­ße an. Alle hoch­ge­la­de­nen Bilder werden nach einer Stunde au­to­ma­tisch von den Servern des Anbieters gelöscht.

Vorteile Nachteile
Kom­pri­mie­rungs­grad anpassbar Be­gren­zung auf 20 gleich­zei­ti­ge Kom­pri­mie­run­gen
Mi­nia­tur­vor­schau von Original und Resultat

TinyPNG

TinyPNG er­mög­licht – anders als es sein Name vermuten lässt – nicht nur die Kom­pri­mie­rung von PNG-, sondern auch von JPEG- und WebP-Dateien. In der kos­ten­frei­en Stan­dard­ver­si­on können Sie bis zu 20 Bilder dieser drei Formate gleich­zei­tig op­ti­mie­ren, wobei die maximale Da­tei­grö­ße pro Bild auf 5 Megabyte begrenzt ist.

Bild: Screenshot der TinyPNG-Website
Nach der Kom­pri­mie­rung zeigt TinyPNG die neue Größe der Bilddatei(en), sowie die gesparte Da­tei­grö­ße (in Prozent) an.

Das Tool von Voormedia hat eine vor­de­fi­nier­te Kom­pres­si­ons­stu­fe, die sich zwar nicht anpassen lässt, die Bildgröße aber um bis zu 80 Prozent ver­rin­gert. Sie ziehen die ge­wünsch­ten Fotos per Drag-and-Drop in den aus­ge­wie­se­nen Bereich und laden die Er­geb­nis­se im Anschluss im JPEG- bzw. PNG-Format oder als ZIP-Datei herunter. Al­ter­na­tiv ist der Upload in den Cloud­spei­cher-Dienst Dropbox möglich.

Vorteile Nachteile
Resultate lassen sich in Dropbox hochladen Be­gren­zung auf 20 gleich­zei­ti­ge Kom­pri­mie­run­gen und 5 Megabyte Da­tei­grö­ße (in der Stan­dard­edi­ti­on)
Kom­pri­mie­rungs­grad nicht ver­stell­bar

iLoveIMG

Bei iLoveIMG handelt es sich um eine ganze On­line­suite aus nütz­li­chen Bild­be­ar­bei­tungs­tools. Das in Barcelona be­hei­ma­te­te Ent­wick­ler­team stellt u. a. An­wen­dun­gen zur Verfügung, mit denen sich Bilder zu­schnei­den, skalieren, umwandeln und eben auch kom­pri­mie­ren lassen. Für Letzteres wählen Sie die Schalt­flä­che „Bild kom­pri­mie­ren“ aus und fügen an­schlie­ßend das ge­wünsch­te Bild­ma­te­ri­al per Drag-and-Drop oder über den Da­tei­brow­ser ein. Mögliche Formate sind JPEG, PNG, SVG und GIF.

Bild: Screenshot der Komprimierung bei iLoveIMG
Nach der Kom­pri­mie­rung können Sie die Bilder durch einen Klick her­un­ter­la­den.

Während iLoveIMG lediglich einen einzigen, vor­ge­ge­be­nen Kom­pri­mie­rungs­mo­dus hat, liefert das Tool gleich mehrere ver­schie­de­ne Ex­port­mög­lich­kei­ten: So ist nicht nur der Download der Resultate auf die lokale Fest­plat­te möglich, sondern auch der Upload in Google Drive und Dropbox sowie die Wei­ter­ga­be eines Download-Links zu den kom­pri­mier­ten Bildern. Sind Sie mit dem Kom­pri­mie­rungs­er­geb­nis nicht zufrieden, können Sie dieses über einen Klick auf das Pa­pier­korb-Symbol auch einfach wieder löschen.

Vorteile Nachteile
Upload der Resultate in Google Drive und Dropbox möglich nur ein Kom­pri­mie­rungs­mo­dus
weitere Tools zum Zu­recht­schnei­den, Skalieren und Umwandeln verfügbar keine Vor­schau­funk­ti­on

Option 2: Bilder kom­pri­mie­ren mit Photoshop

Natürlich können Sie Ihre Bilder auch mit pro­fes­sio­nel­len Bild­be­ar­bei­tungs­pro­gram­men kom­pri­mie­ren. Allen voran ist hier Photoshop als Bran­chen­pri­mus zu nennen. Das Adobe-Tool bietet zu­sätz­lich zu seinen Funk­tio­nen zum kreativen Gestalten und Op­ti­mie­ren von Fo­to­ma­te­ri­al diverse Mög­lich­kei­ten, um das Bild­for­mat zu ändern und die Bildgröße an­zu­pas­sen. Für Website-Be­trei­ben­de besonders praktisch ist dabei die Option „Für Web speichern“, die Adobe speziell zwecks op­ti­mier­ter Fotos und Bilder für Homepages und Co. im­ple­men­tiert hat. In diesem Modus stehen für die Kom­pri­mie­rung nicht nur die wichtigen Web­for­ma­te GIF, PNG, WebP und JPEG, sondern auch das auf mobile Geräte aus­ge­rich­te­te Ras­ter­gra­fik­for­mat WBMP (Wireless Bitmap) zur Verfügung.

OgzjhjAfcLc.jpg Zur Anzeige dieses Videos sind Cookies von Dritt­an­bie­tern er­for­der­lich. Ihre Cookie-Ein­stel­lun­gen können Sie hier aufrufen und ändern.

Sobald Sie ein Bild im Photoshop-Web­op­ti­mie­rungs­mo­dus be­ar­bei­ten, öffnet sich ein neues Fenster, in dem Sie nicht nur die genannten Ziel­for­ma­te ein­stel­len können, sondern das ge­wünsch­te Foto auch hin­sicht­lich Farbtiefe und Grö­ßen­ma­ßen für Ihre Website op­ti­mie­ren können. Im Vor­schau­fens­ter stellt das Adobe-Tool Original und Zielbild gegenüber (inklusive absoluter Angaben zur Da­tei­grö­ße), sodass Sie pro­blem­los sehen, wie stark sich die einzelnen Kom­pri­mie­rungs­schrit­te auf die Qualität auswirken.

Vorteile Nachteile
Live-Vorschau für Kom­pri­mie­rungs­re­sul­ta­te sehr re­chen­in­ten­siv
diverse Bild­be­ar­bei­tungs­fea­tures verfügbar hohe Kosten

Option 3: Bilder mit Freeware- und Open-Source-Pro­gram­men kom­pri­mie­ren

Photoshop zeigt, wie bequem das Foto kom­pri­mie­ren mit Desktop-An­wen­dun­gen ist. Diese bieten stan­dard­mä­ßig nämlich nicht nur we­sent­lich mehr Funk­tio­nen, sondern haben gegenüber Webtools auch den Vorteil, dass sie ohne be­stehen­de In­ter­net­ver­bin­dung genutzt werden können. Wenn Sie die Bilder Ihrer Web­prä­senz ver­klei­nern, muss es jedoch nicht zwangs­läu­fig eine Premium-Lösung wie Adobes Ste­cken­pferd oder eine andere kos­ten­pflich­ti­ge Al­ter­na­ti­ve sein. Sind Sie an ein enges Budget gebunden bzw. nicht an kom­ple­xe­ren Be­ar­bei­tungs­fea­tures in­ter­es­siert, erreichen Sie bereits mit einem Freeware- oder Open-Source-Programm erst­klas­si­ge Op­ti­mie­rungs­er­geb­nis­se in Sachen Fotos, Bilder und Co. Doch welche der zahl­rei­chen, zur Verfügung stehenden kos­ten­frei­en Tools sind wirklich emp­feh­lens­wert?

IrfanView

Seit 1996 zählt das Bild­be­trach­tungs­pro­gramm IrfanView zu den be­lieb­tes­ten Freeware-Lösungen für Windows-PCs – laut Her­stel­ler­an­ga­ben liegen die mo­nat­li­chen Down­load­zah­len bei durch­schnitt­lich einer Million. Das liegt wohl vor allem an dem at­trak­ti­ven Li­zenz­mo­dell des Tools: Während die private Nutzung gänzlich kos­ten­frei ist, müssen Sie für die kom­mer­zi­el­le Nutzung eine Lizenz für einen geringen zwei­stel­li­gen Betrag (einmalig zu leisten) erwerben.

Bild: Screenshot von IrfanView
Wenn Sie Ihr Bild in der Standard-IrfanView-Version ohne Plugin als JPEG sichern, können Sie die Qualität einfach mit einem Schie­be­reg­ler anpassen.

Stan­dard­mä­ßig un­ter­stützt der Bild­be­trach­ter zahl­rei­che Bild­for­ma­te wie PNG, JPEG, GIF, BMP, WebP u. v. m. Ist ein Bild eingefügt, kann es jederzeit in diese Formate kon­ver­tiert werden. Geht es darum, Bilder gezielt für das Web zu kom­pri­mie­ren, ist jedoch die per Plugin hin­zu­füg­ba­re Funktion „Speichern fürs Web“ zu empfehlen. Dank dieser Er­wei­te­rung op­ti­mie­ren Sie sta­pel­wei­se Bilder und Fotos, wobei Sie per Regler ein­stel­len, wie sehr die Ori­gi­nal­bild­qua­li­tät erhalten bleiben soll. Ein Vor­schau­bild sowie die kom­pri­mier­te Da­tei­grö­ße geben Ihnen dabei Einblick in das zu er­war­ten­de End­ergeb­nis.

Vorteile Nachteile
Sta­pel­ver­ar­bei­tung möglich Kom­pri­mie­rungs-Plugin bietet nur eng­lisch­spra­chi­ges Interface
Vor­schau­funk­ti­on und an­pass­ba­rer Kom­pri­mie­rungs­grad

GIMP

Auf der Suche nach Photoshop-Al­ter­na­ti­ven aus dem Open-Source-Sektor stößt man un­wei­ger­lich auf GIMP (GNU Image Mani­pu­la­ti­on Program). Das 1998 er­schie­ne­ne Gra­fik­pro­gramm für Linux, macOS und Windows überzeugt seit Jahren durch seine Funk­ti­ons­viel­falt, die stark an das kom­mer­zi­el­le Vorbild aus dem Hause Adobe erinnert. Mitt­ler­wei­le un­ter­stützt es mehr als dreißig Da­tei­for­ma­te – darunter auch die fürs Web ent­schei­den­den Formate GIF, WebP, JPEG und PNG. Sie können Ihre Bild­da­tei­en mit der GIMP-Software also jederzeit in eines dieser Web­for­ma­te umwandeln.

Bild: Screenshot von GIMP
Bild als WebP ex­por­tie­ren mit GIMP

Mit GIMP kon­ver­tie­ren Sie jedoch nicht nur Bilder in ein kleineres Da­tei­for­mat, sondern haben auch er­wei­ter­te Ex­port­op­tio­nen zur Hand, mit deren Hilfe Sie ein Bild lediglich kom­pri­mie­ren. Per Schie­be­reg­ler stellen Sie dabei ein, wie stark der Kom­pri­mie­rungs­grad sein soll. Praktisch sind außerdem die er­wei­ter­ten Optionen: Ak­ti­vie­ren Sie bei­spiels­wei­se die Ei­gen­schaft „Pro­gres­siv“, ist das Resultat zwar ge­ring­fü­gig größer – die einzelnen Bereiche werden al­ler­dings in einer be­stimm­ten Rei­hen­fol­ge geladen, sodass bereits nach geringer Ladezeit eine grobe Ansicht des Ge­samt­bilds dar­ge­stellt werden kann.

Vorteile Nachteile
Open Source Vorschau zeigt lediglich die Da­tei­grö­ße des Resultats
Kom­pri­mie­rungs­grad anpassbar

PNG­Ga­unt­let

Das Freeware-Programm PNG­Ga­unt­let liefert eine grafische Be­nut­zer­ober­flä­che (eng­lisch­spra­chig) für die drei Open-Source-Tools PNGOUT, OptiPNG und DeflOpt, die allesamt für die Op­ti­mie­rung und Kom­pri­mie­rung von Bild­ma­te­ri­al im PNG-Format ent­wi­ckelt wurden. Die Anwendung, die aus­schließ­lich für Windows verfügbar ist, ist aus diesem Grund die perfekte Lösung zur Kreation besonders kleiner Logos, Grafiken und Schrift­zü­ge im PNG-Format für Ihr Web­pro­jekt. Als Aus­gangs­for­ma­te für den Kom­pri­mie­rungs- bzw. Kon­ver­tie­rungs­pro­zess sind – neben PNG selbst – auch JPEG, GIF, TIFF und BMP möglich.

Bild: Screenshot der Benutzeroberfläche von PNGGauntlet
Setzen Sie ein Häkchen bei „Overwrite Original Files“, ersetzt PNG­Ga­unt­let das Ori­gi­nal­bild au­to­ma­tisch durch die neu erzeugte Datei.

Sie haben zwei Mög­lich­kei­ten, um Ihre Fotos mit PNG­Ga­unt­let zu kom­pri­mie­ren: Sie greifen auf das Standard-Set-up zurück, indem Sie ein Bild bzw. mehrere Bilder einfügen und im Anschluss direkt auf „Optimize!“ drücken, oder Sie wählen zunächst ein in­di­vi­du­el­les Set-up, indem Sie die Ein­stel­lun­gen der drei im­ple­men­tier­ten Tools über die gleich­na­mi­ge Schalt­flä­che anpassen. Un­ab­hän­gig vom gewählten Weg zeigt Ihnen das Freeware-Tool nach er­folg­rei­cher Kom­pri­mie­rung die neue Größe der Bilddatei(en) und die gegenüber dem Original ein­ge­spar­te Da­tei­grö­ße in Prozent an.

Vorteile Nachteile
un­kom­pli­zier­te Sta­pel­ver­ar­bei­tung kein Vor­schau­mo­dus
In­di­vi­dua­li­sie­rung des Kom­pri­mie­rungs­grads möglich Be­schrän­kung auf PNG als Aus­ga­be­for­mat
Letzte Version von 2012

Image­Op­tim

Wenn Sie die Bilder und Fotos Ihres Web­pro­jekts kom­pri­mie­ren möchten und ein Open-Source-Tool für macOS benötigen, ist das von Kornel Lesinski ent­wi­ckel­te Image­Op­tim zu empfehlen. Das GPL-li­zen­zier­te Programm kom­bi­niert eine Handvoll Bild­op­ti­mie­rungs­tools, z. B. MozJPEG, pngquant und SVGO, und er­mög­licht auf diese Weise nicht nur das Entfernen un­wich­ti­ger EXIF-Metadaten, sondern auch die generelle Kom­pri­mie­rung von Bild- und Fo­to­ma­te­ri­al ver­schie­dens­ter Art (JPEG, SVG, GIF, PNG).

Bild: Screenshot von ImageOptim
Nachdem Sie Ihre Datei in das Tool gezogen haben, wird die Kom­pri­mie­rung durch­ge­führt. Das grüne Häkchen zeigt de Erfolg an.

Per Drag-and-Drop lassen sich die ge­wünsch­ten Bild­da­tei­en in Image­Op­tim einfügen, woraufhin das Programm sofort mit der Kom­pri­mie­rung startet. Sie können aber jederzeit Än­de­run­gen an den Ein­stel­lun­gen vornehmen und die Stärke der Kom­pri­mie­rung anpassen oder Optionen hinzu- bzw. abwählen. Klicken Sie hierzu einfach auf die drei Punkte. An­schlie­ßend genügt ein Klick auf „Wie­der­ho­len“, um die Um­wand­lung erneut durch­zu­füh­ren.

Vorteile Nachteile
diverse Kom­pri­mie­rungs­funk­tio­nen kein Vor­schau­mo­dus
Open Source
Website-Checker
Zum Hauptmenü