Many websites and mobile applications with user generated content allow you to upload all kinds of files. Images, PDFs, and Microsoft Office files, such as Word, Excel, and PowerPoint are all common types of uploads.
Web development was much simpler only a few years ago, when we were building HTML pages that included images and photos, and all elements shared the same resolution units. If for example, you aimed at a standard 1024x768 screen, you knew these were exactly the number of pixels available for displaying HTML elements and images.
If your web or mobile application involves user-generated content, you may encounter users who upload inappropriate photos or images to your application. These could be images which offend other users - adult content, violent photos, etc. - or images which cause your site to violate laws or regulations.
Handling user uploaded images and other files on your website can be a time consuming task. As images grow larger, uploading and processing them becomes more and more complex. For example, common upload issues for images and other files may relate to browser limitations, server configuration issues, memory and timeout issues. Specifically, handling user uploaded images on your website can be a hassle. In this post, we'll show how Cloudinary's cloud-based image management service can help you turn user uploading into a lightweight operation that bypasses your servers altogether.
How do you crop an image to a custom shape? How do you add a shadow effect to an image with transparency? How do you add text overlay to an image without using HTML?
If you build or maintain a website with a lot of images, you've probably had many questions like these. Most developers who work with images have scripts or tools that can achieve dozens if not hundreds of image transformations - from basics like crop and resize, to advanced stuff like shadow and transparency, watermarks, face detection, etc. But how do you mix and match these transformations correctly to solve a problem or achieve a certain effect?
Fashion isn't something you'd expect to repeat itself in the technology world - technology advances quickly and hardly ever circles back. But where animated GIFs are involved, it seems like the 90s are here again. Animated GIFs are everywhere, and not only on strange, cheesy web sites - they've become mainstream. You now see short videos shared and played as animated GIFs in reputed sites such as Gawker and TechCrunch.
Image optimization is an important step to reducing page load times, improving user experience and reducing bandwidth costs. When using the JPEG image format, which is best used for photos, the most common optimization is controlling the JPEG quality level.
Many websites and mobile apps today allow their visitors to share their own photos. Users upload their profile images to dating sites, photos of their personal belongings to second hand market websites and real estate billboards. Users share their personal photos on social networks, and upload images to their favorite eCommerce websites, showcasing and reviewing their latest purchases.
It’s a common challenge in many mobile and web applications: how do you allow users to upload their own images, while automatically adapting these images to a fixed graphic design?
A classic example is a user uploading a profile picture, but instead of providing a headshot (which is what we really need from them), they upload a picture of their entire body with additional objects in the background. Obviously this image will need to be cropped to the size of the profile picture, while focusing on the user’s face.
Website developers and administrators today tend to find themselves managing quite a few files, images and other media assets. Whether you upload content to your web application yourself, allow your users to upload files or have files imported from content partners, you'll need to handle the upload process, storage, and possibly thumbnail creation required to showcase your assets online.