Render image on the fly vs. saving thumbnails

[eluser]obobo[/eluser]
I am working on a site that produces a lot of different sized thumbnails of user uploaded images. I haven't finalized the sizes yet, and new ones are bound to be introduced after the site launches.

Does it make sense in this scenario to render thumbnails on the fly every time they are displayed?
(ie: don't save them to the server, but create a thumbnail every time the image is displayed)

I've heard this approach defended by the idea that rendering every time on the fly is fine because it doesn't take up a lot of server time. But the script i've written to resize and send the thumb to the browser takes at best about .01 seconds to run. So on a page with 10 thumbnails i'm adding an extra second of server time to every page ... which seems significant enough to me when the original page only takes about .005 seconds to execute.

Rendering every time on the fly is convenient, but i'm not sure the convenience is worth the server time, or the fact that the images don't get cached on the user's computer.

I think i've answered my own question,
but any advice or insights appreciated.

[eluser]GSV Sleeper Service[/eluser]
I would render them on the fly if they don't exist, once you've created them once, just serving them up as images will be much more efficient.

[eluser]Nick Husher[/eluser]
Generally, you want to save thumbnails to the server if you plan to use them multiple times; it's computationally expensive in a production environment (if more than a handful of people are using the site at once) to do image transformations for every page load.

If you're worried about consuming too much disk space, you could come up with some sort of caching algorithm that prunes off older thumbnails if they haven't been viewed in a certain interval.

[eluser]Michael Ekoka[/eluser]
Nowadays, hard drive space is so cheap that it makes little sense not to cache. Caching strategies are actually key to many optimization techniques today.

[eluser]missionsix[/eluser]
I'm doing something similar on my site where User Uploaded Images are being dynamically resized. I've implemented both types of caching, client side, and server side. This saves on a lot of bandwidth as well as cpu cycles.

[eluser]obobo[/eluser]
Thanks for the replies everyone.
I'm going to switch over to storing thumbnails rather than serving them up fresh every time.

Does the following approach make sense:

I'm thinking of creating a helper called thumbs() that would be called within the anchor tags within the view. It would check to see if the right sized thumb exists, create it if it doesn't, and then return the path to the image.

Also, is there any security issues with revealing the path to the user uploaded images (assuming i have permissions set to 755 and not 777)?

[eluser]garymardell[/eluser]
You can always htaccess the folder to stop people accessing it directly and and hotlinking.

[eluser]missionsix[/eluser]

It would check to see if the right sized thumb exists, create it if it doesn’t, and then return the path to the image.

Also, is there any security issues with revealing the path to the user uploaded images (assuming i have permissions set to 755 and not 777)?

This is what I do, but I have a media controller, which serves up images or other media content stored on the server.

An example thumbnail image string would look like this: /media/image/{uniquekey}/?w=250. When an image is called via my media controller it first checks to see if a width or height is set, if not, it does an image pass through and puts the image to the browser. (concealing the stored location).

If a width or height is set, as in my example, then my script first checks if a thumbnail exists for that image & width combination. something like imagename-thumb-250-xxx.jpg would be my thumbnail files. If this file exists, the thumbnail location is sent through the passthrough and the thumb is sent.

And finally, if a w or h is set and the thumbnail does not exist, we create it, store it, and output it.


The best part is, i can conceal my path locations so that no file can be accessed without going through my media controller. If any malicious file were to be uploaded it cannot be executed directly.

[eluser]obobo[/eluser]
missionsix ... that's exactly what i've done in the past, except that i haven't been storing the the thumbs.

Can you give an example of how you are passing the image through to the browser without resizing?
When i tried to do this, i found it was still eating up a lot of processing power on the server.

[eluser]missionsix[/eluser]
[quote author="obobo" date="1208733625"]missionsix ... that's exactly what i've done in the past, except that i haven't been storing the the thumbs.

Can you give an example of how you are passing the image through to the browser without resizing?
When i tried to do this, i found it was still eating up a lot of processing power on the server.[/quote]


Sure, here's my passThrough function. Take note that I have a file class which allows me to access file information such as the mime type, or file size.

Code:

private function passThrough($path = "") {

                /* path could be empty if we're not using a thumbnail to passThrough */
                if(empty($path)) {
                    $path = $this->file->path;
                    header("Content-Type: ". $this->file->mime);
                } else {
                    $this->file = new file($path);
                    header("Content-Type:". $this->file->mime);
                }
                /* open a file handle to the image */
                 if ( !($fp = fopen($path ,"rb" )) ) {
                        print ( "Could not open {$path} - safe mode?" );
                 } else {
                        /* read image file and print contents, in small chunks */
                        while (!feof($fp))  {
                                print fread ( $fp , 4096 );
                                flush ();
                        }
                        fclose ( $fp );
                 }
        exit;
    }

Hope that helps.

The other thing I do when thumbnails are created, or read, is to insert / update a timestamp in the image_thumbs table in my database. That way, i can potentially run a cron job to remove thumbnails not accessed over a certain length of time.