Cloudinary Blog

Adapting website images to Retina/HiDPI/high DPR devices

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.

In 2010, Apple introduced the iPhone 4 with Retina display. In order to simplify things for developers, the logical screen resolution remained the same as previous iPhone models (640x960) while the physical screen resolution was exactly doubled (1280x1920). This means that if, for example, you embed an image tag in your HTML page with width of 200 pixels and height of 300 pixels, and you display a double-size image of 400x600 pixels, the Retina display shows all pixels of the larger image, resulting in a much clearer visual result and without performing browser-side down-scaling.

Read more
Direct image upload to the cloud made easy

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.

Read more
Image manipulation recipes in the cloud

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 manipulations - 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 manipulations correctly to solve a problem or achieve a certain effect?

Read more
Animated WebP: convert animated GIF to WebP on-the-fly

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, cheezy 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.

Read more
Central control for image upload and post-upload actions

There are many options to consider when allowing a user to upload an image to your website or mobile app. You might wish to limit the size and format of the uploaded images. You may want to apply specific manipulations to the images, such as cropping, resizing and adapting the image to your site's look & feel. Beyond that, it's common to create a variety of thumbnails from a newly uploaded image.

Read more
Overlay text on image, pixel perfect with no CSS/HTML

Our customers frequently ask us if we can help them apply dynamic text overlays over images. While a common approach is to add text elements in your pages using HTML elements, CSS or native mobile UI controls, in many cases it's preferable to create images with text layers already included. It makes it simpler to display rich content on different media channels and devices, while ensuring a pixel-perfect result as your graphic designer envisioned.

Read more
Image moderation made easy using cloud-based UI & API

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 e-commerce websites, showcasing and reviewing their latest purchases.

Read more
Introducing Cloudinary’s new image management console
Cloudinary's Management Console provides valuable information about your images, powerful image browsing capabilities, reports, and various account customization options. 
 
Today we want to introduce the new version of our console, including a completely new full-width responsive layout, important metrics and insights about your usage of the Cloudinary account, an improved Media Library user interface allowing you to browse through and interactively manipulate and manage your images, and more!
Read more
Beyond face detection - smart cropping with Imagga & Cloudinary

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.

Read more