Skip to content

Bilder als Vorschau und in größerer Version anbieten

  • Vorschau HintergrundbildHintergrundbild Gentoo-Tux (klicken vergrößert)
Es kam vor kurzem wieder einmal eine Anfrage: "Kann man sowas auch bei mir einbauen." Sowas bezog sich auf ein Bild, welches beim Draufklicken in vergrößerter Version dargestellt wird. Um Bilder anzuzeigen, die auch vergrößert angeboten werden sollen gibt es grundsätzlich zwei Möglichkeiten. Solche Grundlagen, die nicht täglich genutzt werden, sind zum Nachschauen sicherlich für einige ganz praktisch.

Erste Version

Die erste, schnell zu realisierende, aber für Besucher langsamere Version: Es gibt ein Bild, z.B. in 1024px Breite und 768px Höhe. Der äußere Link führt zu dem Bild in Originalgröße also in diesem Beispiel mit 1024px Breite. Statt Text zum Link steht innendrin das Bild in kleinerer Version.

<a href="http://miradlo.net/images/bloggt/miradlo_2009/gentoo_tux_wallpaper_1024x768_hell"> <img src="http://miradlo.net/images/bloggt/miradlo_2009/gentoo_tux_wallpaper_1024x768_hell" alt="Text der erscheint, falls das Bild nicht verfügbar ist" width="300" height="entsprechender Wert im Beispiel sind das 225" > </a> Gibt man einfach die passenden Maße an so wird das Bild in eben dieser Größe gezeigt. Will man nur die Breite beschränken und dem Browser alles weitere überlassen, bekommt das img-Tag nur den Wert width="300" die Angabe 'height' lässt man einfach weg. Gibt man auch bereits den Höhenwert an, dann kennt der Browser diesen bereits und muss nicht selbst rechnen ist also etwas schneller.

Zweite Version

  • Tux für einen Artikel passender GrößeTux (klicken für größere Version)
Die zweite Version, die sich vor allem bei großen Bildern (so etwa ab 40 kB sollte man überlegen) anbietet, sind zwei Bilder. Das große Bild steht innerhalb des Links, wird also nur geladen, wenn jemand es tatsächlich sehen will. Das verkleinerte Bild ist im img-Tag und ist eben in der Größe, die im Beitrag passend ist.

<a href="/images/bloggt/miradlo_2009/tux_1280.png"> <img src="/images/bloggt/miradlo_2009/tux_413px.png" width="350" height="413" alt="Tux in für einen Artikel passender Größe" /> </a>

Fazit Bild auch vergrößert anbieten

Der Vorzug, wenn Bilder auch als größere Version angeboten werden, ist klar, die Besucher können, wenn sie möchten auch die große Version nutzen. Nimmt man dafür die zweite Methode, hat das den Vorteil, dass die Besucher, die nicht an der großen Version interessiert sind, diese auch nicht laden müssen. Meist ist das also die bessere Variante. Auf jeden Fall sollte man meines Erachtens noch darauf hinweisen, dass ein Bild auch vergrößert angeboten wird, denn nicht alle Besucher werden es sonst bemerken. Diese Möglichkeit verlangt jedoch, dass das Bild in beiden Größen vorliegt. Deshalb morgen noch einen anderen Weg, der leicht zu nutzen ist und zumindest bei WordPress so funktioniert. Ich nehme jedoch an, dass auch andere Systeme (Blogsoftware oder CMS) etwas ähnliches anbieten.

Trackbacks

WordPress Bilder als Vorschau und in größerer Version anbieten &#160;miradlo blo am :

"" vollständig lesen
[...] Die Grundlagen im HTML, wie man ein Bild so einbindet, dass es auch vergrößert dargestellt wird, gabs bereits gestern im Artikel Bilder in größerer Version anbieten. Das Ganze funktioniert so auch, ist jedoch zuweilen ein bisschen aufwändig zu realisieren. Die einfachere und schnellere Variante ist es mittels WordPress zu machen, das nimmt einen Teil der Arbeit ab.[...]

Kommentare

Joscha am :

Joscha Hi,

vielen Dank. Ich freue mich auch über Bilder. Gerade, wenn sie sauber eingebunden sind, steigern sie den Besuchswert einer Seite.
Wer seinen eigenen Artikel mit einem Bild kommentieren möchte, kann das verwirklichen indem er das Bild ganz normal einbindet und dann die Verlinkung aus dem Haupttext ausschneidet und einfach in den Kommentar einfügt.

Viele Grüße

ute am :

ute @Joscha stimmt, falls man doch mal noch was ergänzen will, hat man so immerhin als Autor die Chance ein Bild zu einem Kommentar hinzuzufügen, danke für die Ergänzung.

Kommentar schreiben

Die angegebene E-Mail-Adresse wird nicht dargestellt, sondern nur für eventuelle Benachrichtigungen verwendet.

Um maschinelle und automatische Übertragung von Spamkommentaren zu verhindern, bitte die Zeichenfolge im dargestellten Bild in der Eingabemaske eintragen. Nur wenn die Zeichenfolge richtig eingegeben wurde, kann der Kommentar angenommen werden. Bitte beachten, dass Ihr Browser Cookies unterstützen muss, um dieses Verfahren anzuwenden.
CAPTCHA

Umschließende Sterne heben ein Wort hervor (*wort*), per _wort_ kann ein Wort unterstrichen werden.
Standard-Text Smilies wie :-) und ;-) werden zu Bildern konvertiert.
BBCode-Formatierung erlaubt
Gravatar, Twitter, Favatar Autoren-Bilder werden unterstützt.
tweetbackcheck