E-commerce is a dynamic business. Shoppers are constantly browsing sites for the best deals or for the latest of their favorite products, adding to wish lists, and exploring product recommendations from friends and influencers. On the other hand, online vendors are always on a tear to try to draw in shoppers and convert clicks to cash with various techniques, such as by reducing page-load time, posting compelling product images, and aggressively targeting ads.
This article explains the basics of FTP, peer-to-peer (P2P), and web-browser uploads, as well as Cloudinary’s automated upload capabilities that save time and improve workflows.
File uploads are cross-system data transfers. You can upload files in one of three ways:
In this article, you will learn:
Updates since publication:
- Following Google's shutdown of its legacy Google+ API in March 2019, the Google+ (gplus) option is no longer available.
- Following changes made by Instagram in June 2020, the Instagram (instagram_name) option is no longer available.
Nowadays, users can and often upload various media files to social networks, websites, and messaging apps. Most of those media are images and videos, with a significant number being audio files. Subsequently, to create a thumbnail to depict an image, a site or app would crop and then resize it to scale. To depict a video, they would convert, crop, and resize a single frame from it as a thumbnail.
As developers of web apps, you often need to let users upload files to your app - mainly images and videos. You want the upload interface you provide to offer an intuitive user experience, including the ability to drag & drop multiple media files, preview thumbnails of selected images and videos, view upload progress indication and more. Since we now all live in the cloud era, chances are that many of your users also store media files in the cloud rather than only locally on hard drives and mobile devices, so the option to pick files from social networks like Facebook, cloud storage services such as Dropbox, photo services like Google Photos and more is a big advantage.
Have you ever noticed that home pages are slow to load? Sliders could be to blame. Many modern homepages use a slider or carousel design element to show several rotating images that provide different offers or present various aspects of the brand. A common choice for implementing these sliders is JQuery. While JQuery itself is not a performance killer, the large images displayed by the slider can be responsible for slowing down a home page’s load time.
Cloudinary offers a cloud-based solution to help developers manage and optimize rich media (images and videos). With images being ubiquitous in online content, image sliders, which rotate banners or enable browsing through multiple images with animation effects and CSS3 transitions at the top of a website’s homepage, are becoming popular.
In our opinion, jQuery is the hands-down, No. 1 choice for building sliders. This article describes 7 ready-made, high-quality, and user-friendly jQuery sliders, complete with excellent designs and features. Also included are four tutorials along with code samples to help you build your own jQuery slider.
Developing a great website and maintaining it can be a challenging and time-consuming task, even for the most talented developer. You need to meet graphic design requirements for any device according to the latest design trends, and constantly find ways to optimize your website performance, for any browser.
We can save you a lot of time and effort. Cloudinary takes care of the entire image management pipeline: image upload, a rich set of manipulation and optimization capabilities, cloud storage, administration and super-fast CDN delivery.
It's great to have the capability to manipulate images on the fly by using dynamic URLs to customize the images to fit the graphic design of your site or mobile application. However, what if you want to manipulate an image depending on a specific image characteristic (like its width or aspect ratio) or its contents (does it contain a face?). What you need is a way to apply a transformation to an image only if a specific condition is met. Take for example a situation where you have allocated space on your page for a user uploaded image with a width and height of 200 pixels. Furthermore, if the image contains a face you would like to zoom in and focus on the face itself, otherwise you would like to fit the entire image into the available space: