The concept of media proxy deals with use cases when you don’t want to handle image uploads or storage but head straight to optimizing your images and their delivery.
The workflow is focused on using proxy that fetches your content, optimizes and delivers it to your users via Uploadcare CDN. There is more to it; you can also apply any Image Transformations to further optimize your media.
Media Proxy is the fastest way to integrate Uploadcare into your product without modifying your code or manually migrating any files.
Here are the three simple steps it takes to set up Media Proxy:
By default, we create a proxy endpoint for every project. You can find it in the Whitelist
section of project settings. If you want to use your subdomain name like
instead of the auto-generated one, drop us a line.
We also require you to provide a list of domain names you’d want the proxy to fetch files from. Those are called “allowed domains.” You can add them in the same section.
That’s it, you can now start using Media Proxy.
Here are the steps we recommend taking to start off with the Media Proxy.
Add your Media Proxy prefix to a media URL you want to fetch, an image for example:
https://yoursite.ucr.io/ + https://yoursite.com/assets/image.jpg = https://yoursite.ucr.io/https://yoursite.com/assets/image.jpg
If you have done everything right,
image.jpg is now delivered via
Apply some transformations to your image by adding one of
their respective URL Directives between the prefix and
media URL. We’d go with resizing an image to 500 pixels in width with the
resize operation by adding
The resized version of
image.jpg is now delivered by Uploadcare CDN.
Iterate through your media assets and add your Media Proxy prefix to every URL, apply operations when needed. You can also optimize your workflow and free up some storage space, i.e., if you got multiple versions of images for adaptive layouts. Those can now be made on-the-fly by crafting proper URLs using our Image Transformations directives.
1260 pixels in width: https://yoursite.ucr.io/-/preview/-/resize/1260x/https://yoursite.com/assets/image.jpg 760 pixels in width: https://yoursite.ucr.io/-/preview/-/resize/760x/https://yoursite.com/assets/image.jpg 512 pixels in width: https://yoursite.ucr.io/-/preview/-/resize/512x/https://yoursite.com/assets/image.jpg
You can find more on implementing Responsive Images with Uploadcare on our blog.
Measure your load time and traffic improvement by comparing those for your original files and their optimized versions. For local tests, you can use common stuff like chrome-devtools. With image content, consider playing with the quality transformation for better results.
Note, there’s no performance improvement when using any Media Proxy URL for the first time. Fetching happens first, and starting with the second use of the URL, your files are delivered from our CDN.
We crafted a collection of the most relevant Media Proxy use cases. In general, it helps optimizing your assets thus improving load times and cutting traffic spendings.
- Improve Load Times
- Implement Responsive Images
- Cut Traffic Spendings
- Migrate To The Cloud
- Seamlessly Integrate Uploadcare
- Assess Your Performance
Media Proxy fetches your assets and delivers them via Uploadcare CDN. That alone improves load times of your assets because they get served from a CDN node best for your client’s location, bandwidth, latency, etc.
When handling media, Media Proxy provides further load time improvement by letting you cut file sizes at no visual quality loss. With images, that can be done via our Image Transformations feature.
Specifically, take a look at the following on-the-fly operations:
format, convert images to WebP, PNG or JPEG.
quality, adjust image quality.
resize, adjust image size.
This set of tools can help accelerate your images up to 9x.
Once your files get fetched by the Media Proxy, there is just one step to
building responsive designs. With images, it is about generating their different
versions to use with your
srcset or the
Image Transformations would be the feature to use here.
We published a dedicated article on using Image Transformations that covers all the techniques to get responsive.
While accelerating your media improves your conversions, using less bandwidth cuts your traffic costs.
It might happen you are already using a File API or cloud storage for your assets. In both cases, it is relatively easy to migrate: you, set up Media Proxy, make a list of your asset URLs, and replace those with their optimized versions.
Your existing media assets may already be transformed on-the-fly with a File API. To migrate those, you might also need to look through the Image Transformations we support and how to use them with Media Proxy. That helps determine operation alternatives and their syntax.
The simplest way to integrate file APIs is doing it from scratch, i.e., when developing a new product or scaling an existing one. That’s not always the case. When you have already got a bunch of assets, use Media Proxy to fetch those to Uploadcare and optimize their delivery on autopilot. This can be done in four simple steps:
Before signing up or migrating, you want to measure how Uploadcare can improve your system’s performance. Our advice, in this case, is using Uploadcare only for certain areas of your web or mobile app and then comparing how they perform before and after integrating with Uploadcare:
- Pick an area of your web or mobile app that you monitor: understand conversions and average load times.
- Set up Media Proxy to work with your Uploadcare account.
- Iterate through your assets related to that preferred area and replace URLs with their optimized versions: add prefixes.
- Apply transformations to further optimize your media assets where applicable.
- Run tests, collect statistics, and compare how the tested part of your web or mobile app performs after implementing optimizations.
Here is the list of errors you might get when using Media Proxy:
You did not register a Media Proxy domain for your sites by dropping us a line at firstname.lastname@example.org.
You tried fetching a file from a domain that was not allowed. Check settings or contact us to add the domain as allowed for your account.
Your prefix was added to an invalid URL. Consider checking that URL.
You tried fetching an unreachable file. Consider checking its URL.
A problem occurred when trying to upload a file to our storage. Perform another try sometime later or contact us.