PNG oder JPG oder GIF: Wählen Sie den richtigen Bilddateityp für Ihre Site

Heute sind die beiden gängigsten Bilddateiformate JPG und PNG. Auf den ersten Blick kann ein JPG genau wie das gleiche Bild aussehen, das als PNG-Datei gespeichert wurde. Die Möglichkeit, beim Speichern einer Datei entweder JPG für PNG auszuwählen, lässt den Eindruck entstehen, dass die beiden austauschbar sind, abgesehen von den in der Erweiterung verwendeten Buchstaben.

Laut W3Techs werden sowohl JPG als auch PNG häufiger als andere Dateiformate verwendet, wobei PNG nur geringfügig häufiger verwendet wird.

Es gibt jedoch deutliche Unterschiede zwischen JPG- und PNG-Dateien, und Sie müssen wissen, welche Sie auswählen müssen, wenn Sie Bilder online verwenden. Der Dateityp kann beeinflussen, wo er auf Ihrer Webseite platziert wird, in welcher Qualität er angezeigt wird und ob er die Ladezeiten verlangsamt oder nicht. Wenn Sie Animationen in Ihre Website oder Social-Media-Feeds einbinden möchten, sollten Sie auch ein wenig über GIF-Dateien und deren Unterschiede zu JPG und PNG wissen.

Abonnieren Sie unseren Youtube-Kanal

Verlustfreie und verlustbehaftete Kompression

Der Zweck des Komprimierens eines Bildes besteht darin, Platz zu sparen – kleinere Bilder sind einfacher zu übertragen und zu speichern. Große Bilder nehmen viel digitalen Speicherplatz ein und können das Laden von Webseiten verlangsamen. Im Allgemeinen werden einige Daten aus einem Bild entfernt, wenn es komprimiert wird.

Es gibt zwei Arten der Komprimierung: verlustfrei und verlustbehaftet. Um einen der deutlichen Unterschiede zwischen JPG und PNG zu verstehen, benötigen Sie eine Einführung in diese beiden Komprimierungsarten.

Verlustfreie Kompression

Bilder enthalten redundante Informationen. Die verlustfreie Komprimierung entfernt diese redundanten Daten, teilt dem Computer jedoch auch mit, wie viele Daten redundant waren und wie das Image neu erstellt werden soll. Die Dateigröße wird reduziert, um Platz zu sparen, aber die gesamte Datei kann auch aus der komprimierten Datei rekonstruiert werden. Ich liebe dieses Beispiel von Make Use Of. Es ist eine absichtlich vereinfachte Darstellung, wie verlustfreie Komprimierung Informationen entfernt, ohne die Struktur tatsächlich zu ändern:

Verlustbehaftete Kompression

MP3-Dateien sind großartige Beispiele für verlustbehaftete Komprimierung. Sie enthalten nicht das gesamte Audio der Originalaufnahme; Geräusche, die Menschen nicht oder fast nicht hören können, werden entfernt. Dies ist ähnlich wie bei der verlustbehafteten Komprimierung von Bildern. Wenn ein Bild komprimiert wird, werden Informationen endgültig entfernt, nicht nur vorübergehend; Sie können die entfernten Daten nicht wiederherstellen. Jedes Mal, wenn ein Bild bearbeitet und/oder neu gespeichert wird, gehen etwas mehr Daten verloren, was die Qualität verringert.

JPG

JPG (oder JPEG) steht für Joint Photographic Experts Group. Die Dateierweiterung kann entweder .jpg oder .jpeg sein. Diese Erweiterungen sind gleich und die Dateien funktionieren auf die gleiche Weise. Frühe Windows-Versionen konnten nur Dateien mit drei Buchstaben verarbeiten, daher wurde JPEG zu JPG gekürzt. Wenn Sie ein Foto auf einer Website oder einer Social-Media-Plattform anzeigen, sehen Sie höchstwahrscheinlich ein JPG.

Hier sind die Funktionen und Vorteile von JPGs:

• Wird normalerweise für Fotos anstelle von Grafiken verwendet.
• Beste Wahl für Screenshots von Spielen, Filmen und ähnlichen Inhalten.
• Bild auf weißem oder leerem (nicht transparentem) Hintergrund gespeichert.
• Kleinere Dateigrößen als PNGs.
• Schnellere Seitenladezeiten und bessere Benutzererfahrung.
• Verlustbehaftete Komprimierung, aber das Komprimierungsverhältnis kann angepasst werden – Sie können wählen, wie stark das Bild komprimiert wird.
• Das Bearbeiten und erneute Speichern verschlechtert die Qualität, obwohl Sie dies je nach Anzahl der Speicherungen und wo das Bild angezeigt wird, möglicherweise nicht bemerken.

Der JPG-Algorithmus findet Pixel mit derselben Farbe oder demselben Wert und blockiert sie in Kacheln. Während JPG Millionen von Farben unterstützt, wird das endgültige Bild weniger Farben als das Original haben (ähnlich wie diese Audiospuren). Auf diese Weise wird das kleinere Image erstellt, aber es führt auch zu verlorenen Daten, die Sie niemals wiederherstellen können. JPG berücksichtigt jedoch, wie die Leute die Helligkeit sehen, sodass die Helligkeit auch dann beibehalten werden kann, wenn Farbinformationen fallengelassen werden, was ein qualitativ hochwertiges Bild erzeugt.

PNG

PNG steht für Portable Network Graphic. Die Dateierweiterung ist .png. Wenn Sie das Logo einer Marke auf einer Website anzeigen, sehen Sie höchstwahrscheinlich ein PNG.

Hier sind die Funktionen und Vorteile von PNGs:

• Wird normalerweise für Illustrationen und andere Arten von Grafiken verwendet.
• Beste Wahl für Illustrationen, detaillierte Diagramme und App-Screenshots.
• Auf einem transparenten Hintergrund gespeichertes Bild – platzieren Sie es auf Ihrer Website, ohne etwas um es herum zu stören.
• Unterstützung für eine Reihe von Farben und Graustufen.
• Sie können die Farben von PNG-Dateien ändern, z. B. wenn Sie Ihr Logo aktualisieren möchten.
• Je weniger Farben verwendet werden, desto kleiner kann die Datei verkleinert werden.
• Verlustfreie Kompression.

Speichern eines Fotos als PNG

Während Sie Fotos meistens als JPG-Dateien speichern, gibt es Fälle, in denen Sie sie als PNG speichern möchten:

• Das Bild muss so hochwertig wie möglich sein – PNG enthält mehr Details als JPG.
• Sie werden das Foto mehrmals bearbeiten und speichern. Wenn Sie mit der Bearbeitung fertig sind, können Sie das Foto als JPG speichern, um die Größe zu begrenzen.
• Das Foto enthält auch Text – JPG verringert die Textqualität merklich.
• Das Foto muss einen transparenten Hintergrund haben – vielleicht verwenden Sie beispielsweise eines Ihrer Fotos als Logo.

GIF

GIF steht für Graphics Interchange Format. Die Dateierweiterung ist .gif. Wenn Sie ein kurzes, animiertes Video mit Endlosschleife anzeigen, sehen Sie höchstwahrscheinlich ein GIF.

Hier sind die Funktionen und Vorteile von GIFs:

• Es ist der einzige der drei Dateitypen, der Animationen unterstützt.
• Beste Wahl für einfache Grafiken.
• Begrenzte Farbpalette.
• Aufgrund der begrenzten Farbanpassung kleiner als JPGs.
• Verlustfreie Kompression.

WordPress-Plugins für die Komprimierung

Um ein Bild für eine WordPress-Website zu komprimieren, können Sie eine Software, ein browserbasiertes Tool oder ein Plugin verwenden. Manche Leute verwenden kein Plugin, weil sie ihre Server nicht zusätzlich belasten oder sich um Kompatibilitätsprobleme kümmern oder nicht den zusätzlichen Schritt des Erstellens von Backups durchführen möchten. Wenn Sie Ihren Prozess jedoch rationalisieren möchten, können Plugins ziemlich effizient sein.

Hier sind ein paar Dinge, die Sie bei der Verwendung eines WordPress-Plugins für die Komprimierung beachten sollten:

• Sie müssen das Bild nach der Größenänderung nicht hochladen – es befindet sich bereits in Ihrer WordPress-Medienbibliothek.
• Viele Plugins haben eine Einstellung, mit der Sie während des Uploads optimieren können und einen weiteren Schritt aus dem Prozess entfernen.
• Selbst wenn zwei Komprimierungs-Plugins sagen, dass sie dasselbe tun, haben sie ihre eigenen Einstellungen, Vor- und Nachteile. Möglicherweise müssen Sie mit einigen herumspielen, um die richtige Balance zwischen Kompressionsverhältnis und Qualität zu finden.
• Kostenlose Versionen von Komprimierungs-Plugins klingen zunächst ansprechend, aber die Komprimierungsergebnisse sehen möglicherweise schlecht aus, sodass Sie ein Upgrade durchführen müssen, wenn Sie Bilder in höherer Qualität wünschen.
• Einige Plugins sind schwierig zu installieren und einzurichten, während andere sofort einsatzbereit sind.
• Zusätzliche Funktionen machen einige Plugins attraktiver als andere. ShortPixel hat beispielsweise eine Hochglanzoption, eine definitive Anziehungskraft für professionelle Fotografen. Imagify speichert Ihr Originalbild in einem separaten Ordner, sodass Sie es jederzeit wiederherstellen können.

Abschließende Gedanken

Zu wissen, wie Sie Ihre Bilder verwenden werden, ist der erste Schritt, um den zu wählenden Dateityp zu bestimmen. Letztendlich besteht das Ziel darin, die kleinstmögliche Datei zu verwenden und gleichzeitig so viel Qualität zu erhalten, wie für das Ziel erforderlich – ein Bild, das auf einer Website angezeigt wird, wird auf einer größeren Seite angezeigt als ein Bild, das auf Instagram angezeigt wird, also brauchst du die Qualität höher sein, um die Unvollkommenheiten weniger auffällig zu machen. Verwenden Sie für die Fotos, die Sie am liebsten verlieren würden, ein Backup-System zum Speichern der Originale – wenn Sie versehentlich zu stark komprimieren, haben Sie die Möglichkeit, von vorne zu beginnen.

Benötigen Sie weitere Bilder für Ihre Website? Unsplash ist einer meiner Lieblingsorte für kostenlose Stock-Fotografie. Schauen Sie sich unseren Artikel mit Unsplash-Bildern in WordPress mit einem Klick an.