CODEWITHSUNDEEP
jqueryhtmlcss
user198222
user198222

Reputation: 85

How to Embed thumbnails in images

I have a bunch of 200X120 thumbnails and a bunch of high quality images, Apparently when I just resize the thumbnails with img size the quality suffers, so we are loading two images from the server the image thumbnail and the actual, I am just trying to optimize my site for speed a little saw someone mention embedding thumbs in the image, does anyone know a program that does that? Is this the best way to achieve my goal of high quality thumbnails?

Upvotes: 3

Views: 768

Answers (3)

bob-the-destroyer
bob-the-destroyer

Reputation: 3154

Google "Exif". There's hundreds of applications that read/write exif attributes, including ones that I'm sure embed and extract the thumbnail image attribute. Or you can roll your own with I'm sure just about any language and the right plugin.

When you're serving thumbnails, you may opt to instead programmatically extract this thumbnail attribute from the image and serve that, rather than the whole image file shrunk after delivery using html styling.

Upvotes: 0

animuson
animuson

Reputation: 54729

I don't believe you can embed a thumbnail into the image file. Similar things are available for other media, such as MP3 files, where you can attach an image for the album cover, etc. Even if you could, there are no functions you can use to differ between the actual image and the thumbnail image.

Also, do not resize large HD images into thumbnails within the HTML. The client still has to download the entire file even to resize it. If there is a grid of 9 images, that's 9 very large HD images they have to download when they could have downloaded smaller thumbnails of those images instead.

Upvotes: 2

Robusto
Robusto

Reputation: 31883

Is this a problem only in IE6 and IE7? Modern browsers use bicubic resampling, so you should be able to resize at the level with no consequences. If using IE6 or IE7, check this blog entry for a decent solution.

Basically, it involves using the style

img {
  -ms-interpolation-mode:bicubic;
}

in those MS browsers.

Upvotes: 2

Related Questions