Huge images are loaded in image/gallery block, thumb/srcset missing

moritzebeling commented 3 years ago

Describe the bug
When working with images and the blocks field, the panel quickly gets overloaded and laggy when there are more than a few large images. The problem seems to be, that the image block preview doesn’t use a reduced thumbnail or srcset, but requests the original file.

With about 10 5MB images, the panel will soon break...

Expected behavior
The image and gallery blocks need to call reduced thumbnails and should use a srcset. This technique is already implemented in other panel image views: https://github.com/getkirby/kirby/blob/3d580d869e44496c8b145835d4bbbbe95e7559d8/panel/src/components/Misc/Image.vue#L15 The same should be applied here:

Or maybe a universal Image component can help? Then this problem would be solved once and for all times.

Kirby Version
3.5.4

Additional context
This once (https://github.com/getkirby/kirby/issues/2488) was also a problem with the files section, but seems to be resolved as of right now.

distantnative commented 3 years ago

Unfortunately, I don't think it's that easy. The preview component receives the values for the fields from the drawer - so also for the file field. Which is the standard value for a file field, in that case for a file field in list layout. The only srcset info included there is for the list view preview.

Rethinking how the previews receive different values, including custom srcset will be not as trivial sadly.

mrflix commented 2 years ago

First time using layout & image blocks to let a client build an image grid and unfortunately ran into this problem: the panel page gets very sluggish because of the lack of srcsets. I advice my clients to upload images that are 6000px wide or more so that I can create srcset sizes for up to 5128px width (iMac Retina in fullscreen). Not a good match in this case 😬

I was hyped when I read that srcsets for image blocks get added with 3.6.1. But it turns out that its only for the gallery block and not the image block. The image block is missing this feature!

stale[bot] commented 2 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

mrflix commented 2 years ago

I think it's a mistake to close this panel-usability issue.

silllli commented 12 months ago

I (and my client who mentioned it) just encountered this problem with the gallery block, a very unresponsive, slow loading panel. The added srcset doesn’t really help since there is no sizes attribute provided. Without a sizes attribute the browser assumes the size to be 100vw which in this case (my display resolution) means it will download the full version as the next matching size, which are several MB just to be displayed a few pixels wide.

(Sorry, just commented in the PR but didn’t see this related issue.)

getkirby / kirby

Huge images are loaded in image/gallery block, thumb/srcset missing #3275