Vergleich Roman vs. Versucht und True Image-Formate

0
111

Gängigen Bild-Dateiformate wie JPG, PNG und GIF sind herum für eine lange Zeit. Sie sind relativ effizient und web-Entwickler vorgestellt haben viele optimization-Lösungen, um eine weitere Komprimierung Ihrer Größe. Doch die ära der JPGs, PNGs und GIFs kann zu einem Ende kommen, wie neuere, effizientere Bild-Datei-Formate haben das Ziel, Ihren Platz einzunehmen.

Wir erkunden diese neuere Datei-Formate in diesem Beitrag zusammen mit einer Analyse, wie Sie stapeln sich gegen einander und die bisherigen Formate. Wir werden auch cover-Optimierung Techniken, um die Lieferung Ihrer Bilder.

Warum brauchen wir neue Bild-Formate überhaupt?

Abgesehen von der Bildqualität, der auffälligste Unterschied zwischen älteren und neueren image-Formate ist die Dateigröße. Neue Formate verwenden algorithmen, die sind effizienter bei der Komprimierung der Daten, so dass die Dateigröße viel kleiner sein kann. Im Kontext der web-Entwicklung, kleinere Dateien bedeuten schnellere Ladezeiten, was sich in niedrigeren bounce-raten, mehr traffic und mehr conversions. Alle guten Dinge, die wir oft predigen.

Wie bei den meisten technologischen Innovationen, die Einführung der neuen Bild-Formate werden schrittweise als Browser betrachten und übernehmen Ihre standards. In der Zwischenzeit, die wir als web-Entwickler, die für Benutzer mit unterschiedlichen Ebenen der Unterstützung. Zum Glück Kann ich bereits oben, und die Berichterstattung über die browser-Unterstützung für bestimmte Bild-Formate.

Die Neuen Sachen

Wir Wandern in eine neue Grenze von Bild-Datei-Formate, wir werden viel format Entscheidungen. Hier sind ein paar Kandidaten, die werden schon auftauchen und machen den Fällen, ersetzen Sie die vorhandenen standard-Träger.

WebP

WebP wurde entwickelt von Google als alternative zu JPG und kann bis zu 80% kleiner als JPEG-Bilder mit dem gleichen Bild.

WebP browser-Unterstützung verbessert die ganze Zeit. Opera und Chrome unterstützen es zur Zeit. Firefox angekündigt, Pläne, um es zu implementieren. Für jetzt, Internet Explorer und Safari sind die holdouts. Große Unternehmen mit Tonnen von Einfluss wie Google und sind derzeit das Experimentieren mit dem format und es macht bereits etwa 95 Prozent der Bilder auf der eBay-homepage. YouTube verwendet auch WebP für große miniaturen.

Wenn Sie ein CMS wie WordPress oder Joomla gibt es Erweiterungen, um Ihnen helfen, leicht zu implementieren die Unterstützung für WebP, wie Optimus und Cache Enabler für WordPress-und Joomla-eigene Erweiterung unterstützt. Diese wird nicht brechen Sie Ihre website für Browser, die nicht unterstützen das format, so lange, wie Sie geben Sie PNG-oder JPG-fallbacks. Als Ergebnis, Browsern, die Unterstützung der neueren Formate werden sehen, ein performance-boost, während andere erhalten die standard-Erfahrung. Wenn man bedenkt, dass browser-Unterstützung für WebP ist gewachsen, es ist eine großartige Möglichkeit zu sparen auf die Latenz.

Dieser browser support-Daten von Caniuse, welche hat mehr Details. Eine Zahl zeigt an, dass browser die Funktion unterstützt in dieser version.

Desktop

ChromeOperaFirefoxIEEdgeSafari
23 12 Keine Keine Keine Keine

Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
Keine 11.1 alle 4.2-4.3 62 Keine

HEIF

Hohe Effizienz-image-Dateien (oder HEIF) tatsächlich tragen die Erweiterung HEIC (.heic), das steht für high efficiency-image-container, aber die beiden Abkürzungen werden Synonym verwendet. Früher in diesem Jahr, Apple hat angekündigt, seine neueste Linie der Produkte unterstützen HEIF-format standardmäßig.

Auf der Oberseite der kleineren Dateigrößen, HEIF bietet mehr Vielseitigkeit als andere Formate, da es unterstützt sowohl Bilder und Bildsequenzen. Daher ist es möglich, burst-Fotos, focal Stapel -, Belichtungs-Stapel-Bilder aus video und andere Bild-Sammlungen in einer einzigen Datei. HEIF unterstützt auch Transparenz -, 3D-und 4K.

Neben Bildern, HEIF Dateien halten können Bild-Eigenschaften, thumbnails, Metadaten und zusätzliche Daten wie Tiefe, Karten und audio. Bild Ableitungen gespeichert werden können als auch durch nicht-destruktive Bearbeitung. Das bedeutet, zuschneiden, Rotationen und andere änderungen können jederzeit rückgängig gemacht werden. Stellen Sie sich alle Ihre Bild-Varianten in einer einzigen Datei!

Apple ist bemüht, alles zu tun, um den übergang so nahtlos wie möglich. Zum Beispiel, wenn Benutzer teilen HEIF Dateien mit apps, die nicht das format unterstützen, wird Apple automatisch konvertieren Sie das Bild in ein besser kompatibles format wie JPG.

Es gibt keine browser-Unterstützung für HEIF zum Zeitpunkt des Schreibens dieses Artikels.

Dieser browser support-Daten von Caniuse, welche hat mehr Details. Eine Zahl zeigt an, dass browser die Funktion unterstützt in dieser version.

Desktop

ChromeOperaFirefoxIEEdgeSafari
Keine Keine Keine Keine Keine Keine

Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
Keine Keine Keine Keine Keine Keine

Dass gesagt wird, die Datei-format bietet eine beeindruckende file Einsparungen für video und Bilder. Dies wird immer wichtiger, wie unsere Geräte werden stärker und sind in der Lage, höher als die Qualität von Bildern und videos, wodurch eine größere Notwendigkeit für effiziente media-Dateien.

FLIF

Free Lossless Image-Format (oder FLIF) verwendet ein Kompressionsverfahren, das die Ergebnisse in Dateien, die 14-74% kleiner als ältere Formate, ohne Abstriche bei der Qualität (D. H. verlustfrei). Daher FLIF ist eine gute Passform für jede Art Bild oder animation.

Die FLIF-homepage behauptet, dass FLIF-Dateien sind 43% Prozent kleiner im Durchschnitt als die typische PNG-Dateien. Das Diagramm unten veranschaulicht, wie FILF im Vergleich zu anderen Formaten in diesem Bereich.

FLIF oft landet als das effizienteste format in tests.

FLIF nutzt so genannte meta-adaptive nahe-null-integer-Arithmetik-Kodierung, oder (entsprechend) MANIAC. FLIF unterstützt auch progressive interlacing so, dass Bilder angezeigt werden ganze, sobald Sie mit dem Download beginnen, das ist ein weiteres feature, das gezeigt hat, zu reduzieren web-Seite, die Absprungraten.

Das Potenzial von FLIF ist sehr spannend, aber es gibt keine browser-Unterstützung im moment noch sieht es aus, sämtliche Browser sind derzeit erwägt. Während die Macher des formats arbeiten hart an der Erreichung native Unterstützung für populäre web-Browser und Bildbearbeitungs-tools können Entwickler Zugriff auf die FLIF-source-code und ergattern Sie ein polyfill Lösung um es zu testen.

Die Vorhandenen Sachen

Wie bereits erwähnt, sind wir wahrscheinlich noch Jahre entfernt von der neuen Formate komplett zu übernehmen. In einigen Fällen könnte es besser sein, mit dem stick die erprobte und wahre. Lassen Sie uns prüfen, welche Formate über die wir sprechen und diskutieren, wie Sie haben, stecken Sie schon so lange.

JPG

Wie die herrschenden standard für die meisten digital-Kameras und Foto-sharing-Geräte, JPG ist das am häufigsten verwendete Bild-format auf dem internet. W3Techs berichtet, dass fast drei Viertel aller websites verwenden von JPG-Dateien. Ebenso, beliebtesten Foto-Bearbeitungs-software speichern Sie Bilder als JPG-Dateien standardmäßig.

JPG ist benannt nach der Joint Photographic Experts Group, die Organisation, die Technologie entwickelt; also warum JPG ist alternativ auch als JPEG. Sie können die folgenden Akronyme verwendet.

Das format reicht zurück bis 1992, und wurde geschaffen, um erleichtern die verlustbehaftete Kompression von bitmap-Bildern. Verlustbehaftete Komprimierung ist ein irreversibler Prozess, beruht auf ungenauer Näherungswerte. Die Idee war es den Entwicklern ermöglichen, passen Sie Kompressionsraten zu erreichen, Ihre gewünschte Gleichgewicht zwischen Dateigröße und Bildqualität.

Das JPG-format ist grandios für aufgenommene Fotos; jedoch, wie der name schon sagt, die verlustbehaftete Kompression kommt mit einer Reduktion in der Bildqualität. Qualität degradiert weiter jedes mal, wenn ein Bild bearbeitet und erneut gespeichert wird, und das ist der Grund, warum Entwickler, die gelehrt werden, zu unterlassen Größenanpassung der Bilder mehrere Male.

GIF

GIF ist die Abkürzung für graphics interchange format. Es hängt davon ab, einen Algorithmus zur Komprimierung namens LZW, die nicht die Bildqualität beeinträchtigen. Das GIF-format fehlt die Farbe, Unterstützung von JPG-und PNG-Dateien, aber es hat sich um stecken dennoch Dank seiner Fähigkeit zum Rendern von Animationen durch die Bündelung mehrerer Bilder in einer einzigen Datei. Bilder werden im GIF-Datei machen kann in Folge zu schaffen, um einen kurzen Film-like Effekt. GIFs können konfiguriert werden, um Bild-Sequenzen eine bestimmte Anzahl von Schleifen oder eine Endlosschleife.

Bild mit freundlicher Genehmigung von Giphy.com

PNG

Die gute alte portable network graphic (PNG) war ursprünglich konzipiert als Nachfolger für das GIF-format und debütierte im Jahr 1996. Es wurde speziell für die Darstellung von Bildern im web. In der Beliebtheitsskala, PNG ist ein enger Läufer-bis zu JPG. W3Techs behauptet, dass 72 Prozent der websites verwenden dieses format. Im Gegensatz zu JPG -, PNG-Bilder sind in der Lage, verlustfreie Kompression (also keine Bildqualität verloren gegangen ist).

Ein weiterer Vorteil gegenüber JPG ist das PNG-Format unterstützt Transparenz und Opazität. Da große Fotos tendieren dazu, superior im JPG-format, das PNG-format wird normalerweise verwendet, um nicht-komplexe Grafiken und Illustrationen.

Vergleich der Transparenz-Unterstützung von JPG (Links) und PNG (rechts).

Möglichkeiten zur Verbesserung der Bild-Optimierung und Lieferung

Es gibt einige wichtige Dinge zu beachten bei der Optimierung von Bildern für das web, weil jede Datei-format—einschließlich der neuen—kann am Ende der Zugabe noch eine weitere Ebene der Komplexität. Bilder typischerweise für den Großteil der bytes auf einer web-Seite, so Bild-Optimierung wird als niedrig hängende Früchte für die Verbesserung der website-performance. Die Google-Dev-Guide hat einen umfassenden Artikel über das Thema, aber hier ist eine verkürzte Liste von Tipps für die Beschleunigung des Bildes Lieferung.

Implementiert die Unterstützung für Neue Bildformate

Da neuere Formate wie WebP noch nicht allgemein unterstützt werden, müssen Sie konfigurieren Sie Ihre Anwendungen, so dass Sie dienen, bis die entsprechenden Ressourcen für Ihre Benutzer.

Sie müssen in der Lage sein zu erkennen, welche Formate der client unterstützt und liefern die beste option. Im Fall von WebP, es gibt ein paar Möglichkeiten, dies zu tun.

Investieren Sie in ein CDN

Ein content delivery network (CDN) beschleunigt die Bereitstellung der Bilder, die durch caching ein, Sie auf Ihrem Netzwerk aus edge-Servern. Deshalb, wenn Besucher kommen auf Ihre website, werden Sie weitergeleitet an den nächsten edge-server anstelle des Ursprungs-server. Dies kann produzieren enorme Zeitersparnis vor allem, wenn die Benutzer weit von Ihrem Ursprungs-server.

Wir haben einen ganzen post zu dem Thema, um zu helfen, zu verstehen, wie CDNs funktionieren und wie nutzen Sie Sie für Ihre Projekte.

Benutzen Sie CSS Anstelle von Bildern

Da ältere Browser nicht unterstützt Bild-Schatten und abgerundete Ecken, ein veteran web-Entwickler verwendet werden, um die Anzeige bestimmter Elemente wie buttons als Bilder. Erinnere mich an die Tage, wenn die Anzeige einer benutzerdefinierten schriftart, die erforderlichen Bilder für die Schlagzeilen? Diese Praktiken sind immer noch in der wildnis, aber furchtbar ineffizient Ansätze. Verwenden Sie stattdessen CSS, Wann immer Sie können.

Überprüfen Sie Ihre Bild-Cache-Einstellungen

Für Bild-Dateien, die nicht sehr Häufig ändern, können Sie nutzen HTTP-caching-Richtlinien zur Verbesserung der Ladezeiten für Ihre regelmäßigen Besucher. So, wenn jemand besucht Ihre website zum ersten mal, Ihren browser-cache das Bild so, dass es nicht erneut heruntergeladen werden, die auf spätere Besuche. Diese Praxis kann auch sparen Sie Geld durch die Reduzierung der Bandbreite Kosten.

Natürlich, unsachgemäße caching-Probleme verursachen können. Das hinzufügen einer Fingerabdruck, wie ein Zeitstempel, um Ihre Bilder können helfen, zu verhindern caching Konflikte. Zum Glück werden die meisten web-Entwicklungsumgebungen machen dies automatisch.

Die Größe der Bilder für Verschiedene Geräte

Herauszufinden, wie man am besten unterzubringen mobile Geräte mit niedrigen Bildschirmauflösungen ist ein fortlaufender Prozess. Manche Entwickler nicht einmal die Mühe machen und einfach die selben image-Dateien für alle Benutzer, aber das verschwendet Ihr Bandbreite und Ihre mobilen Besucher. Erwägen Sie die Verwendung srcset, so dass der browser bestimmt, welche Bildgröße es soll basiert auf dem client ist in der Größe Abmessungen.

Bild-Kompression-Tests

Es ist immer interessant zu sehen, dass die Größe der Unterschiede jedes Bild-format bietet. Im Fall von diesem Artikel, wir vergleichen verlustfreien und verlustbehafteten Bildformaten zusammen. Das ist natürlich nicht gängige Praxis so oft verlustreich sein wird in der Größe kleiner als die verlustfreie als auch die Qualität des Bildes leidet, um zu einem kleineren Bild.

In jedem Fall, die Wahl zwischen verlustfreien und verlustbehafteten Bildformaten sollte darauf basieren, wie die Bild-intensive Ihre Website ist und wie schnell es läuft bereits. Zum Beispiel, eine e-commerce-shop kann wohl mit einem etwas marodes Bild im Austausch für schnellere Ladezeiten während einer Fotografen-website ist wahrscheinlich das Gegenteil, um zu präsentieren, talent.

Vergleichen Sie die Größen von jedem der sechs Bild-Formate in diesem Artikel erwähnt, begannen wir mit drei JPG Bilder und konvertiert Sie in jedes der anderen Formate. Hier sind die performance-Ergebnisse.

  • Bild 1
  • Bild 2
  • Bild 3

Wie bereits erwähnt, sind die nachstehenden Ergebnisse variieren deutlich aufgrund verlustfreie/verlustbehaftete Bildformate. Zum Beispiel, PNG und FLIF Bilder sowohl verlustfrei, also was in größeren Bild-Dateien.

Bild 1 Größe
Bild 2-Größe
Bild 3 Größe

WebP 1,8 MB 293 KB 1.6 MB
HEIF 1.2 MB 342 KB 1.1 MB
FLIF 7.4 MB 2,5 MB 6.6 MB
JPG 3.9 MB 1.3 MB 3.5 MB
GIF 6.3 MB 3.9 MB 6.7 MB
PNG 13.2 MB 5 MB 12,5 MB

Nach den Ergebnissen oben, HEIF Bilder wurden insgesamt kleineren als jedes andere format. Jedoch, aufgrund Ihrer mangelnden Unterstützung, ist es derzeit nicht möglich zu integrieren, das HEIF-format in web-Anwendungen. WebP kam auf eine ziemlich enge Sekunde und bietet Möglichkeiten zum arbeiten, um die weniger-als-idealen Menge von browser-Unterstützung. Für Benutzer, die mit Chrome oder Opera, WebP Bilder werden sicherlich helfen zu beschleunigen Lieferung.

Für die verlustfreie Bildformate, PNG ist deutlich größer, als es die verlustbehaftete JPG-Pendant. Allerdings, wenn optimiert mit FLIF, Einsparungen von über 50 Prozent realisiert werden konnten. Dies macht FLIF eine großartige alternative für diejenigen, die benötigen qualitativ hochwertige Bilder mit einer kleineren Dateigröße. Das sagte FLIF derzeit nicht unterstützt wird von einer anderen web-Browsern noch, ähnlich wie HEIF.

Fazit

Das alte Bild-Formate wird wahrscheinlich noch für viele Jahre zu kommen, aber mehr Entwickler zu umarmen die neueren Formate, sobald Sie realisieren, dass Sie die Größe-sparende Vorteile.

Kameras, mobile Geräte und viele gadgets, die im Allgemeinen immer mehr und mehr anspruchsvoll was bedeutet, dass die Bilder und videos sind von höherer Qualität und mehr Platz einnimmt. Neue Formate angenommen werden müssen, diese zu mildern und es sieht aus wie wir haben einige sehr viel versprechende Optionen zu freuen, auch wenn es einige Zeit dauern, um zu sehen, wie Sie offiziell verabschiedet.