Hochauflösende Bilder im Web richtig einbinden

Allgemein, Bildbearbeitung Schlagwörter: , , , , , 0 Kommentare
Lego Mosaik vom Foto

Bei unserem Lego Portraits nach deiner Fotovorlage erstellen wir für unsere Kunden gerne hochauflösende Entwürfe. Die spezielle Darstellungsform für besonders große Bilddateien im Web existiert schon seit längerer Zeit in Form der Zoomify-Technologie. Dabei handelt es sich nicht um ein eigenes Bildformat, sondern um eine gut durchdachte Ausgabe von einzelnen Bildabschnitten.

In unter Exportieren hier Zoomify

hochauflösende Bilder in Photoshop
 

öffnet sich der Dialog:

Hochauflösende Bilder im Web
 

Die Bildabschnitte werden vom Originalbild in bestimmten Verkleinerungsstufen abgeleitet, zerteilt und mit einem Benennungssystem in eine Ordnerstruktur einsortiert und mit einigen Zusatzdateien versehen, um schließlich im Browser auf der Basis eines schlanken Flash-Viewers betrachtet zu werden, der sehr bandbreitenschonend immer nur den gerade benötigten Bildteil in der gewünschten Vergrößerung lädt und anzeigt.

Zoomify HTML5

Für unseren Blog haben wir vor einigen Jahren uns ein WordPress Plugin für die Darstellung von hochauflösenden Bildern erstellt. Beispiel unser Mona Lisa Pop-Art Projekt. Die Animation vergrößern. Leider wird hier Adobe Flash verwendet. Eine HTML5 Lösung musste her.

HTML5 Lösung
 

Hier ein Screenshot von unser Demo Installation.

Zoomify Anleitung

  • Klicke auf das Plus-Zeichen um größer zu zoomen
  • Klicke auf das Minus-Zeichen um heraus zu zoomen
  • Klicke auf die Richtungspfeile um das Bild zu bewegen
  • Klicke auf den Kreis-Pfeil um zurück zur Bildübersicht zu gelangen
  • Klicke auf Zoom-Schieber um den Zoomfaktor zu ändern
  • Ein Klick auf das Bild vergrößert und zentriert diesen Punkt
  • Klicken und Maustaste gedrückt halten um Bildausschnitt zu verschieben

Hier kann bis zur Originalauflösung eingezoomt werden. Ein optionales kleines Navigationsfensterchen sorgt für den Überblick in riesigen Bildern.

Durch die Unterteilung des Bildes in kleine Stücke (»Tiles«) lassen sich auch mit schmalbandigen Internetverbindungen Bilder mit mehreren Gigapixel Größe flüssig betrachten.

Links

Zoomify HTML5 Beispiel
Lego Portraits nach deiner Fotovorlage

 

Jetzt bist du gefragt!

Gefällt dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Ich bin dir für jede Unterstützung dankbar!

Falls du auch in Zukunft nichts verpassen möchtest, besucht meine Facebook-Seite, r_23 auf Twitter oder abonniert den RSS-Feed.

LEGO® ist eine Marke der LEGO Gruppe, durch die die vorliegende Webseite jedoch weder gesponsert noch autorisiert oder unterstützt wird.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Business Shooting

Mit dem visuellen Erscheinungsbild beginnt alles. Egal ob Du Freelancer, langjähriger Unternehmer oder Verantwortlicher eines Start-ups bist – Du musst nach außen kommunizieren, für welche Kompetenzen und Botschaften Du stehst.
Imagefördernde Fotos unterstützen ein Unternehmen dabei, sich erfolgreich und attraktiv zu präsentieren und damit neue Kunden anzusprechen.
Bei meiner Arbeit geht es mir sowohl um die ausdrucksstarke und kompetente Darstellung der Führungskräfte und Mitarbeiter als auch um die repräsentative Abbildung der Produkte.

Aktuell

Blog via E-Mail abonnieren

Gib Deine E-Mail-Adresse an, um diesen Blog zu abonnieren und Benachrichtigungen über neue Beiträge via E-Mail zu erhalten.