Your Product Images Unleashed on the world quickly and easily | Khaos Control Cloud

It has been just over a fortnight since we launched the Content Delivery Network for Khaos Control Cloud and with more and more companies uploading product images, we thought it was about time we told your web developers how to make the most of the beloved stock imagery that you have been uploading.

Please Note: We are going to get 'our nerd on' in this blog post, in order to take your web developers and other techie types through some of the ways in which they can use our CDN on your eCommerce websites and marketplaces. If you would like to know more about uploading and storing product images on the CDN, please us the Help and Support options in the app, or drop us a line, myself and the team will be happy to help.

Those product images are awesome, let’s use them somewhere else too


As each image is a URL, you can easily access the product images you upload from anywhere else on the web; like your website, Ebay and Amazon listings. The list is endless!

We have made it as easy as possible for you to grab those URLs and start using them elsewhere. For example, you can grab a product image URL from the Images tab on the Stock screen as follows:


  1. Load a stock item

  2. Then go to the images tab

  3. Once here you can click an image to see the details

  4. From the details, you should see the Image URL:


Product images of mug

So I have a product image URL, now what?


We have added extra features to our CDN to allow anyone to manipulate their images on the fly, things like:

Filters


Here we have my beautiful stock image of a company coffee mug. Striking isn't it? However, the URL for this product image can be manipulated with a simple filter property in a number of ways:

Negate filter: http://cdn.khaoscloud.com/keys4/image/mug.jpg?filter=negate
Product Images Coffee Mug
Greyscale filter: http://cdn.khaoscloud.com/keys4/image/mug.jpg?filter= greyscale

Product Images Coffee Mug

Edge filter: http://cdn.khaoscloud.com/keys4/image/mug.jpg?filter=edge

Product Images Coffee Mug

Embos filter: http://cdn.khaoscloud.com/keys4/image/mug.jpg?filter=emboss

Product Images Coffee Mug

Blurry filter: http://cdn.khaoscloud.com/keys4/image/mug.jpg?filter=blur

Product Images Coffee Mug

Sketchy filter: http://cdn.khaoscloud.com/keys4/image/mug.jpg?filter=sketchy

Product Images Coffee Mug

Quality control


You can make you product images load faster with “on the fly” compression techniques. This is achieved by adding an extra property to your URL. Currently images are served with 20% compression, however this can be manipulated further, as follows:

http://cdn.khaoscloud.com/keys4/image/mug.jpg?q=50

Product Images Coffee Mug
Which gives you a 60% compressed image, which is 60% smaller than the original file size. (Reflected in the poorer quality)

Resizing your product images


One size doesn’t always fit all. Changing the height and width of an image is sometimes challenging, especially if your ratios get mixed up, however we have tried to make it as easy as possible. By inputting the h property or the w property within the URL, your image will be served as expected. There is no issue with using both properties, however the CDN will decide which one to take priority over the other dependant on the scaling of the image.

http://cdn.khaoscloud.com/keys4/image/mug.jpg?h=100

which will output a 100px height image

Product Images Coffee Mug

http://cdn.khaoscloud.com/keys4/image/mug.jpg?w=600

Which will output a 600px wide image

Product Images Coffee Mug

Flipping


Sometimes we may like our coffee mug to be viewed differently, and what’s better than rotating it?

Flipping the image vertically may be your cup of tea?
http://cdn.khaoscloud.com/keys4/image/mug.jpg?flip=v
Product Images Coffee Mug

Or perhaps you would like to flip it horizontally?
http://cdn.khaoscloud.com/keys4/image/mug.jpg?flip=h
Product Images Coffee Mug

If those options don't suit, how about both at the same time?
http://cdn.khaoscloud.com/keys4/image/mug.jpg?flip=vh
Product Images Coffee Mug

One last thing


You can use as many of these properties as you like, all you need is an && divider. For example:

http://cdn.khaoscloud.com/keys4/image/mug.jpg?flip=v&&width=300&&filter=edge>

This would make a vertically flipped product image that is 300px wide and with the "edge" filter.

Product Images Coffee Mug

That’s all for now


I hope you have found find this article interesting and that you try out our CDN on your own websites and marketplaces, if you need further features or want to know more about our Content Delivery Network please get in touch with us. If you are not yet using Khaos Control Cloud, what are you waiting for? Start your free trial today!

STAY CONNECTED

Introduce a little Khaos into your Inbox and let our free content and advice help you grow your business.

Back To Top

BACK TO TOP