Was ist das richtige Bildformat für Ihre Website?

Auswahl und Optimierung von Bildformat: Best Practices für Website -Bilder

Schlüsselpunkte

• Die korrekte Auswahl des Bildformats und die Optimierung des Bildes ist für die korrekte Verwendung von Website -Bildern von entscheidender Bedeutung. Eine falsche Nutzung kann zu einer langsamen Website -Leistung und einer schlechten Benutzererfahrung führen.
• JPEG, GIF, PNG, SVG und WebP sind häufig verwendete Website -Bildformate. JPEG, GIF und PNG sind seit langem verwendete Formate, während SVG und Webp relativ neu sind, aber aufgrund ihrer Eignung für reaktionsschnelle und schnellladende Websites immer beliebter werden.
• Die Auswahl des Bildformats hängt von der Bildtyp, Dateigröße und Browserkompatibilität ab. Zum Beispiel eignet sich JPEG aufgrund seiner Qualität und Komprimierung großartig für Fotos, während PNG aufgrund seiner Unterstützung für Transparenz für Logos und Symbole hervorragend ist.
• WebP ist ein modernes Bildformat, das von Google entwickelt wurde und die Vorteile von JPEG und PNG kombiniert, ohne große Dateigrößen zu erzeugen, was es ideal für die Netzwerknutzung macht. Es wird jedoch nicht allgemein von allen Browsern unterstützt.

Dieser Artikel ist Teil einer Reihe von Artikeln, die in Zusammenarbeit mit SiteGround erstellt wurden. Vielen Dank, dass Sie die Partner unterstützt haben, die SitePoint ermöglicht haben.

Ab März 2017 machten Bilder mehr als 65% des Webinhaltes aus.

Es ist nicht überraschend: Bilder fügen Schönheit hinzu, vermitteln Informationen, erzählen Geschichten und verbinden Sie sich mit Ihren Website -Besuchern.

Andererseits sind Bilder häufig der Hauptgrund für langsame Website -Geschwindigkeit und schlechte Benutzererfahrung.

Die korrekte Verwendung von Bildern im Internet umfasst hauptsächlich zwei Dinge:

• Wählen Sie das richtige Bildformat
aus
• optimiertes Bild

In diesem Artikel werde ich den ersten Punkt diskutieren. Insbesondere werde ich die besten Bildformate im Web und die Art des Bildes abdecken, für die sie am besten geeignet sind.

, aber vor weiteren Diskussionen, klären wir kurz einige Begriffe.

Radic/Bitmap und Vektorbilder

radikales oder Bitmap-Bild besteht aus einem zweidimensionalen Pixelgitter. Jedes Pixel speichert Farb- und Transparenzwerte.

Der Zooming -Effekt des Rasterbildes ist nicht sehr gut: Wenn Sie sich zoomen, verliert es Klarheit und Qualität. Häufig verwendete Rasterbildtypen im Netzwerk sind JPEG- oder JPG-, GIF- und PNG -Formate.

Folgende sind zwei Rasterbilder (JPGs) von Apple. Das erste ist die natürliche Größe des Bildes. Die zweite zeigt Details derselben vergrößerten Version.

Beispiel für die natürliche Größe von Rasterbildern.

Rasterbilddetails, die viel größer als die natürliche Größe sind.

Beachten Sie, dass die vergrößerte Bildversion eine Verschlechterung der Qualität in Bezug auf die ursprüngliche Kopie hat.

Im Gegensatz dazu bestehen Vektorbilder aus Linien, Formen und Pfadpunkten. Die Informationen des Vektors werden im Pixel nicht gespeichert. Stattdessen werden sie in mathematischen Zeichnungsanweisungen gespeichert, die völlig nichts mit dem Pixel zu tun haben. Alex Walker sagte es sehr gut, als sie SVG (das beliebteste Vektorformat im Web) erwähnte:

SVG ist kein Bildformat - es ist eher ein Bild "Rezept".

Warum JPEG wie McDonald's Apple Pie (und SVG nicht)

ist

Eine Bedeutung, die nicht mit der Auflösung zusammenhängt, ist, dass Sie nach Belieben Vektorbilder skalieren können: Sie sehen immer klar und hell aus, perfekt für Netzhautschirme.

SVG -Grafiken kleiner Maßstab.

Zoom in SVG -Grafikdetails.

Die beiden obigen Bilder sind Ansichten der gleichen Vektorgrafik, aber im zweiten Bild ist die Rendering -Größe des Vektors mehr als doppelt so groß wie das erste Bild. Es gibt jedoch keinen Qualitätsverlust.

verlust und nicht zerstörerisch

"Lusty" und "Lustless" beziehen sich beide auf Dateikomprimierungstechniken, die auf digitale Medien angewendet werden (d. H. Bilder, Audio und Video).

Verlustische Komprimierung:

Die digitalen Daten werden nicht auf 100% der Originaldaten dekomprimiert. Verlustige Methoden können ein hohes Maß an Komprimierung liefern und kleinere komprimierte Dateien erzeugen, aber eine Menge des ursprünglichen Pixels, der Schallwelle oder des Videobandes wird für immer verloren gehen.

pcmag.com Encyclopedia

Dies bedeutet in der Praxis, dass je kleiner Sie komprimieren, desto kleiner wird es. Wenn die Dateigröße jedoch abnimmt, können Sie auch die Qualität einiger Originaldateien irreversibel verlieren. Verlustige Komprimierung beinhaltet einen Kompromiss zwischen Dateigröße und Qualität.

Ein verlustiger Bildtyp, den Sie häufig im Web sehen, ist JPEG.

Im Gegensatz dazu führt die verlustfreie Komprimierung keinen Datenverlust zwischen der komprimierten Ressource und der ursprünglichen Ressource. Dies bedeutet, dass die Komprimierung nicht dazu führt, dass die Dateiqualität zurückgeht. Aus diesem Grund sind verlustfreie Dateiformate jedoch normalerweise größer als diejenigen mit verlustigen Dateiformaten.

Die verlustfreien Bildformate, die Sie leicht im Web finden können, sind GIF und PNG.

Diese vorläufigen Informationen sind sehr nützlich, wenn Sie sich für das beste Bildformat für Inhalte entscheiden.

Die ersten drei Bild -Dateitypen, die ich unten vorstellen möchte, nämlich JPG, GIF und PNG, werden seit langem auf der Website verwendet. Die letzten beiden, nämlich SVG und WebP, sind nicht völlig neue Formate, sind aber noch nicht zum Mainstream geworden. Ihre Popularität ist jedoch zugenommen, da sie gut für die Nachfrage nach reaktionsschnellen und schnellen Ladungswebsites geeignet sind.

jpeg

JPEG oder JPG ist ein verlustes Bildformat, das vom Joint Image Expert Group

entwickelt wurde

Fast 3% aller Inhaltstypen auf der Website bestehen aus JPG -Bildern. Deshalb ist dieses Bildformat so beliebt:

• JPG -Format kann Millionen von Farben anzeigen. Dies macht es zu einer idealen Wahl für die Anzeige von Fotografie funktioniert im Web
• Als verlustiger Dateityp können Sie die Komprimierung verwenden, um die Dateigröße erheblich zu reduzieren. JPG -Dateien bieten eine Vielzahl von Komprimierungsstufen: Ungefähr 60% reicht für Netzwerkbilder aus, und jede Komprimierung über 75% führt zu einer Abbau von Bildqualität.
• Alle Internet-fähigen Geräte unterstützen das JPG-Bildformat, wodurch die Verwendung auf der Website einfach zu bedienen ist.

Eine offensichtliche Sache, die in JPG -Dateien fehlt, ist die Unterstützung für Transparenz. Wenn Sie also vorhaben, einen transparenten Hintergrund zu verwenden, um das Bild mit der Hintergrundfarbe oder Textur auf der Webseite zu mischen, ist ein JPG -Bild keine geeignete Wahl. Es ist besser, eine der Optionen auszuwählen, die ich unten aufgeführt habe.

gif

gif repräsentiert das grafische Austauschformat. Es ist ein 8-Bit-verlustfreies Format, das bis zu 256 Farben unterstützt. Diese Einschränkung macht GIF -Dateien für die Anzeige breiter Bandbreite und fotografischer Bilder ungeeignet.

Folgendes sind einige der wichtigsten Punkte, die eine große Rolle bei der langfristigen Verwendung von GIF-Dateien auf Ihrer Website spielen:

• Dateigrößen sind in der Regel sehr klein, da die Einschränkung von 256 Farben
• Transparenz unterstützen
• Unterstützungsanimation. Dies ist geeignet, um Schleifenanimationsbilder wie Symbole, Emojis, Banner usw. anzuzeigen.
• Passend für einfache Bilder mit flachen Farben, aber nicht für Fotos

png

PNG steht für tragbare Netzwerkgrafiken. Es ist ein alternatives Format für GIFs, die von W3C entwickelt wurden. Wie GIF verwendet es einen verlustfreien Komprimierungsalgorithmus und verfügt über ein 8-Bit- oder 24-Bit-Format. Beide Formate unterstützen Transparenz. Die Transparenz in 24-Bit-PNG-Bildern wird jedoch unter Verwendung von Alpha-Kanälen sowie rot, grünen und blauen Kanälen erreicht. Während GIF- und 8-Bit-PNG-Bilder entweder vollständig undurchsichtig oder vollständig transparent sind, bietet jedes Pixel im PNG-Bild bis zu 256 Opazitätsniveaus.

Sie können ein 24-Bit-PNG-Format für

verwenden

• Netzwerkbilder mit verschiedenen Transparenzebenen
• komplexe Bilder und Grafik
• Grafik, die Sie häufig bearbeiten und exportieren müssen: Ihr verlustfreies Format gewährleistet keinen Qualitätsabbau.

Im Gegensatz zu GIF -Formaten unterstützen PNG -Bildtypen keine Animationen, und ihre Dateigrößen sind möglicherweise ziemlich groß.

svg

SVG steht für skalierbare Vektorgrafiken, ein XML-basierter Vektor-Dateityp. Obwohl es es seit 2001 gibt, ist es bei Webentwicklern erst in letzter Zeit sehr beliebt geworden. Der Grund für diese verspätete Liebe ist, dass SVG seit Jahren einen schlechten Browserunterstützung hat. Glücklicherweise bin ich froh zu sagen, dass SVG zum Zeitpunkt des Schreibens in allen großen Browsern trotz einiger Inkonsistenzen und Fehler unterstützt wird.

Das

SVG -Format verfügt über viele Funktionen und kann als ausgezeichnete Wahl für Webgrafikformate empfohlen werden, insbesondere wenn sie für einfache Bilder wie Logos, Karten, Symbole usw. verwendet werden. Es ist besonders geeignet.

Vorteile des SVG -Formats

• SVGs sind in der Regel in der Dateigröße kleiner als ihre Raster -Gegenstücke, insbesondere wenn Sie sie für Ihr Netzwerk optimieren und im Gzip -Format
zur Verfügung stellen
• Sie sind skalierbar, was bedeutet, dass sie unabhängig von der Bildschirmauflösung
scharf aussehen.
Sie können SVG -Code in HTML -Tags verwenden und HTTP -Anforderungen speichern
SVG -Code selbst kann mit CSS
• angepasst werden
Sie können SVG -Bilder und ihre Teile mit CSS und JavaScript animieren, was sehr cool ist.

Da die Dateigröße recht groß wird, versuchen Sie, übermäßig komplexe SVG -Bilder für die Netzwerkverwendung zu vermeiden. Schließlich funktioniert SVG für fotografische Bilder nicht und Sie sollten sich besser an das JPG -Format oder das Webp halten.

webp

Obwohl es seit 2010 gibt, würde ich nicht sagen, dass WebP immer noch neu und nicht so bekannt ist wie JPG oder PNG. Dieses Bildformat enthält jedoch das Netzwerk in DNA: Es ist so konzipiert, dass es im Netzwerk verwendet werden soll, was es sehr interessant macht

WebP ist ein von Google entwickeltes Open -Source -Bildformat. Das Folgende sind die Hauptfunktionen:

WebP ist ein modernes Bildformat, das eine hervorragende verlust- und verlustlose Komprimierung für Bilder im Netzwerk bietet. ... Die Größe der webp verlustlosen Bilder ist 26% kleiner als die von PNG. Webp-Verlustbilder sind 25-34% kleiner als vergleichbare JPEG-Bilder ... Lustless WebP unterstützt Transparenz ... Es sind nur weitere 22% der Bytes erforderlich. Listy WebP unterstützt auch die Transparenz für Situationen, in denen eine verlustige RGB -Komprimierung akzeptabel ist und normalerweise dreimal kleinere Dateigrößen als PNG bietet.

Webp -Website

Der Vorteil von WebP besteht darin, dass es die Vorteile von JPG- und PNG -Formaten kombiniert, ohne riesige Dateigrößen zu erstellen.

Der Browser-Support ist derzeit sehr gut: Blink-basierte Browser haben es von Anfang an unterstützt, schließlich ist WebP eines der Produkte von Google. Für die Rückwärtskompatibilität von nicht unterstützten Browsern (d. H. IE/Edge, Firefox und Safari) haben einige clevere Personen geeignete Problemumgehungen entworfen.

Folgendes sind einige großartige Ressourcen, aus denen Sie mehr über WebP erfahren können und wie Sie es jetzt implementieren können:

webp faq
Wie lautet das Webp -Bildformat (und warum es wichtig ist)?
So wählen Sie das perfekte Bildformat, um Ihre Website zu optimieren
Handbuch zur Verwendung von WebP -Bildern: Fallstudien
Verwenden von WebP Images

Schlussfolgerung

In diesem Artikel skizziere ich Netzwerkbildformate und diskutiere kurz die Bildtypen, für die sie besser geeignet sind.

JPG, GIF und PNG sind sehr beliebt und werden seit langem verwendet. SVG und Webp sind neuere, aufregende Alternativen. SVG eignet sich hervorragend für Illustrationen und einfache Bilder, und Webp eignet sich hervorragend für alle Fälle, in denen JPG und PNG verwendet werden können.

Haben Sie SVG oder WebP in Ihrer Entwicklungsarbeit verwendet? Mit welchen Herausforderungen stehen Sie? Haben Sie erhebliche Leistungssteigerungen erzielt?

Klicken Sie auf das Kommentarfeld, um zu teilen!

FAQs über Website -Bildformate (FAQ)

Was sind die Schlüsselfaktoren bei der Auswahl eines Website -Image -Formats zu berücksichtigen?

Auswählen eines Bildformats für Ihre Website hängt von mehreren Faktoren ab. Betrachten Sie zunächst die Art des Bildes, an dem Sie arbeiten. Beispielsweise werden Fotos am besten im JPEG -Format für die beste Qualität und Komprimierung gespeichert, während Logos und Symbole im PNG -Format verwendet werden können, um Transparenz zu unterstützen. Zweitens betrachten Sie die Dateigröße. Kleinere Dateigrößen laden schneller, was die Geschwindigkeit und Leistung Ihrer Website verbessert. Betrachten Sie schließlich die Browserkompatibilität. Während die meisten modernen Browser Formate wie JPEG, PNG und GIF unterstützen, werden neuere Formate wie WebP nicht von allen Browsern unterstützt.

Wie wirkt sich das Bildformat auf meine Website SEO aus?

Bildformate können Ihre Website -SEO erheblich beeinflussen. Suchmaschinen wie Google priorisieren Websites, die schneller laden, während kleinere Bilddateigrößen dazu beitragen können, dies zu erreichen. Darüber hinaus bevorzugt Google bestimmte Bildformate wie JPEG 2000, JPEG XR und WebP aufgrund ihrer überlegenen Komprimierung und Qualitätseigenschaften. Die Verwendung dieser Formate kann die Suchmaschinenrangliste Ihrer Website verbessern.

Was ist der Unterschied zwischen verlustiger Komprimierung und verlustloser Komprimierung?

verlust und verlustfrei sind zwei Arten von Datenkomprimierung, die in Bildformaten verwendet werden. Verlustige Komprimierung reduziert die Dateigröße, indem "unnötige" Datenbits beseitigt werden. Dies kann jedoch zu einer Verschlechterung der Bildqualität führen. JPEG ist ein häufiges verlustiges Format. Verlustlose Komprimierung dagegen reduziert die Dateigröße, ohne die Bildqualität zu beeinträchtigen, erzeugt aber

Das obige ist der detaillierte Inhalt vonWas ist das richtige Bildformat für Ihre Website?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!