Bildvergrößerung mit Java Script oder PHP

ff-webdesigner

ff-webdesigner - Webdesign-Agenturen Regensburg & München

ff-webdesigner.de
Regensburg München Wien

Freelancer
 
ff.Bilderzoom Hotline

Bilderzoom für Ihre HP? Rufen Sie uns an!
Tel: (+49) 941 4618 3055

Skype:
ff-webdesigner ff-webdesigner status

Webdesign Hotline
   
   
   
     

 

 
ff-webdesigner Zum Seitenanfang
   
  ff-webdesigner - Webdesign-Agenturen Regensburg & München

ff-webdesigner.de
Regensburg München Wien

 
   
     

 

 
ff-webdesigner Zum Seitenanfang
   
Webdesign-Hotline
Homepage-Probleme? Testen Sie unseren Internet-Service!

Tel: (+49) 941 4618 3055
Skype:
ff-webdesigner ff-webdesign status

Internet-Service
   
     

 

 
ff-webdesigner Zum Seitenanfang
   
  ff-webdesigner - Webdesign-Agenturen Regensburg & München

ff-webdesigner.de
Regensburg München Wien

 
   
     

 

 
ff-webdesigner Zum Seitenanfang
   
Webdesign-Hotline
Homepage-Probleme? Testen Sie unseren Internet-Service!

Tel: (+49) 941 4618 3055
Skype:
ff-webdesigner ff-webdesign status

Internet-Service
   
     

 

 
ff-webdesigner Zum Seitenanfang
   
  ff-webdesigner - Webdesign-Agenturen Regensburg & München

ff-webdesigner.de
Regensburg München Wien

 
   
     

 

 
ff-webdesigner Zum Seitenanfang

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.

Webdesign-Angebot HUP :
Homepage-Updates und Ergänzungen
Unser Preis: 59 € / h 70,21 € incl. MwSt.
Für wen? Sie wollen ein schnelles Update oder Erweiterungen an Ihrer Homepage.

Sie haben neues Material für Ihre Homepage oder wollen einige neue Seiten ergänzend online stellen? Die ff-webdesigner kümmern sich schnell und zuverlässig um Ihre Updates. Kontaktieren Sie uns bitte zwecks Klärung des Arbeitsaufwandes und freien Terminen! [Jetzt bestellen!] [Mehr Webdesign-Angebote]

Webdesign-Angebot BRI :
Bildrecherche im Internet
Unser Preis: 118 € 140,42 € incl. MwSt.
Für wen? Sie suchen professionelle und lizenzfreie Digitalfotografien zur Nutzung auf Ihrer Homepage.

Sie haben ein genaue Vorstellung, welche Bilder Sie suchen, finden aber keine copyrightfreien? Wir finden diese Bilder für Sie!
  • Teilen Sie uns mit, welche Bilder Sie suchen (maximal 10)
  • Wir finden diese Bilder zur legalen Nutzung auf Ihrer Homepage.
  • Alle Bilder werden in einer Auflösung von ca. 800/600 (auf Wunsch auch hochauflösend für Prospekte) zugemailt. Die Bilder sind größtenteils von professionellen Fotografen, nicht älter als 2 Jahre und zur Verwendung auf Ihrer Homepage freigegeben.
[Jetzt bestellen!] [Mehr Webdesign-Angebote]

Webdesign-Angebot STD :
Webdesign Stundensatz
Unser Preis: 59 € 70,21 € incl. MwSt.
Für wen? Sie benötigen schnell und zuverlässig Hilfe für Ihre Hompage?

Wir erledigen für Sie alle Arbeiten an Ihrer Homepage nach unserem aktuell gültigen Webdesign-Stundensatz. Sie erhalten vor jeder Auftragserteilung eine auf +/- 15% genaue Kostenschätzung. [Jetzt anrufen!] [Mehr Webdesign-Angebote]

 

Kleine Bilder allein locken. Große Bilder allein bremsen. Erst die Kombination aus beidem macht Ihre Homepage schnell und attraktiv.

ff-webdesigner.

Bildvergrößerung mit Javascript / PHP
Einträge aus dem ff-Webdesign Lexikon:

JavaScript ist eine von Netscape entwickelte objektbasierte Programmiersprache, die in erster Linie zur Dynamisierung von Webseiten verwendet wird. Javascript wird nicht auf dem Server, sondern auf dem Rechner des Betrachters ausgeführt und ist die einzige Möglichkeit zur Verarbeitung zahlreicher Variablen wie z.B. Bildschirmauflösung, Farbanzahl, Browserart und -version etc. Über die DOM-Schnittstelle können bereits zum Betrachter übertragene Seitenteile dynamisch ... [ Mehr lesen ]

PHP ist eine im Internet weit verbreitete Open-Source-Scriptsprache. PHP kommt häufig zum Einsatz bei Datenbanken, zur Authentifizierung mittels Cookies, Forensystem, Formmailern und vielem mehr. PHP ist objektorientiert und modular aufgebaut, was einen sehr großen Funktionsumfang und Erweiterbarkeit garantiert. Der Quelltext von PHP ist im Klartext editierbar und wird auf dem ... [ Mehr lesen ]

JPEG ist neben GIF das Haupt-Grafikformat im Internet. Basierend auf einer MPEG-Kompression bietet es die Möglichkeit, große Bilder für den schnellen Transport im Internet aufzubereiten. JPEG oder auch JPG wird vor allem zur Kompression von Bildern eingesetzt, die unregelmässige und vielfarbige Flächen aufweisen, in der Regel Fotografien. Auch moderne Videokompression wie z.B. DivX basiert auf dem JPEG zugrundeliegenden Verfahren.

GIF bedeutet Graphic Interchange Format. GIF ist eines der drei Hauptgrafikformate im Webdesign. Der Einsatz empfiehlt sich für grafische Bilder mit einheitlichen Farben und geraden Flächen. Außerdem sind mit GIF auch Animationen und transparenter Hintergrund möglich. GIF ähnelt dem überlegenen Format PNG, hat jedoch maximal 256 Farben und keinen Alphakanal (stufenlose Transparenz für jede einzelne Farbe). Zum Erstellen eines GIFs werden Bildeditoren wie Photoshop, Photo Impact oder das kostenlose GIMP benötigt.

Usability Eine gute Nutzbarkeit ist die wichtigste Grundlage für den Erfolg einer Homepage. Usability bedeutet Gebrauchstauglichkeit: eine Homepage so zu gestalten, dass ein Maximum an Nutzern die Homepage mit minimalem Wissen einfach bedienen kann. Die kritischen Teilbereiche für gute Usability sind vor allem Navigation, Farben, Aufteilung, Layout sowie die Struktur der gesamten Homepage. Usability ist immer ein subjektiver Eindruck. Objektiv wird Usability erst durch Studien an großen ... [ Mehr lesen ]

Apache Der Apache Webserver ist ein Open-Source-Programm, das für die Darstellung und Generierung von Internetseiten eingesetzt wird. Er ist der am weitesten verbreitete Servertyp im Internet. Der Apache Server läuft auf vielen verschiedenen Betriebssystemen (Windows, Linux, Mac) und zeichnet sich gegenüber dem Microsoft-IIS-Server durch bedeutend bessere Sicherheit aus. Installation und Konfiguration sind relativ einfach. Durch seinen modularen Aufbau kann der Apache Webserver mit unzähligen Erweiterungen ergänzt ... [ Mehr lesen ]



Client Ein Client (Kunde) ist eine von einem Netzwerk bediente Anwendung. Im Internet ist z.B. der Browser ein Client: er fordert Daten von einem Webserver an, der Server liefert ihm diese. Bei sicherheitskritischen Anwendungen sollte die Verbindung zwischen Client und Server mit passenden Massnahmen verschlüsselt werden (Beispiel: Bestellung mit Kreditkarte wird über SSL übertragen).

Query String Ein Query String ist der hinter dem Dateinamen in der URL-Leiste gebrauchte Anhang von Parametern - meist nach einem Fragezeichen. Er wird zur Übermittlung von Daten und häufig auch bei dynamischen Webseiten eingesetzt. Google verwendet ebenfalls Query Strings und macht damit seine Suchseiten direkt verlinkbar: http://www.google.de/search?q=webdesigner. Der PHP-Bilderzoom der ff-webdesigner basiert ebenfalls auf einen Query-String, ... [ Mehr lesen ]
 
  ff-Webdesigner
Kostenrechner


Berechnen Sie jetzt online, was Ihre Homepage bei den ff-webdesignern kostet.

[ Jetzt berechnen ]
 
 
 
 
ff-Webdesigner
Kostenrechner


Berechnen Sie jetzt online, was Ihre Homepage bei den ff-webdesignern kostet.

[ Jetzt berechnen ]
 
 
 
 
Business-HomepagesFreelancer Webdesigner