Geek Answers Handbook

Why do Google images draw images using canvas?

Updated: Google Images no longer uses <canvas> .

I noticed that Google Images uses canvas to render images. <img> used as a backup for browsers that do 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 is the point of using <canvas> rather than <img> ?

+7
source share
4 answers

Perhaps this gives them more control over the contents of the image.

You can analyze the color range of the image, the prevailing color, even its contents (taking into account the smart algorithm).

You can also make pixel-by-pixel changes - change brightness, contrast, gamma, etc. (not sure why they would like to do this, perhaps for some future use).

You can also rotate the image (in browsers that support canvas, but not in CSS transforms, see for example this demo of my fabric.js ).

+4
source

Several mobile devices have a limit on the number of image resources per page. For example, Mobile Safari stops downloading images after uploading ± 6.5 MB of images .

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

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

Perhaps this was done due to scrolling too slow / some rendering problems on a page with a lot of images?

+1
source

More articles:


All Articles