Image heavy site, srcset, and disk weight

1

Hello there,

I just encountered a situation where a site weight, in disk, exceeds 10GB, with about 3,67GB in the content folder and 4,8GB in the media folder.

This is an art gallery site, that holds more than 12606 images in the content folder. That is not an up-to-date figure, but should give an idea of the number of images.

I use srcset to display most of these images, with about 6 or 7 different sizes depending on browser width, for example [375, 768, 900, 1440, 1920, 2560]

This is the first time one of the sites I code exceeds such figure, I wonder if there may be something wrong with my srcset approach or something does not add up with the weight of content or media folder.

What do you think? What’s your experience ?

Thank you

2

I honestly think those figures look about right.
Even with a quick rought, calculation you have 12000 images, let’s assume 150kb each which is fairly normal, original + 6 crops that gives you 12600000kb so 12.6gb

So you should expect to have 10+ gb on disk.

1 Like
3

Thank you @manuelmoreale .

May I ask how do you usually approach using srcset ? Does it seem like I use too many sizes to you?

Thanks again

4

Well it depends what you need. There’s no right approach when it comes to src set, it all comes down to what you want to achieve.

In this case, if disk size is a concern, i’d probably use fewer sizes. For example, a 2560px crop is probably not all that necessary because the % of people on huge screens is quite small.

So maybe instead of using 375, 768, 900, 1440, 1920, 2560 you can maybe use only 3 crops that are in between your current sizes so something like 500, 1000, 1600

But again, it all depends on the site’s layout, the audience target and a variety of other factors.

5

Regarding the total disk space used, to me this also seems reasonable given the number of images.

And since in most cases disk space is not a limiting factor, I wouldn’t worry about that too much.

Srcsets are always a compromise between the ideal and what makes the most sense for your use case. For an art gallery, image quality is more important than for a blog, so 6 sizes might make total sense while it would be too much for a blog. And while generating more images uses more resources, you have to set it in relation to the resources needed when an image is displayed at a much larger size than needed.

As @manuelmoreale already wrote above, there is no right or wrong, other than not using srcset and sizes at all :wink: