How to use Smart Resize in your app and save on image editing

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 x:

-/smart_resize/320x240/

The Smart Resize operation works best for solid, gradient, and homogenous backgrounds.

Upload images to your Uploadcare Dashboard

Create an account on Uploadcare; it's free.

Then upload your images to the Dashboard.

This guide will use these three images of sneakers that your photographer took before:

/6ff84554-4c59-43f9-9466-77b506bdc67a/

/8ed85186-2bfc-4f2f-bff8-7ae1cb76de5e/

/70d0c725-d5c3-48b8-b502-34752cb39e1c/

Three images of sneakers with different height and width

Create thumbnails for the main page

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:

/6ff84554-4c59-43f9-9466-77b506bdc67a/-/smart_resize/200x200/

/8ed85186-2bfc-4f2f-bff8-7ae1cb76de5e/-/smart_resize/200x200/

/70d0c725-d5c3-48b8-b502-34752cb39e1c/-/smart_resize/200x200/

Three thumbnails of sneakers

Create cover images for webpage headings

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:

/6ff84554-4c59-43f9-9466-77b506bdc67a/-/smart_resize/1800x200/

A wide cover image with a colorful sneaker

/70d0c725-d5c3-48b8-b502-34752cb39e1c/-/smart_resize/1800x200/

A wde cover image with a white sneaker in the center

/8ed85186-2bfc-4f2f-bff8-7ae1cb76de5e/-/smart_resize/1800x200/

A wide cover image with a red sneaker in the center

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.

Create horizontal product images

Similarly, create 1200*933px versions of these images for the divs that will hold the larger picture versions next to the “Buy” buttons:

/6ff84554-4c59-43f9-9466-77b506bdc67a/-/smart_resize/1200x933/

A closeup of colorful sneaker

/8ed85186-2bfc-4f2f-bff8-7ae1cb76de5e/-/smart_resize/1200x933/

A closeup of a white smeaker

/70d0c725-d5c3-48b8-b502-34752cb39e1c/-/smart_resize/1200x933/

A closeup of a red sneaker

Visualize

Here is how you can construct a whole page using only one image of each product:

Example of a simple e-commerce pageEdit this example on CodePen

If you have any questions, be sure to reach out to our helpful team of Support engineers at help@uploadcare.com!