Cloudinary Blog
Learn more...

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

How to automatically migrate all your images to the cloud

Mar 13, 2014 by Nadav Soferman
Automatic image uploadsWebsite 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.
 
Many website developers consider moving their assets from hosted storage to cloud-based storage solutions. While somewhat costlier, these modern storage services offer nearly limitless scale and close to 100% uptime.
→ Read the full post

On-the-fly image manipulations secured with signed URLs

Jan 20, 2014 by Nadav Soferman
Signed URLModern web sites and mobile applications frequently showcase a rich set of images with various sizes and dimensions. Such services can even have their graphics, image resolutions and overall look & feel vary between different devices (desktop, mobile, etc.), and may change dramatically with constant upgrades.
 
One of our key requirements with Cloudinary was to help make image modifications as easy, intuitive and flexible as possible. Using our dynamic URLs, you can indeed resize, crop, alter shape and apply effects using simple URL parameters. New images are transformed on-the-fly in the cloud and the resulting thumbnails are optimized and delivered via a fast CDN. As a result, viewing different derived images of a single hi-res source is a snap. Here's an example of a dynamic image manipulation URL in action:
→ Read the full post

Transparent WebP format CDN delivery based on visitors' browsers

Cloud-based WebP DeliveryOne of the hardest optimization goals when showing images to your website (and mobile application's) visitors, is to minimize the image file size while maintaining high enough display quality.
 
Smaller image file sizes directly translate to faster load times, reduced bandwidth costs and improved user browsing experience. But small file sizes directly translate to lower image quality and may harm visitor satisfaction. Maintaining just the right balance is both crucial and hard.
 
→ Read the full post

Display Instagram and Google+ profile pictures in your website and mobile app

Aug 22, 2013 by Nadav Soferman
Instagram and Google+Many modern web and mobile applications include integral social aspects as parts of their online solution. 
 
Users can sign-in to these services and be identified by their chosen social identity. This is made quite straightforward by leveraging single sign-on services such as Facebook Connect, Twitter, Google+ and others. After signing in, activities in the service and user generated content can be accompanied with the real name of the users as well as their profile pictures.
 
→ Read the full post

How to support WebP images, save bandwidth and improve user experience

Modern image compression techniques have had a large impact on our lifestyle. Digital cameras can save thousands of high-quality photos on a single memory card, smartphones can quickly share high resolution images on-the-fly, and websites and mobile apps can show rich media quickly. All of this just couldn,t have worked if image data was stored at its original, raw form. 
 
Through our apps, browsers and devices, we all use the JPEG lossy format to manage photos efficiently and the PNG lossless format to deliver graphics, icons and drawings.
 
→ Read the full post

Windows Azure add-on for cloud-based image management

Apr 23, 2013 by Nadav Soferman
Call us prejudice, but as a hardcore Linux guys, the name Microsoft always caused us to flinch a little. That was our initial reaction when we were approached by the Azure team. We have been integrating Cloudinary with many PaaS providers to make our platform as accessible as possible, and Azure actually made perfect sense. Still, we were a bit hesitant at first as we never considered Microsoft a leading player in the world of rapid web & mobile development. 
 
→ Read the full post

Automatic image sharpening and blurring in the cloud

Mar 20, 2013 by Nadav Soferman
Images. Your web (or mobile) application is probably filled to the brim with images. You might be surprised at just how much impact these images have on your visitors. From their graphical appeal to their size and access times - these images determine your visitors browsing experience and ultimately their conversion to repeating visitors and paying clients.
 
Now, while your graphic designer has created a cool graphical concept, many of the images you need to embed inside it are not in your direct control. Social websites contain profile photos uploaded by their users. E-commerce solutions contain many product photos that can't be edited one at a time. Media outlets contain many photographs of different consistency.
→ Read the full post

Image opacity manipulation and dynamic watermark generation

Jan 17, 2013 by Nadav Soferman
Modifying an image opacity so the image is semi-transparent is a common requirement when implementing modern graphics design. Reducing image opacity allows background images to feel less dominant. Reducing opacity also allows layering of multiple images one on top of the other, an important step when adding watermarks, badges and textual overlays to images.
 
Modern web browsers support opacity manipulation via CSS directives. This however does not solve the problem completely. Watermarks need to be embedded as part of the original image and can't be added on the client's side. In addition, manipulating the opacity of the image itself allows for a consistent view across all your service's mediums - website, mobile application, emails (notifications) and PDFs (reports). Emails in particular do not support many of the modern CSS directives.
→ Read the full post
More posts...