Resizing images on the fly or saving different sizes to disk?

Question

I am creating a web application that will eventually contain many images. These images must be displayed in different formats throughout the site. What are the pros and cons of the two solutions:

• Saving different versions of the image when they are downloaded (for example, Thumb, small, medium, large, verylarge)
• Resize image by URL. / Contents / Image / 1? Height = 300

What do you think?

Edit: It was very difficult for me to accept one answer differently, so for those who read this q / a, do not rush to read both answers, because the accepted answer was chosen by coin transfer :) They are both equally good.

Answer 1

Inevitably, anything that provides dynamic dimensions based on a parameter will allow the end user to invoke a reasonable ("more than usual" number of CPU operations on the server, which may be a problem for you depending on what you are trying to achieve. Caching generated images like was proposed by Oliver, will help to avoid performing the same work twice, and must necessarily be part of any dynamic solution.

I think you need to think about how important dynamic size is. In each case, I was dealing with predefined sizes (large, small, medium, large, very large) worked fine. The same caching considerations are used, but there are much fewer possibilities for creating a large number of images. I usually created different image sizes when loading the image, but a solution for creating on demand, if not already, would be equally good.

Answer 2

If I look at Wikimedia, they take some combination.

You can determine the size using the parameter in the first step, which they look at, if such a file exists, and if it is not created on the fly and saves it for the next request.

Update

After reading your comment.

This question arises almost every time: am I optimizing speed or size? This is a decision that you must make for yourself and your specific problem.

Perhaps you can implement some additional checks, for example, store them on disk if a specific size is requested more than x times or delete all saved images that have not received a request for a period of time y.