Resize your images, save time, accelerate your website and increase your conversion

Emil Nova
Emil Nova
Jan 26, 2018 · 3 min read

In my previous (and first Medium article ever!) article, I gave 5 tips on how to address the challenges around slow images and responsive design. In this post, I will focus on the first takeaway I provided:

Takeaway 1: generate all image sizes server-side and deliver the right image size at the right moment of your customer’s journey.

As previous E-Commerce developers, we learnt dealing with images on the hard way. We spent hours and hours writing macros on Photoshop or script with ImageMagick to resize our images and generate thumbnails for the articles our customers wanted to sell on their online store. Once we had all image sizes created, we still had to host them (storage was not cheap in 2010) and most importantly deliver them fast to online shoppers around the world.

We talked to our friends from other web agencies developing media websites and image galleries and decided to build an image management solution and CDN in the Cloud. This is how Cloudimage.io was born in 2013.

Let’s see how it can help you with image resizing.

How does it work?

When an image is first loaded on your website or mobile app, Cloudimage’s resizing servers will download your origin image from your origin server, resize it and deliver to your user via rocket fast Content Delivery Networks (CDNs).

Image for post
Image for post
Cloudimage resizes your images in the Cloud

For example, if your origin image is available at:

http://sample.li/flat.jpg

Generating multiple image sizes is as easy as pre-fixing your origin image URL with:

https://demo.cloudimg.io/width/350/s/sample.jpg/flat.jpg

(Click on the links to see the origin and resized images).

The Cloudimage URL

The Cloudimage URL is the URL that will replace your origin image URL in your HTML code. You can specify various resizing parameters and filters by following the format:

//token.cloudimg.io/operation/size/filter/original_image_url

where:

  • token: your Cloudimage token, get one by subscribing for a free account
  • operation: resizing operation you want to apply to the origin image
  • size: size of the target image
  • filter: modifies the image’s rendering
  • original_image_url: tells Cloudimge where to donwload the origin, full size image from

You can find a full list of operations and filters in the full Cloudimage documentation.

Basically, your <img> tag in your HTML code turns from:

<img src="/images/mexican_shirt_54332.jpg">

into

<img src=”//token.cloudimg.io/operation/size/filter/yourdomain.com/images/mexican_shirt_54332.jpg>

For example:

<img src=”https://cdn-images-1.medium.com/max/1280/1*oy2wO99GjBKxIe3-ULAs2Q.png">
Image for post
Image for post
Original image

into

<img src="//demo.cloudimg.io/width/200/fgrey/https://cdn-images-1.medium.com/max/1280/1*oy2wO99GjBKxIe3-ULAs2Q.png">
Image for post
Image for post
Cloudimage generates a greyscale thumbnail

Fast delivery via CDN

Once the image is resized in the format of your choice, Cloudimage will push it to a Content Delivery Network, which will in turn deliver it rocket fast to your visitors, responsively across various screen sizes.

Image for post
Image for post
Source: our amazing UX team

What you win

  1. Cloudimage will save developers and content managers hours of image processing
  2. Images will be delivered faster to visitors, increasing conversion and sales
  3. The CDN will absorb a big part of the website traffic, protecting you from attacks but also saving you infrastructure costs to deal with high traffic peaks

Next step

Have a look at the full documentation available here and play around with the examples. Subscribing for a FREE account takes few seconds here.

Cloudimage Blog

Cloudimage News and Articles on Medium - https://cloudimage.

Emil Nova

Written by

Emil Nova

Faster images mean more conversion and thus, more sales. Co-Founder @ Scaleflex, the Team behind Cloudimage and Filerobot

Cloudimage Blog

Cloudimage News and Articles on Medium - https://cloudimage.io

Emil Nova

Written by

Emil Nova

Faster images mean more conversion and thus, more sales. Co-Founder @ Scaleflex, the Team behind Cloudimage and Filerobot

Cloudimage Blog

Cloudimage News and Articles on Medium - https://cloudimage.io

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store