Best way for storing/viewing different image dimension scenarios in a web page?

Question

I have a pages with different post/placement types. This placements having different dimension of images. Same posts, different image dimensions.

An example;

Homepage :

Featured              600*400

Left side of featured 300*200

Bottom of featured    200*150

Other articles        150*100

Article Detail :

Detail page           600*400

Maybe different sizes for category views...

Which way is the best way for showing this images ?

• Resizing and storing image for all possible dimensions

Pros : We can use articles in all homepage places

Cons : This way uses more storage.

• Resizing and storing image for certain dimensions (If this example, we place this article to "Left side of featured" and we need to resize to 300*200 and 600*400)

Pros : Less storage use. Less files. Short process time.

Cons : When we want to change place of article, we need to re-process original image for new dimensions. We must map placements and dimensions. Also re-processing time needed.

• Storing original image, resizing and showing on-the-fly where we need (cache images to folder or different caching adapter, with a script - in this example i will write a php class for this, after i'll cache this files to a folder (garbage collection needed) or Redis (with expired cache))

Pros : We can use articles in all homepage places, images resized if you need to show.

Cons : Browser hits to script for showing image. Not to file. It may increases CPU usage and more slower than other ways.

Answer 1

Process once, show multiple times. Storage is incredibly cheap and shouldn't be an implication when developing small web apps anymore.