Srcset, thumb generated but with wrong (original) size

Kirby 3 Solved ✅
1

While using srcset, I am seeing thumbs that are being created, and include the thumb size in their filename such as 06-filename_550x.jpg, but where file size is actually original size… like 6000 or 8000, and not 550, or 1280 or whatever the filename says. This results in large images being loaded:

Captura de pantalla 2022-08-03 a las 19.14.53

I am seeing this with a lot of images, but not all of them.

This is localhost, and I am using the default driver, on kirby 3.7.2.1, recently updated, I was on 6.1.1 with the same problem.

In config I declare srcset like:

'thumbs' => [
    'srcsets' => [
        'home' => [375, 720, 960, 1280],
        'works' => [375, 720, 960, 1280, 1600, 2300],
        'shows' => [375, 550, 720, 960, 1280, 1600, 1800, 2300]
    ]
]

…then use it like:

<img 
    class="lazyload <?= $file->isLast($showFiles) ? 'last' : ''?>" 
    data-srcset="<?= $file->srcset("shows") ?>" 
    <?php if ($orientation == 'landscape') : ?> 
        data-sizes=" 
            (max-width: 375px) 960px, 
            (max-width: 1440px) 1280px, 
            (max-width: 1920px) 1280px, 
            (max-width: 2560px) 1800px,
            2300px" 
    <?php else : ?> 
        data-sizes=" 
            (max-width: 375px) 375px, 
            (max-width: 1440px) 550px, 
            (max-width: 1920px) 550px, 
            (max-width: 2560px) 960px,
            1280px" 
    <?php endif ?>
>

…any idea what may be happening ?

Thank you

2

Ive seen this before. Do you actually have GD installed locally? And your image filesizes are pretty large - have you configured enough RAM etc in php.ini

3

Say the system runs out of memory. Would that explain the mismatch between declared size and actual size ?

Thanks

4

Seems to be the case, yes. Thank you

5

You might want to consider if it makes sense to upload huge images that you will never need. After all, uploading and processing such huge images uses resources. Even if it doesn’t seem much considering a single image, all these uselessly uploaded images add up worldwide.

6

that is a very good call, @texnixe

Do you perhaps have a good article on the subject? On max ul file size, and a strategy (user controlled size? and/or resize on ul?) that is future proof, considering the increases in pixel ratio etc

thank you

7

You could start out with this

Other than its a good to optimise before uploading if you can. This is a good drag and drop tool for that. ImageOptim — better Save for Web

If you have Python you can use a tool like optmize-images to recursivley rip through the content folder to optmise images

1 Like
8

Ideally, users wouldn’t even upload huge images, but second best would be to resize after upload. Just found this which might be helpful: Best image sizes for websites in 2022: tools, speed testing & FAQ

1 Like
9

Thanks. It is helpful, but only speaks about images on websites and their optimization. It does not speak about recommended original size for uploads, with a ‘future-proof’ mindset, both from a technical and ecological point of view.

My logic is that, although uncommon, 8K computer monitors already exist, those are… well, ±8k pixels wide. I don’t know about the market penetration of ‘retina’ and 4k monitors, but I assume this is a trend that will be eventually generalized. How long will it take, I don’t know.

If I don’t let the user upload 8k images (or 5k, or 4k) how can I assure her that her heavily-image-based portfolio website will look good when those are generalized?

This is not very ecological tho (so, no future proof). But, perhaps next-gen image formats will help reduce weight while keeping dimensions ?

Thanks

10

That’s a good question, but then again, the question is if it makes sense to create a website with a long-term view. Or if we really want to support such huge images just because of these huge screens. I don’t have an answer to all these question, just worried about all the resources we are using, often unintentionally. And nobody knows what viewing habits will be like in a few years, anyway.

1 Like
11

Its a good point i guess but as somone who builds a alot of image heavy portfolio style sites myself, i find about 2,000px wide works well across desktop and mobile. That gives you plenty of room for srcset rules.

Does the image really need to fill the whole screen? Yes 8K screens exist but often the image is in a smaller portion of the screens size.If you look at screen size statistics, 1920x1080px is still the dominent screen size.

1 Like