search

spatie / statamic-responsive-images

Responsive images for Statamic 3
MIT License
99 stars 29 forks source link

GraphQL Images producing too much data #188

Closed bobevsky closed 1 year ago

bobevsky commented 1 year ago

Bug description

I tested out the GraphQL plugin and found out that the srcSetWebp / srcSet / placeholder are producing way too much data.

Consider these scenarios:

  1. I am getting the srcSetWebp and also placeholder. If i get both of those, the page data for my page is 370kb. (huge)
  2. If i get the srcSetWebp only and remove the placeholders, the page data is 244kb (126kb just for placeholders that are appearing like for a split second while the image is loading)
  3. If i remove both srcSetWebp and also placeholder my page data is 56kb (ridiculous how much data these images produce) and how much they slow the pages.

Now, all of my projects are with headless CMS and Nextjs and for them to be loaded with images it's extremely slow sometimes.

All of that data is because the long characters that srcSetWebp / srcSet / placeholder are generating. What can we do about that?

How to reproduce

Just execute 1 graphQL query on any image using the srcSetWebp / srcSet / placeholder and you will get extremely long strings which produce way too much data.

Logs

No response

Environment

Environment
Application Name: Statamic
Laravel Version: 9.43.0
PHP Version: 8.1.13
Composer Version: 2.4.4

Statamic
Addons: 12
Antlers: regex
Stache Watcher: Enabled
Static Caching: Disabled
Version: 3.3.61 PRO

Installation

Fresh statamic/statamic site via CLI

Antlers Parser

regex (default)

Additional details

No response

ncla commented 1 year ago

When you are referencing file size, does that mean it is the total size of the string length?

Can you upload a sample output?

bobevsky commented 1 year ago

@ncla yes, the size of the NEXT_DATA actually which is the size of the entire page (reference)

I am uploading the 3 files for the 3 scenarios:

  1. data with srcSetWebp and placeholder data-with-placeholder-and-srcSetWebp.txt

  2. data with srcSetWebp and NO placeholder data-with-srcSetWebp-only.txt

  3. data with no images at all data-without-images.txt

ncla commented 1 year ago

I checked out the first file and it looks like it is working as intended. Yeah, JSON might be quite big but you have multiple usages of responsive images in the page builder.

Placeholder images are inlined as a string which naturally takes space.

Then there are the multiple widths generated that you may or may not need in such high resolutions. You have such widths such as 2882px wide, the maximum is determined by the original asset dimensions. You can set a maximum generated width cap with glide:width parameter. https://github.com/spatie/statamic-responsive-images#glide-parameters Maybe that helps bring down the total size even more.

Closing this issue as this is not really a bug.

ncla commented 1 year ago

You might see some additional total string reduction in future. I figured that we are passing widths and heights to Glide with float numbers, when Glide and pixels only work in integer values (you can pass floats, but it will force converted to integer in Glide). So values like 233.88235294118 would become 234. This will cleanup the output significantly.