Like you correctly write on your example page, the optimal (or minimal, dependent on device) image size for mobile device should be at least the monitor width (320 px width).

Thumbnails should be, i would say, like a one third of the mobile monitor width, but after double tap on mobile screen the image should get the monitor width, not bigger, not smaller.

i would use here something like media queries and load different image for each monitor width. Here are some insightful pages:

• https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
• https://timkadlec.com/2012/04/media-query-asset-downloading-results/

Like you correctly write on your example page, the optimal (or minimal, dependent on device) image size for mobile device should be at least the monitor width (320 px width).

Thumbnails should be, i would say, like a one third of the mobile monitor width, but after double tap on mobile screen the image should get the monitor width, not bigger, not smaller.

i would use here something like media queries and load different image for each monitor width, like

/* For width smaller than 400px: */

    body {
        background-image: url('img_smallflower.jpg'); 
    }
    
    /* For width 400px and larger: */
    @media only screen and (min-width: 400px) {
        body { 
            background-image: url('img_flowers.jpg'); 
        }
    }

Here are some insightful pages:

• https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
• http://cssmediaqueries.com/
• https://timkadlec.com/2012/04/media-query-asset-downloading-results/