...

View Full Version : How to make a thumbnail?



MrTIMarshall
11-02-2012, 02:37 AM
Hello,

I'm fairly new to Javascript and would like to know how to make a basic thumbnail, basic as in I can understand what the language is doing and so I can replicate and use in the future.

I have images of different sizes and therefore I would like the thumbnails to not only resize, but to crop leaving the center.

I have looked around and have found things that will do, however I've not been able to edit them to do exactly what I would like to do whereas I've not understood the Javascript/JQuery which has been used due to either being new or they implement things I don't want as I want to build this up and call it my own...

I do work best by being thrown in at the deep end so to speak and it might be due to the time it currently is and I need sleep, however I just can't get things exact or strip out things I don't need.

Thank you for any help and/or advice!

Best Regards,
Tim

Old Pedant
11-02-2012, 02:48 AM
There is only one GOOD way to make thumbnails: Use an image editing program. Photoshop, Photoshop Elements, or (if you are cheap like me) GIMP [free download].

Why? Because if you have many thumbnails on a page, and if each one is "cropped" from some huge image by (example) just shrinking the size in CSS and use overflow: hidden; to hide parts of them, then for each one the browser must download the *ENTIRE* large image from your site before it can even begin the shrinking and cropping process.

Typically, my web-page sized images need between 200KB and 400KB each. (Images off my camera are 2MB to 4MB!)

If I wanted, say, 25 thumbnails on a page and I didn't use a photo editing program to create them, my user would have to download 5MB to 10MB (if I used 200KB to 400KB images) or 50MB to 100MB (if I used from-the-camera images).

HOLY BANDWIDTH, BATMAN!

SLOW SLOW SLOW. I soon wouldn't have any vistors. And my ISP might want to start charging me for extra bandwidth.

Whereas, if I use a photo editing program, my thumbnails run from TEN TO TWENTY KB! Even 25 of them will mean no more 500KB total download for the page to display.

So... Yes, you can use CSS (don't need JavaScript) to shrink and crop images. But it's an utterly crappy way to do it.

MrTIMarshall
11-02-2012, 11:50 AM
Thank you Old Pedant, I'll use my Photoshop to make the image thumbs as I now have a better understanding!

Best Regards,
Tim

VIPStephan
11-02-2012, 11:55 AM
There are some server side scripts that can do image manipulation on the server before the images are sent to the browser. You might wanna look into that if you need an uncomplicated way to shrink/crop many images regularly.

Old Pedant
11-02-2012, 07:47 PM
There are some server side scripts that can do image manipulation on the server before the images are sent to the browser. You might wanna look into that if you need an uncomplicated way to shrink/crop many images regularly.

Yes, but this means that you have to resize the images each time. So now you put a larger load on the server for no good reason.

A reasonable implementation, though, would be to use a DB table to keep track of which images you have ALREADY resized in this way. If an image has not yet been resized, you do so right then and save the resized image in your /thumbnails directory and mark it as resized in the DB.

Or another way: Use 404 error handling. If a request for /thumbnails/image47.jpg comes in and the file is not found, have your 404 error handler find /images/image47.jpg, use the server side code to create the thumbnail, store it in the /thumbnails directory. and then redirect back to the thumbnail so the client-side code isn't even aware this has all happened.

However... Neither of the above allow you to custom crop the large image when creating the thumbnail. All they can do is shrink (and possible crop to a square image or whatever) in some generic way.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum