Home
Support Forums

Large media: source image

Quick and short question, not sure anyone else has ever had this same question?

Large media allows you to stick an image in your repo and then use the query params to ask for the transformed version of the image you want. Example:

In Git:

  • /images/my-source-image.jpg

Once deployed:

  • https://my-app.netlify.app/images/apple.jpg
    • Returns the source image as stored in git (however large)
  • https://my-app.netlify.app/images/apple.jpg?nf_resize=fit&w=200
    • Returns the transformed image

Is there any way to allow access to the transformed versions of the image but not actually make the source image public?

For example: say i have some source artwork that is 4000x4000 pixels stored in git/netlify large media. The path in my git repo is /images/apple.jpg. I want to make any requests for a transofmration on that image possible, i.e. /images/apple.jpg?nf_resize=fit&w=200 or /images/apple.jpg?nf_resize=fit&w=1000 but I don’t want the source image (4000x4000px) publicly available under /images/apple.jpg. Is that possible?

Part of me thought maybe you could do it with the redirects engine, but given that I want to, in essence, block the image path but preserve the image path with query params, that seems not possible?

You can’t simultaneously block a path and allow access to it. At least not with Netlify (happy to stand corrected.) With some fancy rewrites on an Apache server, possibly.

The transformations are done on the source image. If it wasn’t accessible, you couldn’t transform it. I use Cloudinary, and ImageKit, and if you follow copy the URL, remove the transformation part of it, the original image is accessible. The same with Shopify, in which you can upload a large product image, but have multiple sizes generated on the fly and served dependant on device.

Thinking out loud…

It is possible you could use proxying as outlined in the docs and demonstrated in a Netlify Explorers Mission

Say you had an image called apples.jpg and you wanted to serve a version of it with a width of 400px. Then you could have something like the following in your netlify.toml:

[[redirects]]
  from = "/img/:width/:image"
  to = "https://my-app.netlify.app/images/:image?nf_resize=fit&w=:width"
  status = 200

which would then get accessed by

<img src="/img/400/apple.jpg" alt="An apple" />

Hope this makes sense, and if it helps, even better!

Ahhhh interesting…

I hadn’t thought about creating my own URLs which then use the redirects engine to proxy to the URLs as they correspond to my image paths in git

My one concern is that, for my use case, this could apply to possibly >1,000 image paths—does that have a performance drawback? I’m going to guess no, because ultimately (as in your example) you’re only writing one redirect rule, it just might apply to an innumerable number of paths.

[[redirects]]
  from = "/img/:width/:image"
  to = "https://my-app.netlify.app/images/:image?nf_resize=fit&w=:width"
  status = 200

Ultimately the original source image would still be available online, but if nobody has access to my GitHub repo, they won’t know what that original path is unless they just start guessing at paths off the root until they find something.

I think that might actually be a viable option! Thanks for thinking out loud.

1 Like

Hi, @jimniels. You might also use Identity and role-based access control (RBAC) to block the original image URL for anyone that is not logged in.

I’m assuming that the RBAC redirect rules would not apply to the proxied path. I don’t think they will but I haven’t tested that yet.

My point here being, you would not need to configure authentication for users. You might be able to use this to block the original URLs because no one will be authenticated and so only the proxied path (the 200 status redirect) will work.

If you do try that I would love to learn if it works or not. (If I end up testing this, I’ll let you know as well.)

1 Like

Ah interesting, another idea I hadn’t considered! If I give this a shot, I’ll try your suggestion as well and report back. TY!