Cloudinary Blog

How to manage images in a fashion website

by Orly Bogler
Fashion outlets have evolved dramatically in the last decade. In the past, if you wanted to be on top of the latest fashion trends, you had to subscribe to all the latest magazines and every month wait for the mailman to drop them off. If you wanted to remember a certain outfit or designer, you could either dog ear the page ('bookmark') or cut out the model or design and literally pin it to your cork board.
 
Today, it's a whole new ball (game). After all, who would've thought that pinning things would become a term meant for virtual pinboards and the good old cork type would be long gone? 
 

Modern fashion websites (and apps)

Fashion is no longer just about glossy magazines, it's about websites, apps and virtual stores. These fashion sites are incredibly image rich and media packed. No longer will the common visitor be satisfied with one image per article. They now expect an image from every angle, the option to change colors, to see it on a model and on the rack, to turn it around 360 degrees and don't get me started on designing your own one-of-a-kind article. Every fashion website now also needs all these images adapted not only to your regular desktop computer, but also to smartphones and handheld devices and to look wonderful in each! Not stretched, not tiny, just right. 
 
These new demands from the fashion consumers require a better image infrastructure. The website developers now need more than just a CMS, and being able to support their images becomes a real issue now. Every image needs to be uploaded, normalized, retouched, watermarked, cropped to many different sizes and aspect ratios, fit all viewing devices at all angles, it's exhausting! These images also need to be optimized and available to users all over the world, quickly. After all, you don’t want your viewers to waste valuable time waiting for all these images to load.
 
That ends up being quite a headache for the developer, and this is where Cloudinary comes in. 
 
   

Image management done right

Whenever images are involved, Cloudinary can dramatically cut the development and IT time and save all the headaches. 
 
With Cloudinary you can easily upload images to the cloud. Automatically perform smart image resizing, cropping (including face detection based cropping), merging, overlay, watermark, apply effects, rotations, format conversions, without installing any complex software. Using Cloudinary you can now upload a single high resolution image and ask Cloudinary to automatically scale it down according to the medium used.
 
Consider for example the following sample dress images. These thumbnails were automatically generated by Cloudinary:
 
w_100
w_50,h_50,c_fill
e_hue:40
e_hue:100,e_brightness:30
a_20,e_hue:20
Watermark overlay
 
 
 
 
 
 
 
 
 
All your images are then seamlessly delivered through a fast CDN, optimized and using industry best practices. Cloudinary offers comprehensive APIs and administration capabilities and is easy to integrate with new and existing web and mobile applications. 
 

How might a fashion website benefit from Cloudinary? 

Take a classic photo laden fashion site. All the product photos need to be high end. By uploading these photos directly to Cloudinary, they are not only safely stored and backed up in the cloud, they are also ready to be transformed on the fly and placed seamlessly on the website exactly as the graphics designer intended.
 
Did the graphics designer envision a thumbnail of different aspect ratio than the original image? Just tell Cloudinary to crop it to the required aspect ratio. It's as simple as changing your image's URL. Want your brand's watermarked on all your photos? Cloudinary will easily add it for you.
 
What about the mobile version of your website? Cloudinary can resize all your images and reduce their quality just a notch so that your mobile users will get the best viewing experience possible and won’t waste precious bandwidth and time when browsing your online site. Same goes for your native apps, and this all happens on-the-fly.
 
Modern fashion sites offer a more social experience. Do you allow your users to upload and share their own images? These photos are uploaded in all sorts of types, different formats and sizes. Cloudinary will normalize all these images for you - same type, same dimensions, same effects. Cloudinary can even fetch your user's profile images from Facebook and Twitter. 
 
Now you can spend your time on your core proposition and avoid image-related headaches.
 

Who uses Cloudinary in the fashion world?

Below are a two examples of companies in the fashion vertical that use Cloudinary's expertise to create the best user experience possible: 
 
 
 
Stylight allows users to create their own mood boards with their own outfit photos, favourite songs, videos and items from a selection of over 500.000 products available on the site. Users can share their mood boards with others in the community and gain inspiration from other users.
Stylight is one of the first fashion communities to have a revenue model that works internationally. Stylight uses Cloudinary to manage all of their images.
 
 
oBaz (short for online bazaar) is an ecommerce and content platform where brands and bloggers can connect to help people discover new products, trends and sales. 
Fashion bloggers use oBaz as a simple platform to write about favorite trends and build a following from an engaged and relevant audience. Brands use oBaz for direct sales while gaining access to shoppers and influential bloggers.
oBaz's media rich website leverages Cloudinary for their image management.  
 

What now?

So what do you think? Worth a try? Head over to Cloudinary and sign up to our free plan. Within minutes you can get going!
 
Got other great uses for Cloudnary? We would love to hear your ideas in the comment thread below! 
 

Recent Blog Posts

Optimizing web performance and your bottom line

by Robert Moseley
Optimize your website and app for maximum user engagement
Patience is not a virtue for website visitors and online shoppers. Every fraction of a second counts when it comes to keeping – or losing – a visitor to your website.  
 
Loading time is a major contributing factor to page abandonment, according to an infographic on the Kissmetrics blog using statistics from Akamai and Gomez. Because the average web visitor has no patience for a page that takes too long to load, abandonment increases as a percentage with every second of load time. Nearly 40 percent of users will abandon a page after 10 seconds, the blog noted. Mobile Internet users probably experience the most frustration with this issue –  73 percent noted that they’ve encountered a website that was too slow to load. 
Read more
Is your website offering the best user experience?
 
The most common frustrations voiced by people when visiting a website are the time it takes for pages to load and the amount of bandwidth some sites eat from their monthly mobile plans. 
 
What these users might not realize is that, in many cases, the culprit is the same: website image performance. Ensuring images are optimized is particularly important to businesses who manage these sites since they account for the majority of the downloaded bytes on a web page, and can slow down load times considerably. 
Read more
Improve your site with content personalization & A/B testing

Personalization of web content is becoming increasingly important for businesses to gain – and maintain – their competitive advantage. Web personalization is key to increasing conversion rates and return rates, as well as boosting retention, time-on-site, and page views, according to a December 2015 VentureBeat study, which noted that 87 percent of companies have seen a lift of at least 5 percent in their most important metrics as a result of personalization. 
Read more
Dynamic ZIP files generation with a single line of code

As a developer, you want to allow your users to download multiple files in a single click. An easy way to download multiple files and share them is to generate a ZIP file. When images are involved, you may also want to normalize the original images before including them in the ZIP file, by scaling them down to the same maximum resolution or converting them to the same format.

Read more