Cloudinary Blog

Google's new logo might not be as small as claimed

By Nadav Soferman Sep 10, 2015

The Internet was abuzz last week after the announcement of Google’s new logo. What caught our eyes more than the artistic changes was this sentence on Google's blog: "building a special variant of our full-color logo that is only 305 bytes, compared to our existing logo at ~14,000 bytes". Sounds exciting! But is it correct?

As Google owns the most popular site in the world, the size of their logo, which appears on most of their pages, is critical. Even a small reduction in file size means huge bandwidth saving (and therefore money saving and global energy saving). A drastic change of X46 from approximately 13.7KB to only 305 bytes sounds amazing, so we decided to see what all the fuss was about.

The bottom line is that these promising numbers can be misleading. As explained below the actual logo images embedded in Google's web pages are much bigger and can be optimized dramatically.

The size comparison is misleading - Comparing SVG and PNG

How can Google's new logo fit in only 305 bytes? Well only as a SVG file and definitely not as a PNG file. As Gizmodo explained in their article (originally on Quora), the new logo can be defined using a few circles and rectangles. For more details see: http://gizmodo.com/how-could-googles-new-logo-be-only-305-bytes-while-its-1728793790

Analysis of Google's new vector logo by Gizmodo

Google's article announcing the logo change mentioned that the logo's file size was reduced from ~14,000 bytes, but it seems that there may have been a PNG and SVG mix here.

The old logo in a vector format (SVG) weighed only 2.4KB. See: https://upload.wikimedia.org/wikipedia/commons/a/aa/Logo_Google_2013_Official.svg

2.4KB still equates to the old logo being X8 bigger than the new logo, but this difference is quite different from the claimed X46 reduction...

The actual file size on google.com is 13.3KB. Wasting 97% of file size

Even if the file size reduction is 'just' X8, this is still very impressive. We decided to check it out. We went to Google's most visited web page, http://google.com, as seen in the screenshot below.

Apparently Google is displaying the logo on their homepage as a PNG file of 544x184 (272x92 with double pixel density ratio). This image file weighs 13.3K, which is much larger than the promised 305 bytes logo...

https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png

I'm using Google's Chrome web browser which supports the SVG format. Why would Google choose to deliver this image as a PNG file, which is actually X45 bigger than the promised size and wastes 97% of the bandwidth involved in delivering the logo?

By the way, the old logo converted from SVG to a 544 pixels wide PNG weighing 22.2KB, which is just X1.7 bigger than the new logo.

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

https://res.cloudinary.com/demo/image/fetch/w_544/https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Logo_Google_2013_Official.svg/1280px-Logo_Google_2013_Official.svg.png

Ruby:

cl_image_tag("https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Logo_Google_2013_Official.svg/1280px-Logo_Google_2013_Official.svg.png", :width=>544, :crop=>"scale", :type=>"fetch")

PHP v1:

cl_image_tag("https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Logo_Google_2013_Official.svg/1280px-Logo_Google_2013_Official.svg.png", array("width"=>544, "crop"=>"scale", "type"=>"fetch"))

PHP v2:

(new ImageTag('https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Logo_Google_2013_Official.svg/1280px-Logo_Google_2013_Official.svg.png'))
  ->resize(Resize::scale()->width(544))
  ->deliveryType('fetch');

Python:

CloudinaryImage("https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Logo_Google_2013_Official.svg/1280px-Logo_Google_2013_Official.svg.png").image(width=544, crop="scale", type="fetch")

Node.js:

cloudinary.image("https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Logo_Google_2013_Official.svg/1280px-Logo_Google_2013_Official.svg.png", {width: 544, crop: "scale", type: "fetch"})

Java:

cloudinary.url().transformation(new Transformation().width(544).crop("scale")).type("fetch").imageTag("https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Logo_Google_2013_Official.svg/1280px-Logo_Google_2013_Official.svg.png");

JS:

cloudinary.imageTag('https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Logo_Google_2013_Official.svg/1280px-Logo_Google_2013_Official.svg.png', {width: 544, crop: "scale", type: "fetch"}).toHtml();

jQuery:

$.cloudinary.image("https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Logo_Google_2013_Official.svg/1280px-Logo_Google_2013_Official.svg.png", {width: 544, crop: "scale", type: "fetch"})

React:

<Image publicId="https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Logo_Google_2013_Official.svg/1280px-Logo_Google_2013_Official.svg.png" type="fetch">
  <Transformation width="544" crop="scale" />
</Image>

Vue.js:

<cld-image publicId="https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Logo_Google_2013_Official.svg/1280px-Logo_Google_2013_Official.svg.png" type="fetch">
  <cld-transformation width="544" crop="scale" />
</cld-image>

Angular:

<cl-image public-id="https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Logo_Google_2013_Official.svg/1280px-Logo_Google_2013_Official.svg.png" type="fetch">
  <cl-transformation width="544" crop="scale">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(544).Crop("scale")).Action("fetch").BuildImageTag("https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Logo_Google_2013_Official.svg/1280px-Logo_Google_2013_Official.svg.png")

Android:

MediaManager.get().url().transformation(new Transformation().width(544).crop("scale")).type("fetch").generate("https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Logo_Google_2013_Official.svg/1280px-Logo_Google_2013_Official.svg.png");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setType( "fetch").setTransformation(CLDTransformation().setWidth(544).setCrop("scale")).generate("https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Logo_Google_2013_Official.svg/1280px-Logo_Google_2013_Official.svg.png")!, cloudinary: cloudinary)

Maybe Google decided not to use the SVG format because older browsers don't support it. But there might be better solutions for that as well, as explained below.

Significant file size saving using PNG-8

Google delivers the new logo using the PNG-24 format and it weighs 13.3KB. But why not use the 8-bit version of the PNG format that definitely has a wide enough color space for such a logo?

The following on-the-fly image manipulation URL creates and delivers a PNG-8 version of the logo.

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

https://res.cloudinary.com/demo/image/fetch/fl_png8/https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png

Ruby:

cl_image_tag("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png", :flags=>"png8", :type=>"fetch")

PHP v1:

cl_image_tag("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png", array("flags"=>"png8", "type"=>"fetch"))

PHP v2:

(new ImageTag('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png'))
  ->addFlag(Flag::png8())
  ->deliveryType('fetch');

Python:

CloudinaryImage("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png").image(flags="png8", type="fetch")

Node.js:

cloudinary.image("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png", {flags: "png8", type: "fetch"})

Java:

cloudinary.url().transformation(new Transformation().flags("png8")).type("fetch").imageTag("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png");

JS:

cloudinary.imageTag('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png', {flags: "png8", type: "fetch"}).toHtml();

jQuery:

$.cloudinary.image("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png", {flags: "png8", type: "fetch"})

React:

<Image publicId="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" type="fetch">
  <Transformation flags="png8" />
</Image>

Vue.js:

<cld-image publicId="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" type="fetch">
  <cld-transformation flags="png8" />
</cld-image>

Angular:

<cl-image public-id="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" type="fetch">
  <cl-transformation flags="png8">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Flags("png8")).Action("fetch").BuildImageTag("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png")

Android:

MediaManager.get().url().transformation(new Transformation().flags("png8")).type("fetch").generate("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setType( "fetch").setTransformation(CLDTransformation().setFlags("png8")).generate("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png")!, cloudinary: cloudinary)

The resulting image looks exactly the same as the original image and is just 9.1KB! We've just saved Google about 32% of the bandwidth involved in delivering the logo on their homepage.

Google is promoting their modern WebP image format, which is supported by the Google Chrome browser. The following dynamic URL delivers the logo as WebP for Chrome browsers and as PNG for other browsers. The image as a lossless WebP looks exactly the same and weighs just 11.2KB. Which means a saving of 16% compared to the original PNG image.

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

https://res.cloudinary.com/demo/image/fetch/f_auto/https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png

Ruby:

cl_image_tag("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png", :fetch_format=>:auto, :type=>"fetch")

PHP v1:

cl_image_tag("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png", array("fetch_format"=>"auto", "type"=>"fetch"))

PHP v2:

(new ImageTag('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png'))
  ->delivery(Delivery::format(Format::auto()))
  ->deliveryType('fetch');

Python:

CloudinaryImage("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png").image(fetch_format="auto", type="fetch")

Node.js:

cloudinary.image("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png", {fetch_format: "auto", type: "fetch"})

Java:

cloudinary.url().transformation(new Transformation().fetchFormat("auto")).type("fetch").imageTag("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png");

JS:

cloudinary.imageTag('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png', {fetchFormat: "auto", type: "fetch"}).toHtml();

jQuery:

$.cloudinary.image("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png", {fetch_format: "auto", type: "fetch"})

React:

<Image publicId="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" type="fetch">
  <Transformation fetchFormat="auto" />
</Image>

Vue.js:

<cld-image publicId="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" type="fetch">
  <cld-transformation fetchFormat="auto" />
</cld-image>

Angular:

<cl-image public-id="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" type="fetch">
  <cl-transformation fetch-format="auto">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation().FetchFormat("auto")).Action("fetch").BuildImageTag("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png")

Android:

MediaManager.get().url().transformation(new Transformation().fetchFormat("auto")).type("fetch").generate("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setType( "fetch").setTransformation(CLDTransformation().setFetchFormat("auto")).generate("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png")!, cloudinary: cloudinary)

Even further file downsizing

If Google insists on delivering rasterized images rather than embedding SVG files, the file size can be further reduced.

As you might have noticed, Google embeds a double resolution ('retina display') version of the logo (544x184 instead of 272x92). The X2 image is delivered to devices and browsers with regular resolution (i.e., DPR 1.0), which do not benefit from the high resolution image. Checking the actual device resolution and delivering a regular 272x92 image when relevant, would make the file just 8KB, which means 40% bandwidth savings.

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

https://res.cloudinary.com/demo/image/fetch/w_0.5/https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png

Ruby:

cl_image_tag("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png", :width=>0.5, :crop=>"scale", :type=>"fetch")

PHP v1:

cl_image_tag("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png", array("width"=>"0.5", "crop"=>"scale", "type"=>"fetch"))

PHP v2:

(new ImageTag('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png'))
  ->resize(Resize::scale()->width(0.5))
  ->deliveryType('fetch');

Python:

CloudinaryImage("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png").image(width="0.5", crop="scale", type="fetch")

Node.js:

cloudinary.image("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png", {width: "0.5", crop: "scale", type: "fetch"})

Java:

cloudinary.url().transformation(new Transformation().width(0.5).crop("scale")).type("fetch").imageTag("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png");

JS:

cloudinary.imageTag('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png', {width: "0.5", crop: "scale", type: "fetch"}).toHtml();

jQuery:

$.cloudinary.image("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png", {width: "0.5", crop: "scale", type: "fetch"})

React:

<Image publicId="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" type="fetch">
  <Transformation width="0.5" crop="scale" />
</Image>

Vue.js:

<cld-image publicId="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" type="fetch">
  <cld-transformation width="0.5" crop="scale" />
</cld-image>

Angular:

<cl-image public-id="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" type="fetch">
  <cl-transformation width="0.5" crop="scale">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(0.5).Crop("scale")).Action("fetch").BuildImageTag("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png")

Android:

MediaManager.get().url().transformation(new Transformation().width(0.5).crop("scale")).type("fetch").generate("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setType( "fetch").setTransformation(CLDTransformation().setWidth(0.5).setCrop("scale")).generate("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png")!, cloudinary: cloudinary)

And if Google really wants their logo to be delivered quickly to places and devices with slow Internet connection, using a 70% quality lossy WebP image with a white background (rather than transparent), would result in a 4.7KB file (65% bandwidth savings).

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

https://res.cloudinary.com/demo/image/fetch/w_0.5,f_webp,q_70,b_white/https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png

Ruby:

cl_image_tag("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png", :width=>0.5, :quality=>70, :background=>"white", :crop=>"scale", :format=>"webp", :type=>"fetch")

PHP v1:

cl_image_tag("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png", array("width"=>"0.5", "quality"=>70, "background"=>"white", "crop"=>"scale", "format"=>"webp", "type"=>"fetch"))

PHP v2:

(new ImageTag('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png'))
  ->resize(Resize::scale()->width(0.5))
  ->backgroundColor(Color::WHITE)
  ->delivery(Delivery::format(Format::webp()))
  ->delivery(Delivery::quality(70))
  ->deliveryType('fetch');

Python:

CloudinaryImage("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png").image(width="0.5", quality=70, background="white", crop="scale", format="webp", type="fetch")

Node.js:

cloudinary.image("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png", {width: "0.5", quality: 70, background: "white", crop: "scale", format: "webp", type: "fetch"})

Java:

cloudinary.url().transformation(new Transformation().width(0.5).quality(70).background("white").crop("scale")).format("webp").type("fetch").imageTag("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png");

JS:

cloudinary.imageTag('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png', {width: "0.5", quality: 70, background: "white", crop: "scale", format: "webp", type: "fetch"}).toHtml();

jQuery:

$.cloudinary.image("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png", {width: "0.5", quality: 70, background: "white", crop: "scale", format: "webp", type: "fetch"})

React:

<Image publicId="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" format="webp" type="fetch">
  <Transformation width="0.5" quality="70" background="white" crop="scale" />
</Image>

Vue.js:

<cld-image publicId="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" format="webp" type="fetch">
  <cld-transformation width="0.5" quality="70" background="white" crop="scale" />
</cld-image>

Angular:

<cl-image public-id="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" format="webp" type="fetch">
  <cl-transformation width="0.5" quality="70" background="white" crop="scale">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(0.5).Quality(70).Background("white").Crop("scale")).Format("webp").Action("fetch").BuildImageTag("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png")

Android:

MediaManager.get().url().transformation(new Transformation().width(0.5).quality(70).background("white").crop("scale")).format("webp").type("fetch").generate("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setFormat("webp").setType( "fetch").setTransformation(CLDTransformation().setWidth(0.5).setQuality(70).setBackground("white").setCrop("scale")).generate("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png")!, cloudinary: cloudinary)

Summary

Whether Google's new logo is better than the older one is a matter of taste, but aiming for a file that consumes less bytes, reduce costs and improves performance is definitely a very smart choice. Highlighting the huge improvement in file size as a part of the logo announcement was an interesting twist and definitely helped Google's PR efforts.

Google might consider switching to SVG for displaying the logo on their sites. Until then, the delivered PNG images are much bigger than the promised 305 bytes. As shown in this post, even when using rasterized images, the file size and consumed bandwidth can be reduced dramatically using the PNG-8 format, the WebP format and regular DPR 1.0 image dimensions or lossy WebP compression.

All image format conversion and image manipulations mentioned in this post were done on-the-fly with Cloudinary's cloud-based image manipulations.

Recent Blog Posts

Generate Waveform Images from Audio with Cloudinary

By David Walsh Aug 30, 2017

This is a reposting of an article written by David Walsh. Check out his blog HERE!
I've been working a lot with visualizations lately, which is a far cry from your normal webpage element interaction coding; you need advanced geometry knowledge, render and performance knowledge, and much more. It's been a great learning experience but it can be challenging and isn't always an interest of all web developers. That's why we use apps and services specializing in complex tasks like Cloudinary: we need it done quickly and by a tool written by an expert.

Make All Images on Your Website Responsive in 3 Easy Steps

By Christian Nwamba Aug 28, 2017

Images are crucial to website performance, but most still don't implement responsive images. It’s not just about fitting an image on the screen, but also making the the image size relatively rational to the device. The srcset and sizes options, which are your best hit are hard to implement. Cloudinary provides an easier way, which we will discuss in this article.

The Future of Audio and Video on the Web

By Prosper Otemuyiwa Aug 23, 2017

Web sites and platforms are becoming increasingly media-rich. Today, approximately 62 percent of internet traffic is made up of images, with audio and video constituting a growing percentage of the bytes.

Embed Images in Email Campaigns at Scale

By Sourav Kundu Aug 21, 2017

tl;dr

Cloudinary is a powerful image hosting solution for email marketing campaigns of any size. With features such as advanced image optimization and on-the-fly image transformation, backed by a global CDN, Cloudinary provides the base for a seamless user experience in your email campaigns leading to increased conversion and performance.

Build the Back-End For Your Own Instagram-style App with Cloudinary

By Christian Nwamba Aug 16, 2017

Github Repo

Managing media files (processing, storage and manipulation) is one of the biggest challenges we encounter as practical developers. These challenges include:

A great service called Cloudinary can help us overcome many of these challenges. Together with Cloudinary, let's work on solutions to these challenges and hopefully have a simpler mental model towards media management.

Build A Miniflix in 10 Minutes

By Prosper Otemuyiwa Aug 14, 2017

Developers are constantly faced with challenges of building complex products every single day. And there are constraints on the time needed to build out the features of these products.

Engineering and Product managers want to beat deadlines for projects daily. CEOs want to roll out new products as fast as possible. Entrepreneurs need their MVPs like yesterday. With this in mind, what should developers do?