Why does Google Images draw images using canvas?

Question

Updated: Google Images does not use <canvas> any more.

---

I noticed Google Images is using canvas to render images. <img> is used as a fallback for browsers that does not support canvas.

<a class="rg_l" style="..." href="...">
  <canvas
    id="cvs_NcG8skPEDu7FWM:b"
    style="display:block"
    width="83"
    height="113">
  </canvas>
  <img 
    class="rg_i"
    id="NcG8skPEDu7FWM:b"
    data-src="http://t0.gstatic.com/images?q=tbn:ANd9GcQCB5NEbEUQhtmFI098HLSkfmoHTBtUfERUNkNKrhgFbtFBxZXY9ejXn_pUGg"
    height="113"
    width="83"
    style="width:83px;height:113px"
    onload="google.isr.fillCanvas(this);google.stb.csi.onTbn(0, this)"
    src="http://t0.gstatic.com/images?q=tbn:ANd9GcQCB5NEbEUQhtmFI098HLSkfmoHTBtUfERUNkNKrhgFbtFBxZXY9ejXn_pUGg">
</a>

What's the point of using <canvas> rather than <img>?

Answer 1

Maybe it gives them more control over the contents of an image.

You can analyze color range of an image, prevailing color, even its content (given smart algorithm).

You can also perform per-pixel modifications — change brightness, contrast, gamma, etc. (not sure why they would want to do this; perhaps for some future use).

You can also rotate an image (on browsers that support canvas but not CSS transformations; see, for example, this demo of my fabric.js).

Answer 2

Several mobile devices have a limit on the number of image resources on one page. For example, Mobile Safari stops loading images after ± 6.5 MB of images have been loaded.

As mentioned in another answer, by using <canvas> instead of several <img> elements with external files as their src, Google can load all the images in one request (which is obviously better for performance) — but it also works around this limitation.

Answer 3

• You can easily load all the images in one request or even embed their source in the page without inflating the source with base64.
• You can make copies of images in JS without waiting for the cache.