joerghuelsermann.de Bildformate

Bildformate

Auf dieser Seite möchte ich mehrere Experimente mit Bildformaten im Rahmen des mammuthanull Wettbewerbes durchführen. Im Rahmen des Wettbewerbes zur Suchmaschinenoptimierung zum Suchbegriff fullmetalseo2013 habe ich ein weiteres Experiment mir vorgenommen.

Bildformate im Vergleich beim Wettbewerb fullmetalseo2013

Im Grunde möchte ich mit diesem Experiment feststellen ob dem Bildformat WebP Vorteile eingeräumt werden von gewissen Suchmaschinen. Dieses Mal nehmen wir ein Bild von mir das in ein Comic umgewandelt wurde und zusätzlich mit dem Schriftzug fullmetalseo2013 versehen wurde. Negativ an diesem neuen Bildformat ist die noch unzureichende browserübergreifende Unterstützung. Positiv dagegen ist das geringere Datenvolumen.

fullmetalseo2013 Bildformat WebPfullmetalseo2013 im WebP Format
fullmetalseo2013 Bildformat JPEGfullmetalseo2013 im JPEG Format
fullmetalseo2013 Bildformat PNGfullmetalseo2013 im PNG Format
fullmetalseo2013 Bildformat GIFfullmetalseo2013 im GIF Format

Verwendung des WebP Bildformates

An der htaccess Datei musste ich hierzu den folgenden Eintrag ergänzen.

Erweiterung htaccess Datei
RewriteCond %{REQUEST_URI} \.webp$
RewriteRule .* - "[T=image/webp]"

Verschiedene Bildformate im Vergleich

Insgesamt sind vier verschiedene Graphikformate verwendet worden. Die Ausgangsbasis war die entsprechende SVG Datei die mit Hilfe der Imagick Funktionen in PHP in die anderen drei Bildformate umgewandelt wurde.

Beispiele der vier Bildformate

Die vier verwendeten Graphiformate für die statischen Dateien sind SVG, GIF, JPEG und PNG. In dieser Reihenfolge sind auch die Beispiele aufgeführt.

mammuthanull Bildformat SVG
mammuthanull im Bildformat SVG
mammuthanull Bildformat JPEG
mammuthanull im Bildformat JPEG
mammuthanull Bildformat PNG
mammuthanull im Bildformat PNG
mammuthanull Bildformat GIF
mammuthanull im Bildformat GIF

Kode zur Erzeugung der Bildformate

Als Information der Kode den ich angewendet habe zur Umwandlung der Bildformate

Umwandlung des Bildformates
$bild = new Imagick(); 
$bild->readImage('mammuthanull.svg'); 
$bild->writeImage('mammuthanull.png'); 
$bild->clear(); 
$bild->destroy();

Alternatives Format

Da ich schon mit diesen Funktionen experimentiert habe war ich doch geneigt zusätzlich eine PDF Version zu veröffentlichen.

Verschiedene Bildformate mit Parameter

Ich hoffe mit diesem Experiment den Einsatz von Parametern in einer URL von einem Graphikformat zu klären.

Bevor ich aber auf die Beispiele eingehe möchte ich zuerst das Prinzip des Schutzes vorstellen.

Verhinderung von URL Manipulation durch Parameter

Ich mag Parameter, weil sie in der Lage sind eine URL zu manipulieren. Aber ich bin auch in der Lage rein mit PHP alle möglichen Manipulationen zu verhindern. Und für die Beispiele der Bildformate aktiviere ich einen solchen Schutz. Eine Alternative stellen auch Angaben in der htaccess Datei dar.

Zuerst wird durch den Schutz in diesem Beispielen kontrolliert ob nur ein Parameter existiert. Dann muss der Parameter f auch übergeben werden. Und schliesslich dürfen nur erlaubte Werte vorhanden sein. Im anderen Fall wird eine Fehlerseite aufgerufen.

Zusätzlich nehmen wir eine weitere Umleitung vor für den Fall das jemand einen weiteren Parameter zwar eröffnet mit dem & Zeichen aber nicht weiter definiert. Die Erzeugung und Ausgabe des Bildes deute ich nur an.

Verhinderung von URL Manipulation durch Parameter mit einem Nachteil
if (count($_GET) == 1 and isset($_GET['f']) and preg_match('#^[1-8]$#',$_GET['f'])) {
if (substr($_SERVER['QUERY_STRING'], -1, 1) == '&') {
header('Location: http://'.$_SERVER['SERVER_NAME'].substr($_SERVER['REQUEST_URI'], 0, -1),true,301);exit;}
echo $bildformat;}
else {
header('Status: 404');include $_SERVER['DOCUMENT_ROOT'].'/fehlerseite.php';exit;}

Der kleine Nachteil des vorherigen Kodes besteht darin das ich immer noch in der Lage bin mehrmals den Parameter zu definieren. Und nur der letzte wirkt und die anderen Angaben werden verworfen. Durch reguläre Ausdrücke ist man immer noch in der Lage diesen Punkt auch zu berücksichtigen.

Im Grunde ist es auch möglich bei mehreren Parametern auch eine bestimmte Reihenfolge der Parameter zu überprüfen und einzuhalten. Oder man kann einem nicht gesetzten Parameter auch diesem einem Standardwert zuweisen und darauf dann umleiten.

Verhinderung von URL Manipulation durch Parameter
if (preg_match('#^f=[1-8]&?$#',$_SERVER['QUERY_STRING'])) {
if (substr($_SERVER['QUERY_STRING'], -1, 1) == '&') {
header('Location: http://'.$_SERVER['SERVER_NAME'].substr($_SERVER['REQUEST_URI'], 0, -1),true,301);exit;}
echo $bildformat;}
else {
header('Status: 404');include $_SERVER['DOCUMENT_ROOT'].'/fehlerseite.php';exit;}
Übersicht der Parameter
ParameterFormatHintergrund
1SVGTransparent
2SVGDeckend
3PNGTransparent
4GIFTransparent
5PNGDeckend
6GIFDeckend
7JPEGDeckend
8ZufallZufall
9Zufall durch UmleitungZufall durch Umleitung

Beispiele der neun Parameter zum Erzeugen der Graphiken

Nachfolgend führe ich alle neun Beispiele auf. Bei dem momentan verwendeten Hintergrund sieht man keine Unterschiede ausser wenn man die Dateien direkt aufruft.

  1. mammuthanull
  2. mammuthanull
  3. mammuthanull
  4. mammuthanull
  5. mammuthanull
  6. mammuthanull
  7. mammuthanull
  8. mammuthanull
  9. mammuthanull

Prinzip der Umwandlung von SVG in andere Bildformate

Um das Prinzip noch anzudeuten wie man SVG in andere Graphiken in einem Rutsch umwandeln kann veröffentliche ich auch den Weg den ich angewendet habe.

Umwandlung von SVG in andere Bildformate
$bild = new Imagick();
$bild->setBackgroundColor(new ImagickPixel('transparent'));
$bild->readImageBlob($svg);
$bild->setImageFormat('png32');
header('Content-type: image/png');
echo $bild;
$bild->destroy();