Webdesign-Tutorial: Bildvergrößerung mit Java Script oder PHP

Bildvergrößerung ist ein Thema, das auf praktisch jeder guten Homepage zu finden ist. Die Usability einer Homepage wird in entscheidendem Maße von deren Ladegeschwindigkeit geprägt. Diese ist wiederum zum größten Teil von der Größe der einzelnen Grafiken abhängig. Dieses Tutorial richtet sich an fortgeschrittene Webdesigner.

Bildgrößen Eine Website, die gut ist, ist somit eine Website, die ihrem Verwendungszweck entsprechend optimierte Bildgrößen verwendet. Je nach Verwendungszweck können diese Maße stark variieren. Ein Designbüro spricht durch seine Grafiken. Daher sollte es größere Grafiken verwenden, als beispielsweise eine Rechtsanwaltskanzlei.

Generell ist immer zu beachten, dass auf den eigentlichen Inhaltsseiten einer Website die Bildgrößen so klein wie möglich und so groß wie nötig gewählt werden sollten. Ein Thumbnail, das so klein ist, dass man noch nicht mal erahnen kann, was man zu sehen bekommen könnte, bringt absolut nichts. Noch schlimmer sind viel zu groß gewählte Grafiken, die manchmal das Layout drücken, auf jeden Fall aber immer die Ladezeit der Website drastisch verschlechtern.

Bildvergrößerung Am elegantesten kann man das Problem des Verhältnisses von Größe zu Aussage eines Bildes dadurch lösen, dass man es in zwei Größen für das WWW aufbereitet. Ein kleines Bild vermittelt auf der Homepage einen ersten Eindruck. Will der Besucher mehr Details sehen, vergrößert er das Bild durch klicken.

Fotogalerien Es gibt verschiedene Arten, wie man die Technik der Bildvergrößerung im Webdesign umsetzen kann. Zum einen wären da die vielen automatisch generierten Fotogalerien zu nennen. Es gibt zahlreiche Programme, die solche Fotogalerien automatisiert erstellen. Die Automatisierung bringt eine gewisse Zeitersparnis mit sich, aber auch ein großes Maß an Unflexibilität. Häufig sind keine individuellen Designs verwendbar, und alle Bilder werden nach den gleichen Regeln aufbereitet. Individuelle Einflussnahme auf Größe, Kompression und Farbe/Kontrast ist nicht möglich. Dennoch können diese automatisch generierten Fotogalerien durchaus von Nutzen sein, insbesondere wenn es darum geht, eine große Anzahl von Bildern schnell ins Web zu stellen. Einige gute Freeware-Programme finden Sie unter foto-freeware.de/album.php.

Photoshop Auch kommerzielle Produkte wie Adobe Photoshop besitzen automatisierte Fotogalerie-Skripte. Sie müssen nur Ausgangsordner, Zielordner, sowie einige Angaben zu Layout und gewünschten Bildgrößen machen. Photoshop generiert für jedes einzelne Hochauflösende Bild eine extra HTML-Seite. Dies ist einerseits gut, da Ihre Homepage dann für Suchmaschinen größer erscheint. Allerdings müssen Sie auch den Aufwand bei einer Änderung des Designs bedenken. Photoshop bietet nämlich die Möglichkeit, Musterseiten für die Erstellung Ihrer Galerieseiten zu verwenden. Sie können somit Ihre Fotogalerien perfekt an das bestehende Layout Ihrer Homepage anpassen.

Handarbeit? So eigenartig es klingen mag: im modernsten Medium, dem Internet, ist Handarbeit gerade bei der Bildbearbeitung nach wie vor das Non Plus Ultra. Nichts wird bessere Farben und Kontraste aus Ihren Bildern hervorbringen als eine manuelle Bearbeitung jedes einzelnen Bildes. Auch die Kompression einzelner Bilder kann stark variieren: das eine Bild schaut bei 25% JPG-Qualität noch gut aus, das andere benötigt besser 50%. Unmöglich ist eine Automatisierung bei der Bildverarbeitung, wenn es darum geht, die besten Ausschnitte aus dem Bild zu verwenden.

Rationalisierung Es geht also darum,einerseits Bilder individuell und qualitativ hochwertig für die Homepage aufzubereiten, andererseits aber auch darum, eine möglichst große Zeitersparnis beim Generieren der Thumbnails und hochauflösenden Bilder zu erzielen. Beides lässt sich durch eine strikte Trennung in manuelle und automatische Arbeitschschritte erreichen.

Farb- und Kontrastkorrekturen Anfangs besitzen Sie erst einmal jede Menge Bilder, die Sie auf Ihrer Homepage verwenden wollen. Sie sind unterschiedlich gut belichtet, die Farben sind unsauber, manche Bilder sollten vielleicht sogar beschnitten werden. Beginnen Sie mit der manuellen Korrektur des Ausgangsmaterials. Verwenden Sie in Ihrer Bildbearbeitungssoftware die Regler für Kontrast, Helligkeit und Farbkorrekturen manuell, wenn die automatischen Korrekturen zu keinen befriedigenden Ergebnissen führen.

Zuschnitt Beschneiden Sie Bilder, bei denen der Ausschnitt nicht passt. Speichern Sie jedes einzelne Bild in der ursprünglichen Auflösung als TIF, um Qualitätsverluste zu vermeiden. Vergeben Sie schon hier für Ihre Homepage wichtige und aussagekräftige Dateinamen, siehe Tutorial "Suchmaschinenoptimierung". Achten Sie beim Speichern der Bilder darauf, dass Sie nur webkompatible Zeichen (Buchstaben, Zahlen, Unterstrich, Bindestrich) verwenden.

Bilder exportieren Der nächste Schritt ist das Generieren der Thumbnails und hochauflösenden Bilder. Da es hier vor allem um das reduzieren auf praktikable Bildgrößen geht, eignet sich dieser Schritt sehr gut zur Automatisierung. Mehr Infos hierzu finden sie im Workshop "Automatisierte Bildverabeitung mit Photoshop".

Gute Bildgrößen für Thumbnails sind 100-200 Pixel Breite. Für die hochauflösenden Bilder empfehle ich eine Breite, die jeder User am Bildschirm ohne scrollen oder Verkleinerung gut sehen kann. Aktuell sind das maximal 780 Pixel. Da wir jedoch die Bilder später in das bestehende Layout der Homepage integrieren wollen, orientiert sich die Bildbreite an der Breite des zu Verfügung stehenden Bereiches im Layout. Normalerweise sind das zwischen 300 und 600 Pixel Breite. Als guten Durchschnittswert für die JPG-Kompression empfehle ich 40%. Speichern Sie somit je zwei Versionen Ihrer Bilder ab. Ich empfehle die Konvention bildname.jpg (für die Thumbnails) und bildname-hi.jpg für die hochauflösenden Bilder.

Dynamisch? Für die Programmierung einer dynamischen Seite, in der alle großen Bilder geöffnet werden können, bieten sich zwei Möglichkeiten an: Javascript oder PHP. Javascript ist einfach in der Anwendung und erfordert keine Installation eines lokalen Servers mit PHP. Jedoch ist Javascript im Gegensatz zu PHP eine clientseitige Programmiersprache. Das bedeutet, dass nicht alles, was bei Ihnen läuft auch auf den Browsern Ihrer Besucher laufen muss. PHP ist serverseitig, d.h. für alle gleich.

Clientseitig vs Serverseitig? Clientseitig bedeutet, dass der in der HTML-Seite integrierte Code zum Betrachter übertragen und dort ausgeführt wird. Der Nachteil bei Javascript ist: nicht jeder Browser kann Javascript ausführen; und wenn, dann wird von manchen Browsern die Möglichkeit angeboten, Javascript auszuschalten. Serverseitig bedeutet, dass der Betrachter fertig generierten HTML-Quellcode vom Server geschickt bekommt. Das in der Seite integrierte PHP-Skript wird auf dem Server ausgeführt. Das bedeutet, dass jeder Besucher Ihrer Zoom-Seite garantiert richtig zu sehen bekommt. Um den PHP-Code lokal zu testen, müssen Sie einen Sever sowie php auf ihrem PC installieren. Bezugsquellen s. externe Links.

Die dynamische Bildvergrößeung mittels Javascript erfordert zuerst einmal eine html-Seite mit ihrem Musterlayout, nennen wir sie zoom.html. Löschen Sie den Hauptinhaltsbereich aus dem Musterlayout, verbinden Sie wenn nötig Zellen, um ein Tabellenzelle mit mindestens 400 Pixel Breite zu erhalten. In diese Tabellenzelle wollen wir das Bild dynamisch hineinladen. Positionieren Sie an der gewünschten Bildstelle folgenden Javascript-Code im Quellcode Ihrer zoom.html:

<a href="javascript:history.back()">
<script language="JavaScript">
picname=window.location.search;
document.write("<img src='/bilder/"+picname.substring(1,picname.length)+"-hi.jpg' border='0' alt='Gezoomtes Bild'>");
</script>
</a>

Beachten Sie die kleinen Anpassungen, die Sie gegebenenfalls vornehmen müssen. Oder verwenden Sie dieses Skript einfach mit den obigen Vorgaben: Der Bilderordner "images" muss im gleichen Verzeichnis liegen, wie die Datei zoom.html. In ihm befinden sich alle Bilder. Die großen Bilder haben den gleichen Dateinamen wie die kleinen, allerdings mit dem Anhang “-hi“.

Das kleine Bild Positionieren Sie nun ein kleines jpg-Bild, zu dem es nach obigen Konventionen auch ein große Bild gibt, in einer Seite im Stammordner Ihrer Homepage. Verlinken Sie das kleine Bild mit der Zoom-Datei:

<a href="zoom.html?bild1">
<img src="/bilder/bild1.jpg" alt="kleines Bild" border="0">
</a>

Mit "?bild1" hinter der verlinkten Datei "zoom.html" teilen wir dem Skript in selbiger mit, welches Bild vergrößert werden soll. Das Skript fügt dann dynamisch den Dateinamen des großen Bildes in zoom.html ein, in unserem Beispiel also "bild1-hi.jpg". Wie schon gesagt: bild1.jpg und bild1-hi.jpg müssen im gleichen Ordner "bilder" liegen, ansonsten muss das JS angepasst werden.

Dynamische Bildvergrößerung mit PHP Bei der dynamischen Bildvergrößerung mittels PHP funktioniert das Script ganz ähnlich: mittels einerm Paramter "?bildname" hinter der verlinkten Datei "zoom.php" teilen wir dem darin befindlichen PHP-Skript mit, welches Bild vergrößert werden soll. in "zoom.php" befindet sich folgendes PHP-Skript an der gewüschten Bildstelle:

<a href="javascript:history.back()">
<img src="<?php
$url_variablen=array_keys($HTTP_GET_VARS);
$bildername=$url_variablen[0];
$bilderlink="/bilder/".$bildername;
$bilderlink=str_replace("_jpg", "-hi.jpg", $bilderlink);
$bilderlink=str_replace("_gif", "-hi.gif", $bilderlink);
echo $bilderlink;?>" alt="Klicken = zurück" border="0"></a>

Das kleine Bild auf einer Inhaltsseite im Stammordner wird mit der Datei "zoom.php" folgendermaßen verlinkt:

<a href="zoom.php?bild2.jpg">
<img src="images/bild2.jpg"></a>

Beachten Sie die leichten Modifikationen in diesem Skript: es funktioniert sowohl mit GIFs als auch mit JPGs. Im Link wird die Dateiendung mit übertragen:?bild2.jpg . Je nach Bildart vergrößert die PHP-Datei dann "bild2-hi.jpg" oder "bild2-hi.gif".

Javascript oder PHP? Bitte beachten Sie dass beim Einsatz der Javascript-Bilderzoom-Variante der Effekt von den Einstellungen im Browser des Benutzers abhängt: in einigen Browsern läßt sich Javascript deaktivieren. Die Besucher sehen dann kein großes Bild. Der Einsatz der PHP-version bietet zwei entscheidende Vorteile. Erstens gilt: wenn das Script einmal korrekt läuft, läuft es immer und für alle Besucher korrekt. Zweitens indiziert Google gewöhnlicherweise für jedes vergrößerte Bild eine weitere zoom.php-Datei. Ihre Homepage erscheint für Google größer.

Linkware Wenn Ihnen dieses Script gefällt, belassen Sie bitte einen Link auf unsere Homepage: ff-webdesigner.de - Webdesign aus Regensburg & München

Webdesign-Lehrmaterial Zu diesem Tutorial gibt es weiterführendes Lehrmaterial im ff-webdesign-Download-Bereich. Dort finden Sie jedes Tutorial als Acrobat Reader .pdf- Datei zum Offline-Studium oder zur Verwendung im Rahmen von Seminaren. Außerdem bieten wir dort zu jeder Webdesign-Anleitung umfangreiches Studienmaterial wie z.B. komplette Webprojekte, HTML-Seiten, CSS-Dateien, Templates, Bilder, oder Photoshop- Aktionen - und Homepagelayouts.

Hat Ihnen diese Webdesign-Anleitung weitergeholfen? Wir hoffen, Ihnen mit diesem Workshop bei den Arbeiten rund um Ihre eigene Homepage weitergeholfen zu haben. Sollten Sie noch Fragen oder Anregungen zu diesem Webdesigner-Tutorial haben, schreiben Sie uns! Falls Sie trotz dem Tutorial mit Ihrer Homepage nicht mehr weiterkommen sollten, freuen wir uns natürlich über jeden Webdesign-Auftrag.