Filename not used when passing glide:width to directive

[stuartcusackie]

Bug description

The original filename is not used if you set glide:width within the directive, but setting max_width in the config doesn't affect anything. My concern is that filename's still seem like an important SEO factor. My client spends some time renaming files for these SEO benefits.

CASE 1 (This is fine - original filename used) <img src="https://ams3.digitaloceanspaces.com/mywebsite/images/clubs/club-gym-1.jpg" width="2048" height="3072" data-statamic-responsive-images="">

Code: @responsive($image, ['ratio' => '3/4'])

CASE 2 (Manipulated image used for src) <img src="/img/asset/aW1hZ2VzL2NsdWJzL3Jvd2Vycy1hdC13ZXN0LXdvb2QtZ3ltLWNsb250YXJmLWR1Ymxpbi0zLmpwZw==?w=1500&amp;h=1125&amp;s=c13783354600dc18b374d2184c63c788" width="1500" height="1125" data-statamic-responsive-images="">

Code: @responsive($image, ['ratio' => '3/4', 'glide:width' => 1500])

Can this be improved or am I better off not using 'glide:width'?

Thanks!

How to reproduce

Make @responsive calls as described above

Logs

No response

Environment

Statamic Version: 3.3.64
spatie/statamic-responsive-images: 2.15.1

Installation

Fresh statamic/statamic site via CLI

Antlers Parser

regex (default)

Additional details

No response

[ncla]

Please see this issue: https://github.com/statamic/cms/issues/2814

If Glide is being used (max width applied, in this case) then the URL will go through Glide, which encodes the filename.

As a workaround, for img src property you can specify original asset link. You have access to $asset variable in Blade template which you can use like this:

<img
src="{{ $asset['url'] }}"
...
>

Closing this issue as this is not really an issue with this addon.

[stuartcusackie]

Ah, of course. My files only get renamed if they have to be resized, which is more likely when I set glide:width.

I wonder what the downsides of setting src="{{ $asset['url'] }}" are. Would a massive image cause a performance problem? If not then why isn't this the default? I have run a brief test in Chrome and Edge and it seems that only the required src for the breakpoint is downloaded, but perhaps other browsers aren't so clever.

Also, I wonder if Google is checking the original 'src' (original filename) when determining SEO value, or if it's using the current 'srcset' (base64).

[ncla]

I wonder what the downsides of setting src="{{ $asset['url'] }}" are.

The src in <img> tag will be only ever hit if browser has exhausted <source> tags (e.g. when unsupported format is listed). If you use $asset['url'] then it is the original source image that you have uploaded. This will not respect any max-width, ratio params etc.

I have run a brief test in Chrome and Edge and it seems that only the required src for the breakpoint is downloaded, but perhaps other browsers aren't so clever.

I have got no idea what you are talking about. :sweat_smile:

Also, I wonder if Google is checking the original 'src' (original filename) when determining SEO value, or if it's using the current 'srcset' (base64).

The alt attribute should be sufficient.

[stuartcusackie]

Nevermind! Thanks for the all the info.

I think ultimately statamic needs to solve the filenames on glide manipulated images, both when glide caching is set to true or false. If filenames play any kind of part in SEO, and it seems they do, then website owners are going to want to be able to customise them.