Es geht um den Vergleich zwischen dem meist genutzten Bildformat JPG und den neuen alternativen Bildformaten.
Das Beispielbild betrifft ein einfarbiges Bild mit Kantenlänge 27 Pixel.
Es werden die Formate JPG, PNG, SVG und WEPB verglichen. Die Sortierung erfolgt von der größten zur kleinsten Datei. Wobei SVG kein Pixelformat, sondern ein Vektorformat ist und hier das Quellbild für die anderen Formate stellt.
JPG ist ineffizient weiterlesenThema: Vergleich am Beispiel der Variationen einer Bild-Vorlage Zielgruppe: Webdesigner und Dokumenten-Ersteller Motivation: Neue Formate und neue Bedürfnisse
Eins meiner professionellen Leidenschaften ist, das Erstellen von Vectorgraphics mit Inkscape.
Diese Leidenschaft begründet sich in vielen Punkten:
Niemand kann das im Grafikbereich überbieten!
Seit Jahren versuche ich UTF-Symbole zu nutzen, um mir in Inkscape einiges an Arbeit zu ersparen. Doch die Hilfen im Internet sind nur teilweise nützlich und nie ganz befriedigend. Nun habe ich hier einen Leitfaden erstellt um Unicode-Schriftzeichen, -Symbole, -Icons und -Emojis in Inkscape einzufügen.
Dieser Beitrag soll die Diskrepanz von den ästhetischem Empfinden eines Schriftbildes und einem zu vermittelndem Text darstellen. Also, wie ist die Wirkung der verschiedenen Schriftarten, Schriftauszeichnungen sowie sonstige Schriftformatierungen und wie sind diese optimal zu nutzen.
Beispielsweise, welche Schriftart ist für Fließtext geeignet und welche Schriftart ist am besten für Überschriften.
Diese Anleitung gilt auch für andere Web-CMS.
Warum sind SVG-Dateien, also skalierbare Grafiken so interessant?
Weil diese schneller im Internet transportiert werden und sich somit die Webseite schneller öffnend. Außerdem entlastet es die Datenbank.
Vorsicht, nur selbst erstellte SVG-Dateien hochladen, den SVG-Dateien werden bewusst gesperrt um ausführbaren Code, der in SVG-Dateien versteckt werden kann, keinen Zugang zur Webseite und somit auch zu den Webseiten-Besuchern zu gewähren.
Hier am Beispiel des Farbrades mit 256 Farben.
150 kB die Original-SVG-Datei 65 kB als komprimierte PNG-Datei 17 kB als optimierte JPEG-Datei 20 kB als SVGZ-Datei, verlustfrei komprimierte SVG-Datei
Nun sieht es so aus, das JPEG die kleinste Datei ist und nicht die verlustfreie komprimierte SVGZ-Datei, aber JPEG hat die schlechteste Qualität und SVG ist das Original. Gerade für Zeichnungen und Logos sind Artefakte wie in JPEG-Dateien keine Option!
Bei JPEG-Dateien besteht noch das Problem die Original-Datei aufzuheben, zusätzlich zur eingesetzten Datei mit den speziellen Abmessungen für die jeweilige Webseite.
Um SVG-Dateien und auch komprimierte SVGZ-Dateien in WordPress zu nutzen, werden zwei Arbeitschritte benötigt.
1. muss dem Apache-Server mitgeteilt werden das diese Dateiformate, die zu Recht als gefährlich eingestuft werden, zulässig sind..htaccess
AddType image/svg+xml svg svgz AddEncoding gzip svgz
2. wird WordPress dieselbe Mittelung gemacht über das aktivierte Theme.
/wordpress-webseite/wp-content/benutztes-theme/functions.php
/* MIME-Type svg und svgz zulassen */
function custom_mtypes( $uwd ){
$uwd['svg'] = 'image/svg+xml';
$uwd['svgz'] = 'image/svg+xml';
return $uwd;
}
add_filter( 'upload_mimes', 'custom_mtypes' );
3. Im Header der Seite muss ein eventuelles „no-svg“ gelöscht oder auskommentiert werden.
Dieses Tutorial ist eine Grundlage für verrückte Design-Ideen.
Zum Beispiel als Pfad erstellt für einen Regenbogen oder Farbrand, mit Weichzeichner und vieles mehr.
Die Einstellungen sind in Bearbeiten > Klonen > Gekachelte Klone erzeugen.
Werte
P1: Einfache Verschiebung
Reihen: 1
Spalten: 12
Rotation: 30°
Farbe pro Spalte H-Wert: 8,3 %
360 Grad geteilt durch 255 Segmente gleich 1,411764706 Grad je Segment.
360° / 255 = 1,411764706°
100 % Farben geteilt durch 255 Segmente gleich 0,392156863 Farbanteil je Segment.
100 % / 255 = 0,392156863 % H
Startfarbe
HSL, H = 0, S = 255, L = 128, A = 255
Mit gedrückter Strg-Taste einen Kreis ziehen.
Objekt-Füllung undefiniert lassen, das ist das Fragezeichensymbol und keine Kontur.
