Smart image resize, explained
- Create thumbnails on the main page
- Create cover images for webpage headings
- Create horizontal product images
Say you own an online store that sells sneakers. You hire a photographer who takes pictures of your products from time to time, but then you’re left with a bunch of pictures, and a website that requires differently sized images of the said products:
- the thumbnail
- the webpage heading
- the product image near the “Buy” button
You can resize the images individually, then store their versions separately or — you can upload one version of each image and take advantage of the Uploadcare’s Smart Resize image processing operation.
The syntax of this operation is extremely simple: just add
-/smart_resize/:dimensions/ to your image URL on Uploadcare CDN. The
:dimensions parameter must contain width and height in pixels separated by
The Smart Resize operation works best for solid, gradient, and homogenous backgrounds.
Upload your images to your Uploadcare Dashboard.
This guide will use these three images of sneakers that your photographer took before:
Say you’re using relatively large thumbnails 200 pixels wide and high. Just add
-/smart_resize/200x200/ to the image URLs, and the pictures will be cut right to the objects on them:
Now you’re going to need wide and short image versions for the headings of your product web pages, 1800px by 200px. This time, Smart Resize can be used to construct the image background without any visual artifacts:
Notice that if the object is flush with one of the sides of the image, the background grows only to the other side. If the background is visible on the both sides of the original image, the object is placed in the center by default.
Similarly, create 900*700 px versions of these images for the divs that will hold the larger picture versions next to the “Buy” buttons:
Here is how you can construct a whole page, using only one image version for each product:Edit this example on CodePen
If you have any questions, be sure to reach out to our helpful team of Support engineers at firstname.lastname@example.org!