ein Blog übers Web, IT, Linux, Techiekram...

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.

Noch keine Kommentare

  • Joscha
    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
    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

Gravatar, Twitter, Favatar Autoren-Bilder werden unterstützt.
Die angegebene E-Mail-Adresse wird nicht dargestellt, sondern nur für eventuelle Benachrichtigungen verwendet.
Um einen Kommentar hinterlassen zu können, erhalten Sie nach dem Kommentieren eine E-Mail mit Aktivierungslink an ihre angegebene Adresse.
BBCode-Formatierung erlaubt
Standard-Text Smilies wie :-) und ;-) werden zu Bildern konvertiert.