The automatic display of large images should be avoided, even when they are relevant, because they can take too long to download and display completely. Instead, use thumbnails to introduce the images. If users then want to see the larger versions, they can click as required. For a thumbnail to be easy to be interpreted and therefore be effective for making a choice, it needs to contain useful information. However, this can sometimes be difficult to achieve, because neither of the two methods commonly used for creating thumbnails (i.e., scaling and cropping) produces completely satisfactory result. Scaling produces the smaller version of an entire picture but may be too crowded to convey clear and useful meaning, while cropping produces a clearer and more detailed image but with too many useful parts cropped off. The recommended approach, called relevance- enhanced image reduction, is to combine the two methods, so that the thumbnail is clear and also includes enough contexts to be meaningful. A more specific recommendation by Jakob Nielsen is that in order to produce a thumbnail that is 10% of the original image, the image is first cropped to 32% of its original size and then the result is scaled down to 32% of itself. So, assuming that the original image is 100 x 100 px, then cropping it to 32% gives 32 x 32 px (i.e., [32/100]* 100 px), and scaling this down to 32% of itself gives an image that is roughly 10 x 10 px (i.e., [32/100]*32 px).
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.