Best way to shorten urls

[Livijn]

I am using the base64-option to generate my urls. However, the urls are getting very large. For example:

https://d1lrsw3bruipko.cloudfront.net/eyJidWNrZXQiOiJnZXRkb2dzYXBwIiwia2V5IjoiY29udGVudFwvZDkzMjJmNDAtMDNiYS00NGZjLWI4ZmQtZDMzNmJjMjU4YWIwIiwiZWRpdHMiOnsid2VicCI6eyJxdWFsaXR5Ijo4MH0sImpwZWciOnsicXVhbGl0eSI6ODB9LCJyZXNpemUiOnsid2lkdGgiOjY0LCJoZWlnaHQiOjY0LCJmaXQiOiJjb3ZlciJ9LCJjb250ZW50TW9kZXJhdGlvbiI6eyJtaW5Db25maWRlbmNlIjo5MCwiYmx1ciI6MTAwLCJtb2RlcmF0aW9uTGFiZWxzIjpbIkV4cGxpY2l0IE51ZGl0eSIsIlZpb2xlbmNlIiwiVmlzdWFsbHkgRGlzdHVyYmluZyIsIkhhdGUgU3ltYm9scyJdfX19

What would be the best way to make these shorter?

I could use CloudFlare workers to generate urls like this: https://images.domain.com/some-id/size which then redirects the response to the base64-encoded url. However, I don't want to combine CloudFlare for this since that feels redundant.

I guess I could do something similar with CloudFront? Or should I just modify the backend-handler? I always pass the same settings, except for width & height.

[fisenkodv]

@Livijn, you can use Thumbor URL to resize, set format, set quality, and etc. please refer to https://docs.aws.amazon.com/solutions/latest/serverless-image-handler/thumbor-filters.html.
Based on the example you have provided you use content moderation

{
  "bucket": "getdogsapp",
  "key": "content\/d9322f40-03ba-44fc-b8fd-d336bc258ab0",
  "edits": {
    "webp": {
      "quality": 80
    },
    "jpeg": {
      "quality": 80
    },
    "resize": {
      "width": 64,
      "height": 64,
      "fit": "cover"
    },
    "contentModeration": {
      "minConfidence": 90,
      "blur": 100,
      "moderationLabels": [
        "Explicit Nudity",
        "Violence",
        "Visually Disturbing",
        "Hate Symbols"
      ]
    }
  }
}

which is not supported by Thumbor URL. Since you use the same settings, you can update the handler.

[Livijn]

Yes, I know I can use Thumbor URLs but; a) they don't support all edits; b) they are still very long & ugly urls.

I'll try updating the handler, but that feels less "robust" when perhaps updating etc in the future.

[haxiomic]

To add to this, I'm very interested easier semantic URLs – there was a discussion on this earlier which settled on a design that would be perfect using query parameters
#184

However it seems like this didn't reach master (doesn't seem to work on the stack I just created)

Query parameters are much easier to work with than Thumbor style urls – for example, we can store the base image URL and append options as we need in the frontend:

<img src={url + '?width=200&height=200&fit-in=cover} />

However, with filters in the middle of the url as it currently is, we'd need to patch the url which introduces complications

The added benefit of this is that if the url doesn't support the query parameters, at least something loads, however with Thumbor-style it will be a broken image link

[Livijn]

I updated the handler and deployed a custom solution.

[haxiomic]

Thanks @Livijn!

[frannpr]

sorry to reopen this but does it<img src={url + '?width=200&height=200&fit-in=cover} /> really work @haxiomic ? It is not working for me from your develop branch @Livijn 😔

[karthickeyang]

Hi @Livijn @haxiomic @frannpr
Does this still works, I am expecting something thumbor style for an eCommerce site ondemand implementation