Ein Leitfaden für Anfänger zu JPEG vs. PNG (und wie man beide verwendet)

Was wäre das Web mit Bildern? Innerhalb weniger Jahrzehnte hat sich das Internet von einem digitalen Nadeldrucker zu einem dynamischen Multimedia-Server mit Bildern, Videos, Animationen und mehr entwickelt. Wenn es jedoch um digitale Standbilder geht, kann es zu Verwirrung über JPEG und PNG kommen, insbesondere wenn man beide verwendet.

Wenn Sie ein JPEG-Bild neben demselben, aber als PNG betrachten, würden Sie wahrscheinlich keinen Unterschied feststellen. Dies ist ideal, da beide Bildformate darauf abzielen, das bestmögliche Bild für das Web zu reproduzieren. Es gibt jedoch verschiedene Anwendungsfälle und Optimierungstechniken, die Sie beachten müssen.

In diesem Artikel werden wir JPEG mit PNG vergleichen und Ihnen sagen, wann Sie welches Bildformat verwenden sollten. Lassen Sie uns Ihnen jedoch zunächst jeden Dateityp vorstellen.

Der Unterschied zwischen JPEG und PNG

An der Oberfläche (im wahrsten Sinne des Wortes) gibt es keinen Unterschied zwischen JPEG und PNG. Mit anderen Worten, wenn wir zwei Bilder hochladen und Sie bitten würden, zu wählen, welches JPEG und welches PNG ist, können Sie die meiste Zeit nicht sagen. Nehmen Sie zum Beispiel das folgende Bild:

Können Sie entscheiden, ob dieser scharlachrote Mormonenschmetterling ein JPEG- oder PNG-Bild ist? Ohne Bezugsrahmen ist natürlich kein Vergleich möglich:

Es gibt definitive Unterschiede, obwohl es in diesem Fall keinen großen Unterschied machen wird. Während Sie versuchen, sich zu entscheiden (ohne einen Blick auf die Entwicklertools Ihres Browsers zu werfen), können wir Ihnen einige technische Details mitteilen:

• Das JPEG-Dateiformat (Joint Photographic Experts Group) bietet eine verlustbehaftete Komprimierung digitaler Bilder. Das bedeutet, dass sich die Bildqualität bemerkbar macht, wenn das Gleichgewicht zwischen dieser und der Dateigröße zu weit schwingt. JPEGs sind „flache“ Dateien. Mit anderen Worten, sie können innerhalb einer Datei keine Transparenz anzeigen. Während Sie die Komprimierungsstufe anpassen können, ist eine JPEG-Datei selbst bei den besten Einstellungen eine 8-Bit-Datei, was sich auf den Dynamikbereich auswirkt. Darüber hinaus enthält ein JPEG häufig ein Farbprofil, das Monitoren mitteilt, wie die darin enthaltenen Farben angezeigt werden sollen.
• Im Gegensatz dazu sind PNG-Bilder (Portable Network Graphics) webfähige Dateien. Es ist ein dynamischeres Format als JPEG und kann 24-Bit-Dateien ausgeben. Es ist auch ein „verlustfreies“ Format, was bedeutet, dass Sie es duplizieren können, ohne die Bildqualität zu beeinträchtigen. Sie können die Komprimierung für PNG-Dateien jedoch nicht anpassen, und es gibt kein Farbprofil. Trotzdem ist ein PNG aufgrund seiner technischen Spezifikationen perfekt für das Web geeignet.

Es scheint klar zu sein – PNGs passen zum Web, JPEGs nicht. Nun, das ist nicht die ganze Geschichte. Jeder Dateityp eignet sich hervorragend für bestimmte Anwendungen. Als nächstes werden wir sie besprechen.

JPEG vs. PNG: Wann Sie beide verwenden sollten

Das Web holt das Beste aus JPEGs und PNGs heraus. Tatsächlich verzahnen sie sich auf schöne Weise ohne viel Überkreuzung. Als praktischen Soundbite, hier ist, wann Sie JPEG vs. PNG verwenden sollten:

Wenn Sie ein Foto anzeigen möchten, verwenden Sie JPEG. Verwenden Sie für alle anderen Dateien – insbesondere digitale Grafiken – PNG.

Dieser Rat gilt jedoch nicht für jede Situation (obwohl er für fast jeden Fall relevant ist). Wenn Sie beispielsweise digitale Zeichnungen mit Stock-Bildern kombinieren, sind sowohl JPEG als auch PNG technisch gesehen falsch zu verwenden. Später werden Sie mehr Wissen haben, um eine richtige Entscheidung zu treffen, obwohl es einige andere Hinweise gibt, die Sie geben können.

Wenn Sie beispielsweise Bilder kopieren möchten, verwenden Sie ein anderes Dateiformat als JPEG. Dies liegt daran, dass verlustbehaftete Komprimierungsformate nur eine ungefähre Version der Datei rekonstruieren. Im Gegensatz dazu ist PNG eine 1:1-Wiedergabe, da es eine verlustfreie Komprimierung bietet.

Wenn Sie die Größe Ihres Bildes nach dem Speichern ändern möchten, verwenden Sie JPEG, da dies die Skalierung gut handhabt. PNGs verwenden eine andere Codierungsstruktur, die sich verschlechtert, sobald Sie die Abmessungen (oder andere technische Attribute) ändern.

Andere Bildformate, die Sie kennen sollten

Natürlich ist JPEG vs. PNG nicht der einzige Vergleich von Bilddateiformaten, den es zu berücksichtigen gilt. Es gibt viele andere Dateitypen, die um Aufmerksamkeit konkurrieren und andere Anwendungsfälle haben:

• Grafisches Schnittstellenformat (GIF). Wenn Sie ein animiertes Meme oder Reaktionsvideo auf Twitter posten, handelt es sich um ein GIF. Tatsächlich wollte PNG GIF-Dateien in seiner ursprünglichen Spezifikation ersetzen, und beide bieten Transparenzebenen.
• Tagged Image File Format (TIFF). Dieses rasterbasierte Dateiformat eignet sich aufgrund seiner Unterstützung für CMYK-Farbräume hervorragend zum Drucken.
• RAW-Bildformat (RAW). Sie werden dies nur verwenden, wenn Sie Fotograf sind, und es gilt ausschließlich für die von Ihnen verwendete Kamera. Während Sie RAW-Dateien auf Ihrem Computer anzeigen können, benötigen Sie eine spezielle Software, um sie anzuzeigen. Die Dateigrößen sind astronomisch, denn die Daten sind vollständig. Tatsächlich sind RAW-Formate keine Bilder, sondern Daten, die, wenn sie kodiert sind, das Bild darstellen.
• Hocheffiziente Bilddatei (HEIF). Dies ist das primäre Dateiformat von iOS-Geräten. Es bietet eine bessere Komprimierung und Dateigröße als JPEG und kann viele verschiedene Multimedia-Formate verarbeiten.

Während jede dieser Bilddateien im Internet verwendet wird (mit Ausnahme von RAW-Dateien in Bezug auf die Anzeige), dominiert immer noch JPEG gegenüber PNG. Beide haben spezifische Anwendungsfälle, bei denen die Vor- und Nachteile gut ausbalanciert sind.

So bereiten Sie Ihre Bilder für den Upload vor (auf 3 Arten)

Obwohl JPEG und PNG in Bezug auf die endgültige Anzeigequalität unentschieden ausfallen, müssen Sie jedes Format anders handhaben, um das Beste daraus zu machen. Es gibt drei Bereiche, in denen Sie die Dateigröße, Qualität und allgemeine Vorbereitung Ihrer Bilder beeinflussen können:

• Stellen Sie sicher, dass die Dimensionen die relevanten Anwendungsfälle berücksichtigen, auf die Sie stoßen werden.
• Wählen Sie eine Auflösung für Ihr Bild, die für das Web geeignet ist.
• Verwenden Sie eine „geschmackvolle“ Komprimierung, um die Dateigröße Ihrer Bilder weiter zu reduzieren, ohne die Qualität zu stark zu beeinträchtigen.

Wie zu erwarten, gibt es hier eine feine Balance. Beginnen wir mit den Abmessungen Ihres Bildes.

1. Legen Sie Ihre Abmessungen fest

Die Abmessungen eines Bildes sind für den Endbenutzer wichtiger als jeder andere Punkt in der Kette. Dies liegt daran, dass der Browser das Bild laden muss und eine große Datei die Benutzererfahrung (UX) untergräbt. Dies ist jedoch nicht die einzige Überlegung. Natürlich ist auch die Qualität entscheidend. Wenn Sie sich entscheiden, ein Bild winzig klein zu machen, wirkt sich dies auf die endgültige Bildqualität aus (mehr bei JPEGs als bei PNGs).

Die Antwort ist, den optimalen Punkt in einigen Bereichen zu treffen, beginnend mit Ihren Bildabmessungen. In der Regel sollten Sie Ihre Bilder groß genug machen, damit sie die gewünschten Details vermitteln können. Irgendwo gibt es einen Punkt des Overkills, der je nach Zielplattform und Image selbst unterschiedlich ist.

Moderne Crop-Sensor- und Vollformat-Digitalkameras können Bilder mit Standardabmessungen von etwa 6.000 x 3.000 Pixel erzeugen (obwohl es zwischen den Kameras große Unterschiede gibt). Im Gegensatz dazu sind Bilder mit der „langen Kante“ bei etwa 2.000 Pixeln in sozialen Medien üblich. Beachten Sie, dass dies für die Anzeige im gesamten Anzeigebereich eines Geräts vorgesehen ist.

Bei Blog-Bildern könnte diese 2.000-Pixel-Faustregel sogar nur 1.000 Pixel betragen. Dabei werden auch High-Definition- oder „Retina“-Bilder berücksichtigt. Sie benötigen oft die doppelte Größe, um auf hochauflösenden Bildschirmen scharf angezeigt zu werden. Tatsächlich ist die Entschließung ein guter Ausgangspunkt für den nächsten Schritt.

2. Stellen Sie die richtige Auflösung ein

Eines der Grundelemente digitaler Bildschirme sind Pixel. Diese winzigen Punkte machen das gesamte Display aus, obwohl die Pixel keine einheitliche Größe haben. Aus diesem Grund müssen wir bei der Vorbereitung unserer JPEG- und PNG-Bilder auch die Auflösung berücksichtigen.

Wir verwenden Pixel pro Zoll (PPI), um zu diskutieren, wie viele Pixel auf einen Bildschirm passen. Sie können dies auch in Zentimetern oder als "Punkte" ausdrücken. Letzteres ist für physische Druckformate und Grafikdesignkreise verwenden häufig DPI. Daher werden Sie hören, dass es austauschbar verwendet wird, obwohl PPI der richtige Begriff ist.

Während die PNG-Bildspezifikation 72 PPI als optimale Designauflösung verwendet, würde dies moderne hochauflösende Bildschirme nicht berücksichtigen. Während Sie die Abmessungen eines Bildes verdoppeln könnten, um es auf allen Bildschirmen scharf darzustellen, können Sie dasselbe auch mit der Auflösung tun. Nehmen Sie zum Beispiel diesen Screenshot des macOS Big Sur-Desktops:

Es ist ein PNG mit 1.000 Pixeln an der langen Kante (in diesem Fall oben und unten). Es verwendet jedoch 144 PPI – obwohl es einige Upload-„Magie“ gibt, die die Auflösung beim Hochladen in WordPress in 72 PPI umwandelt.

Sowohl PNG- als auch JPEG-Bilder können auch viel höhere PPI verwenden – druckfertige Auflösungen liegen bei etwa 300 DPI/PPI. Darüber hinaus werden viele Bilder von Stock-Foto-Sites wie Pixabay mit 300 PPI heruntergeladen:

Wenn Sie dies reduzieren, werden Ihre Bilder daher besser für das Web und seine verschiedenen Anzeigen vorbereitet.

3. Optimieren Sie Ihre Bilder mithilfe von Komprimierung

Über die Bildoptimierung müssen wir Ihnen nicht viel erzählen. Es ist ein Thema, das Sie an anderer Stelle im Blog finden können, und fast alle WordPress-Benutzer wissen, wie man Bilder entweder vor oder während des Upload-Vorgangs optimiert.

Das allgemeine Konzept ist, dass Sie Bilder zusätzlich komprimieren, oft auf verlustbehaftete Weise. Dies wirkt sich auf die Bildqualität aus und macht sich bemerkbar, wenn Sie umfassende Änderungen an den Abmessungen und der Auflösung vornehmen, bevor Sie eine starke verlustbehaftete Komprimierung anwenden.

Diese Artefakte müssen minimal sein, um Bilder gut darzustellen. Aus diesem Grund stehen viele Tools zur Verfügung, um die Arbeit zu erledigen. Am zugänglichsten ist TinyPNG, obwohl es auch JPEGs komprimiert:

Die angewendete Komprimierung ist jedoch für einige Bilder schonend, wodurch die Dateigröße möglicherweise nicht ausreichend verringert wird. Ein Dienst wie ShortPixel verfügt über ein aggressives verlustbehaftetes Komprimierungsformat, während seine Glossy-Komprimierung im Vergleich zu TinyPNG eine bewundernswerte Arbeit leistet.

Das Wichtigste dabei ist, dass Sie den Komprimierungsgrad sowohl mit der Dateigröße als auch mit allen anderen Elementen des Bildes in Einklang bringen müssen. Im nächsten Abschnitt besprechen wir den besten Ansatz.

JPEG vs. PNG: So machen Sie das Beste aus jedem Format

Trotz der Unterschiede in den Dateiformaten bedeutet die Art des Surfens im Internet, dass Sie die Vorbereitung Ihrer Bilder auf Folgendes reduzieren können:

• Verwenden Sie Abmessungen zwischen 1.000 und 2.048 Pixeln an der langen Kante.
• Stellen Sie für alle Ihre Bilder eine Auflösung von 144 PPI ein, um sicherzustellen, dass sie auf allen Bildschirmen scharf und klar angezeigt werden.
• Wenden Sie eine subtile Komprimierung durch Bildoptimierung an, um die Dateigröße zu verringern. Wenn man alles berücksichtigt, werden die meisten Bilder etwa 100–200 KB groß sein.

Hier gibt es ein bisschen mehr, basierend auf bestimmten Dateiformaten:

• Bei PNG-Dateien könnte die Reduzierung der Abmessungen die Bildqualität zu stark beeinträchtigen. Die Idee hier ist, die Auflösung so hoch wie möglich zu halten, um diese Faktoren zu mildern.
• JPEG-Dateien halten dem Kopieren nicht stand, da jede Duplizierung schlechter ist als die letzte. Wenn Sie steuern können, woher das JPEG stammt (z. B. wenn Sie das Foto aufgenommen haben), erstellen Sie ein JPEG aus einer TIFF- oder RAW-Datei, um die Qualität des Bildes beizubehalten.
• Unserer Erfahrung nach lassen sich JPEGs nicht so gut komprimieren wie andere Dateiformate. Das bedeutet, dass es wichtig ist, diese Bilder vorzubereiten und zu optimieren, bevor Sie die Komprimierungsphase erhalten.

Inzwischen sollten Sie ein solides Verständnis von JPEG und PNG haben, wann Sie sie verwenden und wie Sie Ihre Dateien vorbereiten. und wenn Sie immer noch wissen möchten, welches Bild vom Anfang des Artikels JPEG war, ist es das erste!

Einpacken

Es scheint, als würden Bilder das Netz regieren. Aus diesem Grund verfügen wir über eine Reihe von Dateiformaten, die uns helfen, die richtige Qualität bei einer respektablen Dateigröße für die Anwendung zu liefern. JPEG vs PNG ist ein gängiger Vergleich, da nicht klar ist, was beide gut können, und es sich um zwei beliebte Bildformate handelt.

Kurz gesagt, JPEGs sind für Fotos und PNGs für Grafiken. Bei der Vorbereitung Ihrer Dateien sollte das Hauptaugenmerk darauf liegen, die Bildqualität hoch zu halten und nicht die Dateigröße. Während Anpassungen an der Auflösung die größten Änderungen bewirken, wirkt sich dies jedoch stärker auf die Bildqualität aus. Der Trick besteht darin, Abmessungen, Auflösung und Komprimierung auszugleichen, um das ultimative webfähige Bild zu erhalten.

Bereiten Sie Ihre Bilder für das Web vor, wie wir es hier beschrieben haben, oder machen Sie etwas anderes? Lassen Sie es uns im Kommentarbereich unten wissen!

Bildnachweis: minka2507, christels .