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:
- Load a stock item
- Then go to the images tab
- Once here you can click an image to see the details
- From the details, you should see the Image URL:
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:
- Adding a Filter
- Adjusting the quality (which allows you to keep those file sizes down)
- Adjusting the dimensions
- Rotating the image
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
Greyscale filter: http://cdn.khaoscloud.com/keys4/image/mug.jpg?filter= greyscale
Edge filter: http://cdn.khaoscloud.com/keys4/image/mug.jpg?filter=edge
Embos filter: http://cdn.khaoscloud.com/keys4/image/mug.jpg?filter=emboss
Blurry filter: http://cdn.khaoscloud.com/keys4/image/mug.jpg?filter=blur
Sketchy filter: http://cdn.khaoscloud.com/keys4/image/mug.jpg?filter=sketchy
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:
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.
which will output a 100px height image
Which will output a 600px wide image
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?
Or perhaps you would like to flip it horizontally?
If those options don't suit, how about both at the same time?
One last thing
You can use as many of these properties as you like, all you need is an && divider. For example:
This would make a vertically flipped product image that is 300px wide and with the "edge" filter.
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 month today!
Please Note: This article was edited on 21/02/2018 to reflect Khaos Control Cloud's updated process re: trials.