Image Thumbnail links

[Travis]

I wasn't sure where to post exactly.

I was wondering if there is a best practice, when it comes to link a thumbnail image to a page.

Example, a thumbnail image links to page, where there is a bigger representation of the image, and text going with.

What is best (if it makes a difference)

1. <a href="xxx"><img src="xxx" ...></a>

2. <a href="xxx"><img src="xxx" ...></a><br>Tile

3. <a href="xxx"><img src="xxx" ...><br>Tile</a>

4. <img src="xxx" ...><br><a href="xxx">Tile</a>

[not2easy]

Best practice as I see it is #3 - but I cant tell if those "...." ellipses include any alt text for the image. That would be important. I've rarely seen a link that includes an image/thumbnail that is not a clickable option. I also don't see the <img closing tag "... />" though that may have been part of the ... as well.

[Travis]

Thank you.

I cant tell if those "...." ellipses include any alt text for the image.

yes, "width", "height", "atl" and "srcset"

<img closing tag "... />"

"/>" is for XML , isn't it? In HTML (5) this is ">" only, no?

[not2easy]

I mentioned it only because no Doctype was mentioned, in case you needed it. The close tag is not required for HTML5.

Actually if this is for HTML5 and you're using "srcset" you may prefer to use the <picture> element. That makes for less repitition in the code. For example:

 <picture>
 <source media="(min-width: 680px)" srcset="big-widget.jpg">
 <source media="(min-width: 460px)" srcset="small-widget.jpg">
 <img src="widget.jpg" alt="Widgets" style="width:auto;">
</picture>

[lucy24]

5. <a class = "plain" href="xxx"><img src="xxx" ...><br>Tile</a>

a.plain {text-decoration: none;}

[Travis]

Thank you.

and to link a thumbnail to the bigger version of the image (not page).

<a class = "plain" href="big.jpg"><img src="small.jpg" ...><br>Tile</a> 

?

[lucy24]

If you're linking to an image rather than a page, this is the rare case where
target = "_blank"
in the <a href> statement is appropriate, because there will otherwise be no in-page means for the human user to get back. I do this when linking to image enlargements.

[keyplyr]

The problem with thumbnails IMO is they will often get indexed because they are an image file.

I circumvent that and only use one full size image, then size it to a thumbnail using a script. So I have one image tag, with one image file, with 2 actions leading to the full size image.

<a target="new" href="/directory/image-file.jpg" title="XX" class="XX" rel="XX"><img alt="XX" src="../directory/resize.php?path=../directory/image-file.jpg" class="XX"></a>

resize.php

<?
$thumbsize = 100;
$imagesource = $_GET['path'];
$filetype = substr($imagesource,strlen($imagesource)-4,4);
$filetype = strtolower($filetype);
if($filetype == ".gif") $image = imagecreatefromgif($imagesource);
if($filetype == ".jpg") $image = imagecreatefromjpeg($imagesource);
if($filetype == ".png") $image = imagecreatefrompng($imagesource);
if (!$image) die();
$imagewidth = imagesx($image);
$imageheight = imagesy($image);
if ($imagewidth >= $imageheight) {
 $thumbwidth = $thumbsize;
 $factor = $thumbsize / $imagewidth;
 $thumbheight = $imageheight * $factor;
}
if ($imageheight >= $imagewidth) {
 $thumbheight = $thumbsize;
 $factor = $thumbsize / $imageheight;
 $thumbwidth = $imagewidth * $factor;
}
$thumb = imagecreatetruecolor($thumbwidth,$thumbheight);
imagecopyresized($thumb, $image, 0, 0, 0, 0, $thumbwidth, $thumbheight, $imagewidth, $imageheight);
imagejpeg($thumb);
imagedestroy($image);
imagedestroy($thumb);
?> 

Change thumbsize to whatever you like. This is the largest side.

This also serves to preload the full size image making it fast.

[Travis]

Thank you all.

[Pavithraramesh]

I think it would be better to position the text beneath the image.

You can also think about showing the text on mouse over. Here, text on image would be nice.

Instead of using the <br> tag, try making the img a block level element and bring the text below. Then use either padding or margin to give necessary space.

[keyplyr]

Hello Pavithraramesh and welcome to WebmasterWorld [webmasterworld.com]

[Travis]

Thank you Pavithraramesh.

[phranque]

resize.php

i would make this minor change:

if ($imagewidth > $imageheight) {
 $thumbwidth = $thumbsize;
 $factor = $thumbsize / $imagewidth;
 $thumbheight = $imageheight * $factor;
} elseif ($imageheight > $imagewidth) {
 $thumbheight = $thumbsize;
 $factor = $thumbsize / $imageheight;
 $thumbwidth = $imagewidth * $factor;
} else {
 $thumbwidth = $thumbsize;
 $thumbheight = $thumbsize;
}

then if this script gets worked enough i would look for a way to cache the generated thumbnails and serve those when available instead of creating them on the fly for each request.

This also serves to preload the full size image making it fast.

do you mean a browser preload?
i'm not sure how that would happen if the script is being requested (on the thumbnail page) rather than the image url.

[keyplyr]

They are cached.

Because the image needs only to be requested once.

[phranque]

I don't see a request for the large image coming from the browser in your scenario until the link is clicked.

[tangor]

The thumbnail can be autoscaled from the original image contained by a thumbdiv. Click goes to larger div, image rescales. For a large page of thumbs not sure how the user will feel taking all those full size images in bandwidth for pics they might not click, but this works a treat for three to five content related images in an article.

Thumbnails, on the other hand, load fast and are easy on the bandwidth/time to load.