Cloudinary Blog

PNG optimization - saving bandwidth on transparent PNGs with dynamic underlay

PNG Optimization with Dynamic Background Color
There 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. 
 
The issue is that the image may be placed in different contexts, and in each context the background could have a different color. The need arises to give the image a transparent background, and this requires a file format that supports transparency (alpha channel). The format typically chosen is PNG, and this can increase file size substantially.
 

How it's usually done - image saved as transparent PNG

For example, the following photo of a person was taken. It was saved using the JPG format as expected.
 
Business man photo
 
Then a graphic designer manually edited and clipped the photo. In order to maintain transparency (alpha channel) of the clipped photo, the image is uploaded using the PNG format that supports transparency, in contrast to the JPG photo format. 
 
Transparent background PNG thumbnail
 
This allows the image to be placed on any background, however, the PNG format is not optimal for photos. The generated thumbnail weighs 59.8KB - almost 500% its weight as a 90%-quality JPG, which is 12.4KB. That might be a huge waste of bandwidth and money. It also harms the browsing experience of users, who need to wait much longer for images to load.
 

Now check this out - PNG optimization with dynamic background color

Here's an idea to dramatically cut the image size - not use PNG at all. The graphic designer can save the file as JPG and apply the desired background color dynamically.
 
One way to do this is by uploading the cropped photo to Cloudinary, and adding the dynamic background on the fly. In case you're new here, Cloudinary is a cloud-based system that can help you store, administrate, manipulate and deliver your website’s images. Image manipulation is performed dynamically using URLs or API calls you can easily generate within your code.
 
The first step is to deliver the image as a JPG with 90% quality. Note that Cloudinary can also crop the clipped photo to 200x250, on-the-fly, based on the automatically detected face. 
 
White background JPG
 
 
We're now down to 12.4KB for the file - almost 1/5 of its weight when it was saved as PNG. But of course the graphic designer still has the same problem - now to place the image over a non-white background, as in the example below. 
 
White background JPG on a red background
 
In Cloudinary, one simple solution is to create a JPG thumbnail on the fly, which already has the background color you need for the thumbnail. While you can do this manually using photo editing software, you definitely don't want to create many different versions for all possible background colors in your site and modify them when your graphic design changes.
 
The following example sets the 'background' transformation parameter (or 'b' for URLs) to an RGB color (#c11e31 red color in this case). The result is the same JPG image, which is dynamically generated with a red background that can now be placed nicely on top of the page's red background. 
 
The generated JPG image weighs just 12.8KB, an optimization compared to the PNG option. The JPG image saves 80% of bandwidth and improves page load time. In addition, you can dynamically modify the color parameter of the manipulation URL to any desired color of your site or app.
 
 
 
Red background JPG
  Green background JPG  Blue background JPG
 
Same image tag and URL generation in PHP:
<?php echo cl_image_tag("business_man_clipped.jpg",
        array( "width" => 200, "height" => 250, "crop" => "fill",
               "gravity" => "face", "background" => "#c11e31" )); ?>
In addition, further filters and effects can be applied on the clipped photo. The example below dynamically increases the strength of the red channel, reduces opacity, reduces color saturation and reduces contrast.

Watermark with red background JPG 
 
 

A harder case - PNG optimization with image-based backgrounds

The examples above are useful for a solid background color. However, modern websites might have gradient backgrounds or image-based backgrounds. Cloudinary can assist in optimizing bandwidth usage and user experience in this case as well.
 
For example, the following background image was uploaded to Cloudinary with the public ID of 'bn_bg_wide'.
 
 
Blue background sample
 
 
This image weighs 18.4KB. Saving it as a transparent background PNG means an extra 59KB, for a total weight as PNG of 78.2KB. Optimizing the PNG using a JPG image with a solid background is not an option at all in this case. Again, you can manually create a JPG image with the clipped photo and the background image underneath, but this will not work when you have plenty of photos and different background images. 
 
You can use Cloudinary's dynamic image overlays and underlays to overcome this issue and optimize the PNG.
 
In the following example, Cloudinary dynamically adds the cropped photo of the person as an overlay, 20 pixels from the top right corner, while scaling down the clipped photo to a height of 220 pixels.
 
 
Transparent background person on a blue image 
 
The resulting image weighs 24.8KB. This PNG optimization saved almost 70% of image size and bandwidth. 
 
Building the same URL, this time in Node.js:
cloudinary.image("bn_bg_wide.jpg",
  { overlay: "business_man_clipped", height: 220, crop: "fill",
    gravity: "north_east", x: 20, y: 20 })
Another option: instead of adding the clipped photo as an overlay, create a 200x250 face detection based thumbnail of the clipped photo and add the blue background image as an underlay image. 
 
 
Blue underlay image
 
 
The generated JPG image image including the underlay, weighs just 13.7KB.
 
Same example using Python (and Django):
cloudinary.CloudinaryImage("business_man_clipped.jpg").image(
  transformation = [
    { "width": 200, "height": 250, "crop": 'fill', "gravity": "face" },
    { "underlay": "bn_bg_wide", "width": 1.0, "height": 1.0,
      "flags": 'relative', "crop": 'crop', "gravity": 'north_east' }] )

 

Using the WebP format - and delivering it only on supported browsers

Another simple option to optimize the PNG is to convert and deliver the clipped image using the WebP format. This modern format is optimized for photos and also supports transparent backgrounds. 
 
The following 200x250 thumbnail was automatically converted by Cloudinary to the WebP format with the high 90% quality. The resulting image weighs just 10.5KB. This means saving 82% of the size and bandwidth of the PNG image, while having an almost identical result.
 

Red background WebP
 
 
The following Ruby on Rails command creates an image tag with the same manipulation and CDN delivery URL:
<%= cl_image_tag("business_man_clipped.webp", :width => 200, :height => 250, 
                 :crop => :fill, :gravity => :face, :quality => 90 %>
The only issue with the WebP format is that most browsers don't support it yet. Google Chrome and Android are the only major platforms that currently supports it. You can use Cloudinary's smart URLs with the 'f_auto' parameter which delivers using the WebP format to supported devices and using the PNG format to other devices.
 
 
You can read more about selective WebP image delivery here: Transparent WebP format CDN delivery based on visitors' browsers
 

Summary

One of our missions at Cloudinary is to [optimize](https://cloudinary.com/documentation/image_optimization) the performance of our customers' sites and apps, while improving their user experience and saving them money by reducing unnecessary bandwidth usage. Together with other cloud-based image manipulation capabilities, developers can perform complex image manipulations with optimized size and delivery, without spending precious time on achieving these tasks manually or building the automation themselves.
 
In this blog post we showed a use case in which we easily save about 80% of bandwidth with a simple PNG optimization, while delivering photos using Cloudinary's cloud-based image management. These capabilities are available in our perpetual free plan. We invite you to sign up, try out the dynamic background and overlay features, give us some feedback and share your insights in the comments below. 
 

Recent Blog Posts

10 Website Videos Mistakes and How to Solve Them

It should come as no surprise that video use on the internet is exploding. You can see the dramatic growth of video on the average site in this SpeedCurve blog post.

Average Website Weight over Time

With the growth in video comes greater bandwidth use, which is not only costly for your IT budget, but for your visitors as well. Beyond the expense, there is the user experience to consider. The heavier the page, the longer it will take to load, and the greater likelihood visitors will abandon your site. Page load speed is also an important factor in SEO ranking, so clearly video is something we need to take seriously and get right. Video is challenging, presenting terms still unfamiliar to developers - like codecs, bitrate and adaptive bitrate streaming. As a result, mistakes are being made in video implementation.

Read more
Android Data Saver: Optimizing Mobile Data Usage with Cloudinary

Over the life of a mobile device, the cost of a cellular data plan often exceeds that of the device itself. To optimize data usage and purge useless data on their mobile devices, users can enable Data Saver from Android 7.0 (API level 24). To do so, users toggle Data Saver in quick settings under the Notification shade or under Settings > Data usage. With Data Saver enabled, apps that aren't whitelisted cannot use cellular data in the background. They are also directed to consume less data while active.

Read more
Introducing the Cloudinary Upload Widget v2

At Cloudinary, we manage the entire pipeline of media assets for thousands of customers of varying sizes from numerous verticals. Cloudinary is an end-to-end solution for all your image and video needs, including upload, storage, administration, manipulation, optimization and dynamic delivery.

Read more
Convert an Image to a 3D Canvas With Cloudinary

Note
This post was cowritten with Daniel Mendoza.
Note
This post was cowritten with Daniel Mendoza.
Note

Famed American poet Henry David Thoreau once said, “This world is but a canvas to our imagination.” And, like your imagination, the transformations you can apply to images with Cloudinary are practically endless. You can even render any flat image to appear three-dimensional and framed on a canvas.

Read more
Mobile Optimization: Optimize Your Mobile-Web User Experience

TL;DR

We live in a visual world, often while on the go, and consumers expect media-rich web content. Accordingly, the loading speed of images and videos is a big factor in user experience. To optimize customer satisfaction with your mobile content, you must focus on the quality, format, and size of your digital assets. With Cloudinary, optimization is simple, not only enhancing your mobile web and app performance, but also upping your SEO game and boosting customer experience.

Read more