PNG oder JPG oder GIF:

Auswahl des richtigen Bilddateityps für Ihre Site

Heute sind JPG und PNG die beiden häufigsten Bildformate. Auf den ersten Blick sieht ein JPG möglicherweise genauso aus wie das als PNG-Datei gespeicherte Bild. Wenn Sie beim Speichern einer Datei entweder JPG für PNG auswählen können, scheint es, als wären die beiden austauschbar. Abgesehen von den Buchstaben, die in der Erweiterung verwendet werden.

 

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 Auswahl Sie treffen müssen, wenn Sie Bilder online verwenden. Der Dateityp kann Einfluss darauf nehmen, wo er sich auf Ihrer Webseite befindet, auf welche Qualität er angezeigt wird und ob die Ladezeiten verlangsamt werden. Wenn Sie Animationen in Ihre Website oder Social-Media-Feeds aufnehmen möchten, sollten Sie auch etwas über GIF-Dateien und deren Unterschiede zu JPG und PNG wissen.

Verlustfreie und verlustbehaftete Kompression

Das Komprimieren eines Bildes dient dazu, Platz zu sparen – kleinere Bilder lassen sich leichter übertragen und speichern. Große Bilder beanspruchen viel digitalen Speicherplatz und können das Laden von Webseitenverlangsamen . 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 Unterschiede zwischen JPG und PNG zu verstehen, benötigen Sie eine Einführung in diese beiden Komprimierungsarten.

Verlustfreie Kompression

Bilder enthalten redundante Informationen. Bei der verlustlosen Komprimierung werden diese redundanten Daten entfernt, der Computer wird jedoch auch darüber informiert, wie viele Daten redundant waren und wie das Image wiederhergestellt wird. Die Dateigröße wird reduziert, um Speicherplatz zu sparen, aber die gesamte Datei kann auch aus der komprimierten rekonstruiert werden. Ich liebe dieses Beispiel von Make Use Of. Es ist eine absichtlich vereinfachende Darstellung, wie verlustfreie Komprimierung Informationen entfernt, ohne die Struktur tatsächlich zu ändern:

Verlust der Kompression

MP3-Dateien sind großartige Beispiele für verlustbehaftete Komprimierung. Sie enthalten nicht das gesamte Audio der Originalaufnahme. Töne, die Menschen nicht hören können oder fast nicht hören, werden entfernt. Dies ist ähnlich wie die verlustbehaftete Komprimierung von Bildern. Wenn ein Bild komprimiert wird, werden Informationen für immer und nicht nur vorübergehend entfernt. Sie können die entfernten Daten nicht wiederherstellen. Jedes Mal, wenn ein Bild bearbeitet und / oder erneut gespeichert wird, verliert es etwas mehr Daten, 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 identisch und die Dateien funktionieren auf dieselbe Weise. In früheren Windows-Versionen konnten nur Dateien mit drei Buchstaben verarbeitet werden. Daher wurde JPEG auf JPG gekürzt. Wenn Sie ein Foto auf einer Website oder einer Social Media-Plattform anzeigen, sehen Sie höchstwahrscheinlich eine 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.
  • Verlust der Komprimierung, aber die Komprimierungsrate kann eingestellt werden – Sie können wählen, wie stark das Bild komprimiert wird.
  • Durch Bearbeiten und erneutes Speichern wird die Qualität beeinträchtigt. Je nach Anzahl der Speichervorgänge und wo das Bild angezeigt wird, werden Sie dies 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, hat das endgültige Bild weniger Farben als das Original (ähnlich wie diese Audiospuren). So wird das kleinere Bild erstellt, es führt jedoch auch zum Verlust von Daten, die Sie niemals wiederherstellen können. JPG berücksichtigt jedoch nicht, wie Menschen die Helligkeit betrachten, sodass die Helligkeit auch beim Ablegen von Farbinformationen erhalten bleibt, wodurch ein qualitativ hochwertiges Bild entsteht.

PNG

PNG steht für Portable Network Graphic. Die Dateierweiterung lautet .png. Wenn Sie das Logo einer Marke auf einer Website anzeigen, wird höchstwahrscheinlich eine PNG angezeigt.

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.
  • Bild auf transparentem Hintergrund gespeichert – platzieren Sie es auf Ihrer Website, ohne etwas in der Umgebung 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.

Foto als PNG speichern

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

  • Sie benötigen ein möglichst hochwertiges Bild – 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 hat auch Text – JPG verringert die Textqualität spürbar.
  • Das Foto muss einen transparenten Hintergrund haben. Beispielsweise können Sie eines Ihrer Fotos als Logo verwenden.

GIF

GIF steht für Graphics Interchange Format. Die Dateierweiterung lautet .gif. Wenn Sie ein kurzes animiertes Video mit Schleifen anzeigen, wird höchstwahrscheinlich eine GIF angezeigt.

Hier sind die Funktionen und Vorteile von GIFs:

  • Es ist der einzige Dateityp, der Animationen unterstützt.
  • Beste Wahl für einfache Grafiken.
  • Eingeschränkter Farbbereich.
  • Kleiner als JPGs aufgrund der begrenzten Farbanpassung.
  • Verlustfreie Kompression.

WordPress-Plugins für die Komprimierung

Um ein Bild für eine WordPress-Website zu komprimieren, können Sie Software, ein browserbasiertes Tool oder ein Plugin verwenden. Einige Benutzer verwenden kein Plugin, weil sie nicht die zusätzliche Belastung für ihren Server wollen oder sich um Kompatibilitätsprobleme sorgen oder den zusätzlichen Schritt zum Erstellen von Sicherungen nicht durchlaufen möchten. Wenn Sie Ihren Prozess jedoch rationalisieren möchten, können Plugins ziemlich effizient sein.

Hier sind einige 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 verfügen über eine Einstellung, mit der Sie während des Uploads optimieren können, indem Sie einen weiteren Schritt aus dem Prozess entfernen.
  • Selbst wenn zwei Komprimierungs-Plug-Ins sagen, dass sie dasselbe tun, haben sie ihre eigenen Einstellungen, Vor- und Nachteile. Möglicherweise müssen Sie mit ein paar Spielern herumspielen, um das richtige Verhältnis von Kompressionsverhältnis und Qualität zu finden.
  • Kostenlose Versionen von Komprimierungs-Plugins klingen anfangs ansprechend, aber die Komprimierungsergebnisse sehen möglicherweise schlecht aus. Wenn Sie also Bilder von höherer Qualität wünschen, müssen Sie ein Upgrade durchführen.
  • Einige Plugins sind schwierig zu installieren und einzurichten, während andere einwandfrei funktionieren werden.
  • Zusätzliche Funktionen machen einige Plugins attraktiver als andere. Zum Beispiel verfügt ShortPixelüber eine glänzende Option, die eindeutig für professionelle Fotografen bestimmt ist. Imagify speichert das Originalbild in einem separaten Ordner, sodass Sie es jederzeit wiederherstellen können. Wir arbeiten mit Smush Pro von WPMUDEV, welche den Vorteil hat, dass sie nicht nur Bilder auf die benötigte Grösse beim Hochladen verkleinert. Die Bilder werden auch in der Cloud gespeichert und über CND geladen

Abschließende Gedanken

Zu wissen, wie Sie Ihre Bilder verwenden, ist der erste Schritt, um den zu wählenden Dateityp zu bestimmen. Letztendlich ist es das Ziel, die kleinstmögliche Datei zu verwenden und dabei so viel Qualität wie möglich für das Ziel beizubehalten. Ein auf einer Website angezeigtes Bild wird auf einer größeren Seite angezeigt als ein auf Instagram angezeigtes Bild. Sie benötigen also die Qualität höher sein, um die Unvollkommenheiten weniger wahrnehmbar zu machen. Verwenden Sie ein Backup-System zum Speichern der Originale, wenn Sie die Bilder verlieren, die Sie nicht leiden können. Wenn Sie versehentlich zu stark komprimiert werden, haben Sie eine Möglichkeit, von vorne zu beginnen.

Möchten Sie mehr Bilder für Ihre Website finden? Unsplash ist einer meiner beliebtesten Zielorte für die kostenlose Fotografie. Schauen Sie sich unseren Artikel mit Unsplash-Bildern in WordPress mit einem Klick an