An efficient way to render responsive photos?

Question

PHP

Good afternoon,
the photographer just needed to make a small adaptive site, as it caught my eye (in the article on Habré between times) such a solution is adaptive-images.com
JS, which even connects to the finished site and first determines the user's screen size, then itself compresses the photo and gives the user the desired size (there is even a retina definition).
As far as I understand, only the original is stored, and with each request, the script processes the photo and returns it.
Before that, I thought about such an implementation ( logic, I don’t know how to do it yet, I would google it, how it comes to), so that when uploading a photo to the server, several sizes are immediately created and with the same JS to slip the necessary options to fit the screen. With loading, it is approximately clear how php cms galleries create a thumbnail, and there are several sizes. I think it’s easy to find ready-made solutions, the question is different, although tips are welcome; )
Attention, question! What Where When.mp3
The first option, in theory, loads the server more, but with the expected number of visitors, this is not a problem. Looks easier. What do you think, is it a good way to process a certain number of photos (say, a couple of dozen large photos on average) each time, or is it better at the adding stage, and this method is more suitable for parts of the site (well, for example, one large photo background ).

Answer 1

Rolled up a sheet, and get into the adaptive-images.com code? All images are cached. The cache is created on the first request, however, which is not good. But less of a headache.