You can use our resizing images service to resize images on the fly.
This is really simple: all you need is to construct the right url.
Let’s suppose you have a photo uploaded. In this case, it’s a photo of Zugersee I’ve made in Zug, Switzerland. It’s huge (2816 × 1880), and it’s 2.6 megabytes: not really suitable for using on a website directly. It’s id is 0bda7801-c736-4b73-852d-a541fd570f89, as you can see from its url.
Now, say you want to limit its height in 600px. The url you want is:
http://services.uploadcare.com/resizer/0bda7801-c736-4b73-852d-a541fd570f89/x600/
Copypaste it into the address box, and you’ll be redirected to the resized copy of the image. If there is no such copy yet, it’s going to be constructed on the fly! Try different dimensions, or your own image.
You can just embed the image into the html code, no server-side coding required:
<img src="http://services.uploadcare.com/resizer/0bda7801-c736-4b73-852d-a541fd570f89/x600/">
The full syntax is:
http://services.uploadcare.com/resizer/{{ file_id }}/[width]x[height]/[crop/]
Examples:
http://services.uploadcare.com/resizer/0bda7801-c736-4b73-852d-a541fd570f89/400x600/ - fit in 400x600
http://services.uploadcare.com/resizer/0bda7801-c736-4b73-852d-a541fd570f89/500/ - resize to 500 in width
http://services.uploadcare.com/resizer/0bda7801-c736-4b73-852d-a541fd570f89/x400/ - resize to 400 in height
http://services.uploadcare.com/resizer/0bda7801-c736-4b73-852d-a541fd570f89/300x300/crop/ - crop to 300x300x
Yeah, that simple! This is really useful if you’re trying a new design for your website, or you want to allow users to resize images, or in a lot of other situations.