Hello,

Based on my experience in web development, HTML page designs for every website may have different < img > tags showing the same image in different sizes. i.e: the website's main page might show the image in 500*500, the listing page might show it in 200*150 and other sections of the website will use different sizes. As you can see the ratios of the images to be displayed to the user are different and therefore will cause a problem in having the image stretched, pixelated and/or other quality problems.

How i currently handle this issue is by using a jQuery cropping tool to make the user select the area to crop the thumbnail from. the cropped image is then resized using imagick to fit every position in the page design. However, although i can force the user to crop an image based on a pre-defined ratio, the HTML will still contain image placeholders which require a different ratio for its thumbnail. So for every image, i will have to force the user to crop the uploaded image based on every possible ratio my site requires.

I don't think this is a friendly solution, how would you do it? is there a standard/recommended ratio for the web?

Thanks