Cloudinary Blog
Learn more...

How to automatically adapt website images to Retina and HiDPI devices

Jul 24, 2014 by Nadav Soferman

DPR Post 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 the full post

Automatic image moderation, removing adult or inappropriate photos using WebPurify and Cloudinary

Jul 22, 2014 by Nadav Soferman

WebPurify moderation add-on 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.

There are two ways to identify and remove such images: you can either require approval of each image before it is displayed to your users, or display images immediately after upload, and then quickly remove them from your site as soon as a moderator has found them to be inappropriate.

→ Read the full post

Image manipulation recipes in the cloud. The Cloudinary Cookbook

Jun 26, 2014 by Nadav Soferman

Cloudinary Cookbook 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 the full post

Animated WebP - how to convert animated GIF to WebP and save up to 90% bandwidth

Jun 16, 2014 by Nadav Soferman

Animated WebP 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 the full post

Optimize your JPEG images without compromising quality with JPEGmini and Cloudinary

May 29, 2014 by Nadav Soferman

JPEGmini 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.

By lowering JPEG quality, say to 90%, 80% or even 50%, you'll get much smaller JPEG files. But will image quality be good enough? JPEG optimization is tricky because if quality is too low, you'll get blurry images, pixelation and visible compression artifacts; if it's too high, images will look good but take too long to load.

→ Read the full post

How to overlay text on image easily, pixel perfect and with no CSS/HTML

May 22, 2014 by Nadav Soferman

Dynamic text style

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 the full post

Image moderation made easy using cloud-based UI and API

May 16, 2014 by Nadav Soferman

Manual image moderation 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.

It’s sometimes quite important to moderate these images. You might want to keep out offensive content. You may want to actively reject images that do not answer your website’s needs, for example, make sure there are visible faces in profile images, or that only photos of your brand appear on a shared marketing campaign. You may also want to make sure that photos are of high enough quality before making them available on your website.

→ Read the full post

Beyond face detection - smart cropping in the cloud using Imagga and Cloudinary

Apr 25, 2014 by Nadav Soferman

Imagga smart cropping 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 the full post

PNG optimization - saving bandwidth on transparent PNGs with dynamic underlay

Apr 01, 2014 by Nadav Soferman
Transparent background PNG optimizationThere are many ways to optimize PNG files, but one optimization which is commonly overlooked involves the PNG's transparent background. If you’ve chosen to use PNGs instead of a more compact format like JPG, mainly for the PNG's support of a transparent background (alpha channel), read on and see how dynamic underlays can reduce your file size by as much as 1:5.
 
Graphic designers of sites and apps sometimes wish to display clipped photos on top of a certain background. A common example is a news site that shows a head shot of the author, or a figure mentioned in the article. Typically, the images are clipped using photo editing software like Photoshop, and then they can then be placed above background colors, patterns and between text paragraphs. 
→ Read the full post

Website screenshot creation and manipulation with URL2PNG and Cloudinary

Mar 25, 2014 by Nadav Soferman
URL2PNG Add-onThumbnails of website screenshots are a common visual design element. Search engines, such as Google, display webpage screenshots in their search results. Social news sites, such as DZone, embed screenshot thumbnails of shared pages. Bloggers and technology news sites embed screenshots of company websites and online services they discuss in their posts. Development companies embed screenshots of websites they helped develop.
 
→ Read the full post
More posts...