Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Nov 2010
    Posts
    390
    Thanks
    48
    Thanked 1 Time in 1 Post

    How to make a thumbnail?

    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

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,458
    Thanks
    76
    Thanked 4,373 Times in 4,338 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    MrTIMarshall (11-02-2012)

  • #3
    Regular Coder
    Join Date
    Nov 2010
    Posts
    390
    Thanks
    48
    Thanked 1 Time in 1 Post
    Thank you Old Pedant, I'll use my Photoshop to make the image thumbs as I now have a better understanding!

    Best Regards,
    Tim

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,666
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    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.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,458
    Thanks
    76
    Thanked 4,373 Times in 4,338 Posts
    Quote Originally Posted by VIPStephan View Post
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •