So nutzen Sie Grafikformate wie JPG perfekt im Web

JPEG

JPEG wurde 1992 von der Joint Photographic Experts Group erstellt und nach seinem Schöpfer benannt. JPEG ist ein verlustbehaftetes Rasterbildformat, was bedeutet, dass jedes Mal, wenn ein JPEG mit Komprimierung gespeichert wird, einige Informationen

unwiderruflich verloren gehen.

JPEG macht sich Fehler in der Wahrnehmung des menschlichen Auges zunutze – es reagiert empfindlicher auf Helligkeit als auf Farbe – und verwendet einen Komprimierungsalgorithmus, der Informationen verwirft, die wir nicht besonders gut verarbeiten können, und ist daher ein „verlustbehaftetes Format“. Die Komprimierungseinstellung bestimmt die Größe und Qualität der endgültig gespeicherten Datei.

Verwendung von JPEG

Da JPEG für Helligkeits- und Farbkomprimierung geeignet ist, wird es in Fotos und anderen realistischen oder schattierten Bildern wie Gemälden usw. verwendet 3D-Rendering) mit guten Ergebnissen. Deshalb ist es seit vielen Jahren das beliebteste Format zum Speichern von Bildern.

Aus dem gleichen Grund ist JPEG nicht für Vektorbilder wie Logos, geometrische Figuren, Screenshots usw. geeignet.

Fotos sowie komplexe oder schattierte Bilder wie Gemälde sind gute Beispiele für die Verwendung von JPEG.

Komprimiertes JPEG

Als verlustbehaftetes Format ist die Komprimierungsrate einer JPEG-Datei umgekehrt proportional zur endgültigen Bildqualität. Wenn Sie ein JPEG in einem Tool wie Photoshop speichern, sehen Sie eine Qualitätseinstellung von 0 bis 100. Photoshop legt einige Bildqualitätsbereiche fest:

Niedrig – 10 %

Mittel – 30 %

Hoch – 60 %

Sehr hoch – 80 %

Beste – 100 %

Beste 100 % (61 KB), Sehr Hoch 80 % (29 KB). 🎜>

Hoch 60 % (16 KB), Mittel 80 % (7 KB).

Niedrig 100 % (6 KB), mindestens 0 % (3 KB). Es wird empfohlen, auf der Webseite eine JPEG-Qualität zwischen 50 % und 60 % zu verwenden, da dadurch eine gute Bildqualität mit einer kleinen Datei kombiniert wird Größe. Durch das Entfernen von Metadaten kann auch die Größe der JPEG-Datei verringert werden.

In Photoshop kann die Komprimierung durch Auswahl von „Metadaten: Keine“ oder „Für Web speichern (Legacy)“ unter „Exportieren“ erfolgen. Wenn Sie ein Bild ganz oder teilweise unscharf machen, führt dies auch zu kleineren Dateigrößen.

Da es sich bei JPEG um ein verlustbehaftetes Format handelt, ist zu beachten, dass selbst das Speichern derselben Datei mit 100 % Qualität nach mehrmaligem Speichern zu einer Verschlechterung der Bildqualität führt, da der Komprimierungsalgorithmus immer wieder auf dasselbe Bild angewendet wird . . Diese Änderung wird jedoch
möglicherweise nicht als Änderung der Dateigröße angezeigt.

PNG

Portable Network Graphics ist ebenfalls ein Rasterbildformat, das es seit 1995 gibt. Es unterscheidet sich von JPEG darin, dass es ein verlustfreies Format ist und derzeit das am weitesten verbreitete verlustfreie

-Format im Web ist. Das bedeutet, dass beim Speichern und Komprimieren der Datei aufgrund ihres Komprimierungsalgorithmus keine Informationen verloren gehen.

PNG hat viele coole Funktionen wie:

Transparenzkanal – bedeutet, dass jedes Pixel eine andere Transparenz haben kann;

8-Bit-Dateien können ein palettenbasiertes Farbmodell (auch als indizierte Farbe bezeichnet) verwenden – das heißt, die Datei kann kleiner sein, wenn die Anzahl der Farben reduziert wird;

PNG-Komprimierung ist 25 % effizienter als GIF

• 2D-Interlaced – das Bild wird beim Laden progressiv angezeigt und nicht erst, wenn das Bild vollständig geladen ist. Sie müssen diese Option mit Vorsicht verwenden, da sie die Dateigröße erhöht.
• Verwendung von PNG

PNG eignet sich hervorragend für Strichzeichnungen, Logos, Symbole und Bilder mit weniger Farbe. Fotos und Bilder mit komplexen Farben erzeugen im PNG-Format riesige Dateien. Ein weiterer Vorteil von PNG besteht darin, dass es transparente Hintergründe unterstützt. In diesem Fall müssen Sie, selbst wenn

• ein komplexes Bild ist, dennoch PNG verwenden, da in JPEG keine Bildtransparenz erreicht werden kann.

PNG kann gut in Linienarbeiten, Logos und Symbolen verwendet werden.

PNG komprimieren

Da der Komprimierungsalgorithmus in PNG verlustfrei ist, können Sie seine Farben selektiv reduzieren und so das Bild durch externe Tools verkleinern.
Für die meisten PNG-Nutzungsszenarien (Strichzeichnungen, Grafiken, Symbole) reichen 256 Farben aus. Daher kann die Dateigröße weiter reduziert werden, indem die Anzahl der Farben in der Palette reduziert wird.

GIF

Graphics Interchange Format ist ebenfalls ein Bitmap-Format und erschien früher als die anderen in diesem Artikel erwähnten Formate. Es wurde 1989 von Steve Wilhite entwickelt und war bis zur Entwicklung von PNG das beliebteste 8-Bit-Bildformat. GIF hat ähnliche Eigenschaften wie PNG, hat aber einige Nachteile:

unterstützt nur 256 Farben;
Eindimensionales Interlacing – das Bild wird progressiv Darstellung, aber nicht flüssig genug;
Schlechte Komprimierung im Vergleich zu PNG
Binäre Transparenz – Pixel können nur 100 % transparent oder 100 % sichtbar sein ;
Mehrdeutige Aussprache

SVG

Scalable Vector Graphics (Skalierbare Vektorgrafiken ) unterscheiden sich vom zuvor erwähnten Rasterformat. Wie der Name schon sagt, handelt es sich um ein Vektorformat. Das bedeutet, dass Daten nicht auf Basis von Pixeln gespeichert werden, sondern grafische Informationen in Form von aufgezeichneten Koordinaten. SVG verwendet eine XML-basierte semantische Tag-Struktur, die HTML ähnelt. Aufgrund der DOM-Struktur können Sie SVG-Elemente anhand ihrer ID abrufen und bearbeiten. Dies eröffnet viele Möglichkeiten, wie zum Beispiel das Modifizieren und Animieren von Elementen oder das Erstellen responsiver Grafiken mithilfe von JavaScript und CSS

.

SVG-Bilder können wie andere Vektorformate auf jede beliebige Größe vergrößert werden, ohne dass Details verloren gehen.

Verwendung von SVG

SVG wird häufig in Strichzeichnungen, Logos, Symbolen, Illustrationen und Datenvisualisierungen verwendet. Für realistische Bilder und komplexe Bilder mit vielen Details ist es jedoch nicht geeignet. In einigen Fällen erfüllen sowohl SVG als auch PNG den gleichen Zweck

sehr gut. Bei Strichzeichnungen erzeugt SVG im Allgemeinen kleinere Dateigrößen. Dies ist jedoch nicht unvermeidlich. Je nachdem, wie viele Ankerpunkte das Vektorbild hat, kann es sogar zu einer größeren Datei als PNG kommen. Was SVG wirklich auszeichnet, ist die Datenvisualisierung. Da Vektoranimationen mit JavaScript manipuliert und erstellt werden können, bieten Bibliotheken wie D3 endlose Möglichkeiten

Komprimiertes SVG

In den meisten Fällen verwenden Sie Tools wie SVGz (GZipped SVG ) sind nicht erforderlich, um SVG-Dateien für die Verwendung in Webseiten zu komprimieren. Sie können (und sollten) Gzip auf dem Server aktivieren, um eine Komprimierung zu erreichen, obwohl dies

möglicherweise nur geringe Auswirkungen hat. Ein besserer Ansatz wäre, die Dateigröße zu reduzieren, indem unnötige Anker, Elemente und Attribute aus SVG-Vektorgrafiken entfernt werden. Ankerpunkte zeichnen das Vektorbild, daher müssen Sie sicherstellen, dass die entfernten Ankerpunkte keinen Einfluss auf die endgültige Form des Vektors

haben. Wenn Sie Adobe Illustrator verwenden, um Ihre SVG-Datei zu bearbeiten, achten Sie darauf, sie mit „Exportieren“ > „Exportieren unter“ und nicht mit „Datei“ > „Speichern unter“ zu speichern, da dadurch eine minimierte Datei erstellt wird, was natürlich weitere Vorteile hat

Punkt. Achten Sie in Sketch darauf, keine unnötigen Ordner zu verwenden, da diese auch als zusätzliche Tags im SVG gespeichert werden.

Das Bereinigen unnötiger Knoten ist eine Möglichkeit, die Größe von SVG zu reduzieren. Das

-Element-Tag umfasst alles, was in der SVG-Datei enthalten ist, einschließlich der öffnenden und schließenden Tags. Vektorbearbeitungssoftware wie Adobe Illustrator und Sketch kann SVG mit unnötigen Elementen und Attributen übersättigen. SVG-Kompressoren können verwendet werden, um

diese redundanten Informationen zu entfernen.

Das obige ist der detaillierte Inhalt vonSo nutzen Sie Grafikformate wie JPG perfekt im Web. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!