Smart image resize, explained

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 your images to your Uploadcare Dashboard.

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

/461e3230-a4da-421a-8251-c92f7dffa651/

Two colorful sneakers on a box

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

A white sneaker on light grey background

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

A red sneaker on orange background

Create thumbnails on 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:

/461e3230-a4da-421a-8251-c92f7dffa651/-/smart_resize/200x200/

A thumbnail with colorful sneakers

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

A thumbnail with a white sneaker

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

A thumbnail with a red sneaker

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:

/461e3230-a4da-421a-8251-c92f7dffa651/-/smart_resize/1800x200/

A wide cover image with colorful sneakers on the left

/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 900*700 px versions of these images for the divs that will hold the larger picture versions next to the “Buy” buttons:

/461e3230-a4da-421a-8251-c92f7dffa651/-/smart_resize/900x700/

A closeup of colorful sneakers on a box

/8ed85186-2bfc-4f2f-bff8-7ae1cb76de5e/-/smart_resize/900x700/

A closeup of a white smeaker

/70d0c725-d5c3-48b8-b502-34752cb39e1c/-/smart_resize/900x700/

A closeup of a red sneaker

Visualize

Here is how you can construct a whole page, using only one image version for 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!