SEO Welten

Images auf Vorhandensein prüfen und Bilder auf Größe überprüfen

Images mit der Funktion getimagesize überprüfen

Grafiken, Images, Bilder prüfen und überprüfen, Titel und Text enthalten einiges an doppelt Gemoppelten, doch dies soll in diesem Beitrag mal erlaubt sein. Warum? Jeder, der zuweilen CSV-Dateien von unterschiedlichen Anbietern in eine Datenbank einliest oder XML-Dateien von anderen Servern über Schnittstellen verarbeitet, steht mitunter vor dem Problem, dass an Stelle einer Grafik oder Images bei der Ausgabe eine optisch scheinbar vertiefte Fläche auf der Webseite entsteht, in der dann ein kleines rotes Kreuz auf weißem Grund erscheint. Doch damit nicht genug, selbst wenn Bilder vorhanden sind, so befinden sich mitunter darunter einige Images, die von der Größe her das Layout der Seiten sprengen.
Dem Autor erging es vor einigen Monden nicht anders (Frühjahr 2008), nur die Suche im Internet nach einer entsprechenden Lösung gestaltete sich sehr erschwerend. Damit andere nach einer Lösung Suchende nicht ebenfalls zwischenzeitlich ihren Zuwachs an grauen Haaren bereuen müssen, wurde der Titel so gewählt, dass diese Seite zum Thema bei vergleichbaren Problemen leichter zu finden ist.

Doch nun zur eigentlichen Sache, der Überprüfung von Images auf Vorhandensein. Relativ einfach ist es noch, wenn keine URL für ein Bild bzw. kein Grafiklink im auszulesendem Dokument angegeben wurde. Hier reicht eine einfache if-Abfrage und ein alternativer Spruch kann problemlos mittels der guten alten Else (eigentlich eine kleine else) ausgeben werden. Wer mag kann an Stelle eines Spruchs ein alternives Ersatzbild laden, das bleibt sich, vom Aufwand her besehen, so ziemlich gleich. Dazu reicht bereits der graue abgesetzte Teil im Listing weiter unten auf dieser Seite. Schlimmer wird es, wenn eine URL zu einem Image angeben wurde, der angegebene Pfas jedoch ins Leere führt oder die vorhandene Grafik das Layout der Seite sprengt. In diesem Fall kann die Funktion getimagesize gute Dienste leisten.

Die Funktion getimagesize hilft im Beispiel nicht nur übergroße Grafiken zu prüfen und verzerrungsfrei in ihre Schranken zu verweisen, sondern überprüft zugleich noch URLs, ob am anderen Ende der Leitung ein Image vorhanden ist. Ein Test soll dies verdeutlichen. Zu diesem Test wurde eine kleine XML-Datei, welche nichts weiter als eine URL zu einer Grafik enthält, in einem separaten Ordner abgelegt und als zu überprüfende Grafik das obige Image aus dem Headbereich verwendet.

<?xml version="1.0" encoding="ISO-8859-1" ?>
- <Beginn>
  - <Bilder>
      <Images>http://www.seo-welten.de/images/seohead.jpg</Images>
    </Bilder>
  </Beginn>

Nun kann diese kleine XML-Datei mit Hilfe von PHP und SimpleXML wie folgt ausgelesen werden. Bei DOM/XML, ebenso beim Auslesen einer Datenbank sowie bei der Verwendung ähnlicher Scripte mit einer Ausgabe für Images, bleibt das Prinzip weitestgehend das selbige.

Testablauf: Wird beim Test als erste der Tag <Images> gänzlich aus dem XML-Dokument entfernt, so als wäre kein Bild bzw. keine URL zu einem Image vorhanden, wird die Bedingung der ersten if-Anweisung nicht erfüllt und sofort der Inhalt hinter der unteren else mit dem Spruch "Leider kein Bild vorhanden" ausgegeben. Damit hätte sich die Angelegenheit wie bei jeder anderen if-Anweisung erledigt.
Wird jedoch bei einem zweiten Test der Imagepfad in der XML-Datei nicht entfernt sondern nur verstümmelt, damit dieser ins Leere führt, kann kein Bild laden. In diesem Fall gilt zwar die erste if-Anweisung als erfüllt, dafür wird bei der zweiten Anweisung der Spruch "Grafik konnte nicht geladen werden" ausgegeben. Erst wenn eine Image-URL angegeben wird, deren Pfad nicht ins Leere führt, werden die letzten beiden if-Anweisungen durchlaufen und überdimensionale Grafiken in der Größe reduziert.

<?php

$daten = file_get_contents("http://www. ...de/ordnername/imagetest.xml");

$imagedaten = simplexml_load_string($daten);

   if($imagedaten->Bilder->Images){

	     $Images = ($imagedaten->Bilder->Images);

@$format = getimagesize($Images);

   if(!$format) {echo "Grafik konnte nicht geladen werden.";
           }
       else {$height = $format[1];
             $width  = $format[0];

       if ($height > 250){$height = 250;

             $prozent = ($format[1] / $height);
             $width   = ($format[0] / $prozent);
          }
       if ($width > 450){$width = 450;

             $prozent = ($format[0] / $width);
             $height  = ($format[1] / $prozent);
          }
echo "<img src=\"".$Images."\" height=\"".round($height)."\" width=\"".round($width)."\">";
          }
          }  else { echo "Leider kein Bild vorhanden.";
          }

?>

Wenn eine Grafik zwar vorhanden ist, diese nur zu groß, so kann diese wie bereits erwähnt auf ein erträgliches Maß reduziert werden. Dazu sind lediglich die Zahlenwerte entsprechend anzupassen, wie die nachfolgende Ausgabe des Headbanners (seohead.jpg) beweist. Vor allen dann, wenn es um den Erhalt eines einheitlichen Seitenlayouts geht, könnte eine derartige Vorgabe durchaus sinnvoll sein.

Insofern keine Skalierung der Grafiken erwünscht oder vorgesehen ist, die Abfrage nur der Überprüfung der Bilder auf Vorhandensein dienen und lediglich die Höhe und Breite des Images ausgegeben werden soll, lässt sich das Listing etwas verkürzen. In der Variablen $format wird beim Aufruf der Funktion getimagesize ein Array gescheichert, in dem unter dem Schlüssel[3] alle erforderlichen Angaben mit den Namen der Attribute und dessen Werte enthalten sind:

<?php

$Images = "../ordnername/fehlendesbild.jpg";

@$format = getimagesize($Images);

    if(!$format) {echo "Grafik konnte nicht geladen werden.";
                      }
               else {echo "<img src=\"".$Images."\" ".$format[3]." alt=\"Testbild\">";
                      }
?>

Wer sich noch über weitere Möglichkeiten informieren möchte, die mit der Funktion getimagesize realisierbar sind, wird eventuell auf dieser sehr empfehlenswerten Seite fündig.

de.php.net/getimagesize

Images mit dem JavaScript Event-Handler onError prüfen

Grafiken und Bilder können auch clientseitig mit dem JavaScript Event-Handler onError auf Vorhandensein überprüft werden. Eine Möglichkeit dazu sieht wie folgt aus:

Der Nachteil der vorausgehenden Schreibweise liegt jedoch darin, dass der Event-Handler onError eigentlich nichts in einem HTML-Img-Tag verloren hat und das Dokument anschließend nicht mehr valide wäre (zumindest bei 4.01 Transitional und bei XHTML verhält es sich so). Dazu sollte der Leser wissen, dass ein Event-Handler als Bindeglied zwischen JavaScript und HTML dient. Nach dem HTML-Standard ist der Event-Handler onError im Img-Tag nicht erlaubt, nach JavaScript hingegen ist er im IMG-Tag erlaubt. Übertragen wir nun die Bereitstellung des Bildes oder eines Ersatzbildes gänzlich JavaScript, so meckert kein Validator mehr. Das obige Beispiel müsste dazu wie folgt abgeändert werden, wobei weitere Attribute, wie Alt, Heigt und Width hier nur der Übersichtlichkeit wegen nicht mit aufgenommen wurden.

Kleine Tipps: Bei eigenen Test das @ AT-Zeichen vor der Variablen bitte nicht entfernen, da mit Hilfe dieses AT-Zeichen Fehlermeldungen des Servers unterdrückt werden. Ein zweiter Tipp, Lesen bildet und ein gutes Fach- oder Sachbuch hat noch niemandem geschadet. Unsere Empfehlung zum Thema:

Literatur / Bücher zum Thema bei Amazon

Leider kein Bild
vorhanden.

Preis: keine Angaben / erhältlich ab: keine Angebote

» weitere Details «

Hinweise zum Partnerprogramm von Amazon

Navigation

Finden und
gefunden werden ...

Autoritäten im
Internet
Die Kehrseite
Das Wesen

Zukunftsaussichten

Studien & Strategien
Verbreitung & Bedeutung
Internet & Medien

- Optimierung -

Einstieg Optimierung
Erfolg oder Misserfolg

Webcoding

Übersicht

Einführung ins Thema

Amazon Web Service
Request und Response
Anfragen und Anträge
Weitere Beispiele
Einfaches Script - Unicode
Einfaches Script - ISO
DOM/XML und Unicode
DOM/XML und ISO
Weitere Einzelheiten

Images/Bilder prüfen
Hotlinking von Images