Glide-Tag doesn't base64 encode filenames

[Lampone]

Bug Description

The glide tag currently base64 encodes the filename. I don't really know why it does it, but it is pretty bad from a user and seo perspective. We need an option to turn this behavior off and have the normal filename in the url.

Extra Detail

Google Image best practices: https://support.google.com/webmasters/answer/114016?hl=en

Google uses the URL path as well as the file name to help it understand your images. Consider organizing your image content so that URLs are constructed logically.

Environment

**Statamic version:3.0.20 Pro

**PHP version:7.4.10

Install method (choose one):

• Fresh install from statamic/statamic

[robdekort]

This is what the Glide library does. But since the URL includes the full original filename the negative SEO impacts are none to minimal.

[robdekort]

However personally I’d rather have Glide not do this. Just append the preset name or whatever to the original filename.

[Lampone]

For me the filename is not included, it is replaced with a base64 encoded string of the filename.

Just to clarify it is statamic that does this and not glide:

cms/src/Imaging/GlideUrlBuilder.php

Lines 38 to 52 in 13b70fa

	switch ($this->itemType()) {
	case 'url':
	$path = 'http/'.base64_encode($item);
	break;
	case 'asset':
	$path = 'asset/'.base64_encode($this->item->containerId().'/'.$this->item->path());
	break;
	case 'id':
	$path = 'asset/'.base64_encode(str_replace('::', '/', $this->item));
	break;
	case 'path':
	$path = URL::encode($this->item);
	break;
	default:
	throw new Exception('Cannot build a Glide URL without a URL, path, or asset.');

If there is any way to get the original filename i would be happy to know.

There are 3 potential factors for SEO performance of a image (title, filename/path, alt), eliminiating one of the factors is not what I would call minimal.
It would be nice to have config option to disable this (I guess there is a reason to why this was implemented in the first place)

[robdekort]

I was mistaken who sets the filename. But the full path/url does include the original filename for me. Something like this:

https://site.nl/img/containers/assets/general/filename.png/b453f147a414847b1746aba987251fd6.webp

That doesn’t happen for you?

So that way to me you can still have the correct title, alt and filename/path. Google is smart enough to figure out the relevant keywords from a url like above.

As I said I agree it would be nicer if it just didn’t do this.

[Lampone]

No for me it looks like:
http://example.org/img/asset/c3RhbmRvcnRlL2hlaWxicm9ubi90ZXN0LUJhdW1nYXJ0LW5hY2hoZXIucG5n?w=400&h=400&fit=max&s=b1fe01453100edac8cc1688699d8ab41

<img src="{{ glide:image width="400" height="400" fit="max" }}" >

[robdekort]

That's not good. I suspect you can work around this by serving cached images directly. Can you try this? https://statamic.dev/tags/glide#serving-cached-images-directly

[Lampone]

If the cache is enabled I get the same behavior as @robdekort . That is way better, thank you.

Still hope it gets changed in the future, but with the cache enabled it kinda works for now.

[robdekort]

Glad to hear! It'll make your site faster this way so that's a plus!

[github-actions]

This issue has not had recent activity and has been marked as stale — by me, a robot. Simply reply to keep it open and send me away. If you do nothing, I will close it in a week. I have no feelings, so whatever you do is fine by me.

[robdekort]

I think this is still valid although it's more a FR. Maybe it should be moved there for now? Base encoding the filename regularly causes questions on Discord and I don't think it really serves a purpose. When using glide presets the SEO penalties are minimal, but when using Glide on the fly this definitely hurts. A beter alternative I think would be to slugify the original filename and prepend/append the glide preset name or width + height.

[ahinkle]

Ran into this client request today.

I know it's not 100% intuitive, but what about a config option where we have:

(filename)+(hash).(extension)

e.g.
man-preparing-for-a-fishing-trip.jpg/362f0ebb44098e8ed543c10e90403712.jpg (current)
man-preparing-for-a-fishing-trip.jpg/man-preparing-for-a-fishing-trip-362f0ebb44098e8ed543c10e90403712.jpg (proposed)

I can whip together this PR if someone might find this useful. It would be an "opt-in" to include the filename. My only other thoughts are file name limitations for really long names - given why they are limited to 64 here - we could provide a warning on that.

[stuartcusackie]

So Statamic is responsible for base64 encoding filenames and not glide. It seems this approach is taken to avoid filename length limitations? Perhaps there is a better way beacause this approach produces some awful looking / SEO-unfriendly urls. Limiting / truncating the filename length on upload seems like a better approach.

Here's one example of a non-cached manipulation, I'm sure I could find longer ones:
http://mywebsite.test/img/asset/aW1hZ2VzL2NsdWJzL2hvbXBlLXBhZ2Utd2l0aC1wZXJvc25hbC10cmFpbmVyLWR0LWhlcm8tMTY3NjQ5MTQ2My5qcGc=?fm=webp&q=90&fit=crop-50-45-1&w=1763&h=1058&s=b9ecc0e3ec9ad08d70e523ba99cc01bf

In the Glide documentation you could simply use the original filename:
http://mywebsite.test/img/asset/my-image.jpeg?fm=webp&q=90&fit=crop-50-45-1&w=1763&h=1058&s=b9ecc0e3ec9ad08d70e523ba99cc01bf

It would be great if there was an overall improvement to Glide filenames, for both non-cached (above) and cached (ahinkle's answer) manipulations. I have SEO obsessed clients who spend a lot of time renaming assets and I haven't told them that Statamic doesn't actually use the filename.

[ncla]

I am not particularly invested into this issue but here is a maybe clever way to workaround this issue.

Basically you would utilize <picture> tag, like this:

<picture>
  <source type="image/jpeg" srcset="{{ glide ... }} 600w">
  <img src="{{ asset .. }}" alt="{{ alt }}">
<picture>

Most modern browsers will very rarely, if ever, request the original <img> src tag as it was mostly used, to my knowledge, as a fallback option if browsers did not support the <picture> tag. As such, just link the original asset in <img> src and your Glide manipulated image(s) in srcset on <source> tag. You get descriptive filename and the manipulated image.

However I would advise against this and use alt attribute to describe the image instead. The filename is one of many ways how Google determines what is in the image.

[robdekort]

I had completely forgotten about this, but since this issue was reported, Peak changed it's strategy regarding images:

• It now does Glide transformations on the fly so you can crop and do all Glide magic from within your templates. This also saves a lot of bandwidth for end users because images can be really size optimised as opposed to using a set of presets where you have to crop them in the browser.
• save_cached_images is set to false now. This way the browser only requests the image it needs for the current visitor and it doesn't await generating them but pops them in on the fly. No more long wait times for the first visitor. And no unneeded sizes being generated, which potentially saves disk space.

While this strategy is working out great, filenames are not. We've been talking about this in the Peak Discord and would love a solution where the original filename is preserved.

[joschuba]

What @robdekort said in the last comment. I also ran into the problem. SEO-friendly image URLs would as well be important for me. A current client website is virtually unusable with save_cached_images set to true, but the image URLs are very important.