Das passende Dateiformat

JPEG vs PNG: Welches Format wann passend ist

Share on Facebook0Tweet about this on Twitter15Share on Google+0Share on LinkedIn1Email this to someone

Bilder sind in Blogs und auf Webseiten das A und O. Ihr könnt eure Bilder zwar in unzähligen verschiedenen Formaten abspeichern, aber wenn das Dateiformat zu groß ist, kann sich die Performance eurer Webseite dadurch verschlechtern. Wir haben euch bereits berichtet, wie wichtig die Ladezeit eurer Seite für die Besucherzahl ist. Heute haben wir die beiden gängigsten Dateiformate unter die Lupe genommen und zeigen euch hier, wann die Benutzung welches Formats sinnvoll ist.

JPEG vs PNG

Illustration © panthermedia.net/ keltt; Fotografie ©panthermedia.net/ Damato

Wann verwendet man was?

Die Faustregel lautet: PNG sind besser für Logos, Grafiken, Diagramme, Illustrationen und Screenshots, Zeichnungen und Webcomics – kurz gesagt: Für alles mit Text und wenigen Farben.

JPGs werden für Fotografien und fotorealistische Bilder benutzt. Kurz gesagt: Fotos mit vielen Farben.

PNG – Portable Networks Graphics

.png auf einen Blick:

  • für große Darstellungen nicht geeignet
  • wird mittlerweile von fast allen Webbrowsern unterstützt
  • verlustfreie Komprimierung
  • kleine Dateigrößen möglich
  • transparenter Hintergrund möglich
  • für Text und Logos besser geeignet

Für eine anständige Darstellung von Fotografien auf eurer Website solltet ihr in keinem Fall auf die Idee kommen, Fotos als PNG zu speichern. Die Dateien werden dadurch riesen groß und das wirkt sich negativ auf die Ladezeit eurer Seite aus.

JPG – JPEG File Interchange Format

.jpg auf einen Blick:

  • Komprimierung ist nicht verlustfrei
  • kleine Dateigrößen möglich
  • für Bilder mit mehr als 256 Farben
  • Darstellung bis zu 16,8 Millionen Farben möglich
  • kein transparenter Hintergrund möglich
  • für Darstellungen mit scharfen Kanten ungeeignet

Für Logos ist das JPG Format ungeeignet. Wenn ihr ein Logo als .jpg speichert bekommen diese durch die Komprimierung einen ungewollten „Halo“-Effekt um die Kanten. Das sieht nicht unbedingt gut aus und eure Besucher können sehen, dass bei euch was schief gelaufen ist.

Fazit

Beide Bildformate zählen zu den Rastergrafiken und bestehen aus einer Vielzahl von kleinen Pixeln, die in der Vergrößerung zu sehen und auch veränderbar sind. Neben den oben aufgezählten Vorteilen, lassen sich beim Bildformat JPEG zusätzlich Metadaten über die Grafik speichern, also Informationen über Zeitpunkt, Inhalt und über den Ort des Bildes. Verschiedene Grafikprogramme bieten die Auslesung und Bearbeitung dieser Metadaten seit längerem an. Die verlustlose Kompression von Bildern im PNG Format ist ganz klar ein sehr großes Plus, dennoch solltet ihr dabei immer die Dateigröße im Blick behalten, da diese beim PNG sehr groß ausfallen kann.


Josefine

Josefine

Ob Themes, Plug-Ins oder News aus der Community – Es gibt immer etwas Neues zu entdecken! Und da zum Bloggen mehr als Content gehört, liegen mir besonders die kleinen Kniffe und Tricks, die die Nutzerfreundlichkeit von WordPress ausmachen, am Herzen.
Josefine

Letzte Artikel von Josefine (Alle anzeigen)

Share on Facebook0Tweet about this on Twitter15Share on Google+0Share on LinkedIn1Email this to someone
Kommentare zu "JPEG vs PNG: Welches Format wann passend ist"
  1. Viktoria Hammon schrieb am 13. August 2014, um 10:46 Uhr:

    So gut wurde mir dieser Unterschied bisher noch nicht erklärt. Danke!

  2. Simon schrieb am 13. August 2014, um 20:24 Uhr:

    Bei PNG gibt es in Photoshop zwei Möglichkeiten PNG 8 und PNG 24.

    PNG 8 = 8 Bit Farbtiefe = 256 Farben
    PNG 24 = 24 Bit Farbtife = 16 Mio. Farben

    Ich habe festgestellt das die Datenmenge bei PNG 24 in der Regel grösser als jpeg wird, jedoch verlustfrei und wenn notwendig mit transparentem Hintergrund. Macht bei freigestellten Bildern mit vielen Farben (Fotos) evtl. doch Sinn.

  3. Finkregh schrieb am 14. August 2014, um 09:36 Uhr:

    das Farben-Argument nicht gerade sinnig, weil PNGs 24/32 bit Farben unterstützen…

  4. Marie schrieb am 14. August 2014, um 21:01 Uhr:

    das ist mal eine tolle übersichtliche Zusammenstellung der einzelnen Anwendungsgebiete. Herzlichen Dank

  5. […] lest ihr, wann ihr für den Upload Bilder im PNG oder JPEG-Format […]

  6. Vanessa schrieb am 21. August 2015, um 11:23 Uhr:

    Super Vergleich mit allen wichtigen Infos auf einen Blick. Ich habe mich auch gerade mit den unterschiedlichen Dateiformaten beschäftigt und einen Beitrag dazu geschrieben. Wer sich für weitere Dateiformate interessiert kann gerne vorbeischauen: http://www.designenlassen.de/blog/2015/08/20/10-wichtige-dateiformate-die-checkliste-fuer-ihr-grafikdesign/

  7. […] stets auf das korrekte Dateiformat für Bilder. Hier sind riesige Einsparpotenziale […]

  8. 11 Tipps um die Wordpress Geschwindigkeit zu optimieren schrieb am 22. November 2015, um 17:00 Uhr:

    […] Die drei am weitesten verbreiteten Dateiformate sind JPG, PNG und GIF. Das PNG Dateiformat eignet sich für Screenshots oder Grafiken mit wenig Farben und viel Text. Auch ein transparenter Hintergrund ist bei diesem Format möglich. Die Komprimierung ist zwar nicht so stark möglich, dafür aber verlustfrei. Das JPG Format ist besser für normale Fotos. Die Dateien lassen sich enorm komprimieren. Allerdings musst Du hierbei immer die Qualität im Auge behalten. Mehr zu den beiden Formaten findest Du HIER. […]

  9. Werner schrieb am 22. Dezember 2015, um 22:13 Uhr:

    Ich habe viele englische Infografiken in .png und.jpg gekauft. Mit welchem (Freeware)Grafikprogramm kann ich diese editieren, bzw. übersetzen? Habe noch keine vernünftige Lösung gefunden bisher. Hat jemand den ultimativen Tipp?

  10. Andy schrieb am 12. Januar 2016, um 15:06 Uhr:

    mit Gimp oder wenn Du nicht soviel Ahnung hast mit Paint.Net

  11. Angela schrieb am 4. Juli 2016, um 12:00 Uhr:

    Gegen zu großes Volumen bei png-Bilder hilft auch der kostenlose, verlustfreie Komprimierungsdienst

    https://tinypng.com/

    (auch für jpg)

  12. Ausschneiden mit dem BBP 37 – Unser Web Blog schrieb am 7. Juli 2016, um 14:26 Uhr:

    […] Zunächst wird das Schild mit gelber Farbe grundiert, es soll ja schließlich auch von weitem ins Auge stechen. Mit Photoshop wird das Logo freigestellt,  so dass die einzelnen Elemente des Logos, in diesem Fall der Kreis (Weltkugel) und die Schrift „Weltbühne“, einzeln in die Workstation zu importieren sind. Gespeichert werden die grafischen Elemente als png Datei. […]

Schreibe einen Kommentar

Pressengers lebt von der Wordpress Community, beteilige dich mit einem Kommentar!
Deine E-Mail Adresse wird nicht veröffentlicht.

Achtung: Mit dem Absenden eines Kommentars erklärst du dich damit einverstanden, dass alle eingegebenen Daten und deine IP-Adresse zum Zweck der Spamvermeidung durch das Programm Akismet in den USA überprüft und gespeichert werden. Weitere Informationen zu Akismet und Möglichkeiten des Widerrufs..