4

I’ve been thinking a while about the best solution and as much as I read I get more and more confused. There are a lot of different libraries and helpers (most of them are outdated or for CI 1.x) and I really need your help.

I have a custom CMS based on CodeIgniter 2.1.3, news site that has about 40-50 images on the home page, but 80% of them are really small thumbnails in 3 different sizes and the other 20% of the images on the home page are in 2 sizes + for the inner pages when I list the news from a category there is 1 size of thumbnails. So in total I will need the original image for the news story, + 5-6 thumbnails sizes for the home page.

What’s the smartest way to deal with this? There will be let’s say 10-50 new news per day.

  1. Is it still better to create 5-6 thumbnails per image during the upload?
  2. What about the method “on the fly”? I’m more into this method, as I read, only the first visitor will call the library/helper to generate the thumbnails, and for the others the thumbnails will be already created so it won’t waste CPU. What about this method? Is it good practice?

What caching techniques I should use for these what I need?

Also I forgot to ask, how the other CMS system deal with generating the thumbnails? I mean about Wordpress, Drupal, Joomla, etc.

Do they store predefined sizes or generate them on the fly?

I guess their logic should be the best, or maybe not, but I want to implement something smart in my CodeIgniter CMS.

I didn’t mention, but I think it’s not important to this, I use Grocery CRUD for the admin panel.

Any help is appreciated.

MarkC
  • 179
  • 1
  • 4
  • 13

3 Answers3

2

Your best bet is to create images on the fly + use CDN like Amazon Cloudfront to cache the resized versions of your source image.

I’ve been using CodeIgniter for a number of years to build websites where lots of different sizes of images are used throughout the website. At the beginning I used to create every size needed out of the original image during the upload process (could easily end up with more than 5 thumbnails). This proved to be delivering the best performance – whenever you need an image of the certain size you just include it with no additional PHP processing. However I noticed that I end up with a huge number of images on the server, where the older ones may not even be used that often (e.g.: articles older than a year). Plus developing this way takes longer.

Then I started creating images on the fly, firstly using 3rd party libraries and later developed my own interface for CodeIgniter. This saves a lot of time, because during the upload process you save an original version of the image not worrying about resized versions. When displaying an image in the front end, all you normally need to do is to pass certain dimensions of the image required. Doing this way, not only you can get 5-6 versions of the image, but as many as you need. Also that’s a solution for the future when you redesign your website where the different sized images might be needed! What would you do when none of your 5 thumbnail options are no longer valid and you need different sizes?

You’re right, resizing an image on the fly can really be CPU consuming operation (especially when the large images are involved), therefore caching is a must. You can cache images right on your server or get CDN on top of that. To keep the server tidy I normally run a cron job to delete on-the-fly images older than let's say a week. That saves space + doesn't cause harm - whenever image is needed to display, it'll just get recreated.

Aidas
  • 1,213
  • 2
  • 10
  • 16
  • This is exactly why I'm more into the method "on the fly", so now please tell me what is the best way to do that and how to do that, which library to use, how to use it, etc. – MarkC Nov 10 '12 at 14:33
  • You can play around with this: http://phpthumb.sourceforge.net/. However, I found it to be quite a heavy library and it could cause a bit of processing overhead. I am not aware of publicly available onthefly libraries specifically for CodeIgniter and I have written my own. Message me if you want to have a look at it. Otherwise you can look up for libraries for native PHP, not specifically for CI; they should be easy integratable. – Aidas Nov 10 '12 at 15:03
  • I linked to a lib specifically for CI below – stef Nov 10 '12 at 20:36
  • Hmmmm, for now I implemented this solution. As I said I'm using Grocery CRUD, so I'm generating thumbnails after the upload using Image_moo library http://www.grocerycrud.com/documentation/options_functions/callback_after_upload $this->image_moo->load($file_uploaded)->set_jpeg_quality(90) ->resize(350,210)->save($new1,true) ->resize(280,168)->save($new2,true) ->resize(196,118)->save($new3,true) ->resize(120,72)->save($new4,true) ->resize(100,60)->save($new5,true); – MarkC Nov 11 '12 at 09:37
  • What do you think about Image_moo library? Is there any better library? The jpeg images are ok, but the size od png images is not really reduced. P.S. This solution is ok for now as it wouldn't spend CPU/RAM at all because they will be stored on the file system. But the question is, would the server became slower because of the big number of files? I divided them in different folders, but I don't know if the system will become slow if there are let's say 10.000 images in one folder and the image have to be loaded from that specific folder? – MarkC Nov 11 '12 at 09:39
2

Check out timthumb, it's a script that resizes images on the fly and stores them in a cache. It's a simple as including an image tag with parameters in the URL.

ALso check this link which looks promising http://www.jenssegers.be/blog/31/Codeigniter-resizing-and-cropping-images-on-the-fly-continued

stef
  • 26,771
  • 31
  • 105
  • 143
0

I love the way Drupal manage this. In Drupal 6 there was a module called imagecache (now is in core in Drupal 7, but functionality is very similar), which basically stores presets for images (image sizes, transformations, effects...) and when the visitor ask for an image the module generate different images based on presets and serve this images. This way you upload an image but have different images for different purposes.

The module has a really useful feature, if you want to change one preset, you can "flush" all the images related with that preset, so the visitors can see the changes.

Of course there are many other modules in Drupal related to imagecache or image styles, that add other effects like watermarks...

More information:

m4t1t0
  • 5,669
  • 3
  • 22
  • 30