Processing images of goods for the site, how to implement it correctly?

Question

Yii

Good day to all!
Beginner php developer, now I am writing a simple online store.
The question of such a plan is how to implement the correct competent display of product images on the site?
This refers to the dimensions of the images, because all the uploaded images of the goods should be the same (in terms of size proportions) in order for them to be correctly displayed on the site.
But what if the site owner attaches an image of the wrong proportion to the product? Then on the site such an image may not be displayed correctly, for example, it will be larger than the others, and because of this, the overall appearance of the site will deteriorate.
This problem can be solved in different ways:
For example, set certain sizes and borders of the image in CSS styles. In this case, all images will be of the same size and will not break the look of the site, but the images that are NOT proportional will be clumsy (stretched or compressed);
The next way, for example, is to adjust the image to the desired proportions using PHP tools at the stage of uploading the image to the server, for example, stupidly crop it. The method is tempting, but the problem is that in this case, you can cut off an important part of the product image.
And one more way to indicate to the future site owner that images of strictly defined sizes should be uploaded.
So I would like to ask which of the methods is the most optimal, and if you have any other options, better suggest them, please, I will be very happy :)
ps I am writing in yii2, so if you can tell me the extensions that are useful for this problem

Answer 1

Combine all three ways together!
1. As a safety net, set the image sizes in css and have it crop them.
2. Keep the original file. And already from this original, generate cropped copies for different parts of the site:
- For the basket you need 50x50px
- For the admin panel 100x100px
- For the list of goods 300x400px
- To view the goods 1000x1000px and also with a watermark .
In this case, you divide the image folders into two:
- original (original files)
- cache (generated from the original to the desired size).
In the future, you can simply delete the cache folder and generate new ones according to the desired size from the originals of the original folder without fear of deleting the original and fear of losing the original by making a mistake when cropping.
Saving the original will still help in the future... For example, if the layout changes and you need to recreate the files for other sizes.
Yii has a wonderful library for this , which implements this approach.
Example setup:

public function behaviors(): array
    {
        return [
            [
                'class' => ImageUploadBehavior::className(),
                'attribute' => 'photo',
                'createThumbsOnRequest' => true, //Создавать при запросе (если файлы из cache удалить, то они снова сгенерируются под новым размерам указаных ниже)
                'filePath' => '@staticRoot/origin/posts/.',
                'fileUrl' => '@static/origin/posts/.',
                'thumbPath' => '@staticRoot/cache/posts/_.',
                'thumbUrl' => '@static/cache/posts/_.',
                'thumbs' => [
                    'admin' => ['width' => 100, 'height' => 70],
                    'thumb' => ['width' => 640, 'height' => 480],
                    'blog_list' => ['width' => 1000, 'height' => 150],
                    'widget_list' => ['width' => 228, 'height' => 228],
                    'origin' => ['processor' => [new WaterMarker(1024, 768, '@frontend/web/image/logo.png'), 'process']],
                ],
            ],
        ];
    }

You can also do this approach with your own written library. But the approach is quite good and logical. I would put more emphasis on it than on the other points.
3. It is better not to warn what will be cropped, but at the time of loading on js, show how the image will look on all types of layout. But you can just write.
In general, this is an ideal option. You can use the simplest option and work with a simple and convenient . Or any other popular one written in pure php. You decide)