Search code examples
pnggifgoogle-search

Why when looking for gifs in Google images, the gifs are not moving?

I'm looking to replicate the effect of the Google search engine in terms of how gifs are presented. When looking for images in Google, and specifically for gif images, I would expect to see the same kind of not moving results but instead only see static images. Is there a way to achieve that?

https://www.google.com/search?q=spinner+gif

and for instance here it acts as I expected

https://giphy.com/explore/loading

gif images

Solution

  • From inspecting the code I see Google is creating base64 fixed images, that represent a frame of the gif. Also, there's a link on other images that are part of the results but is an internal link to an internal cache from Google Search.

    That's why the images from the results page is not loading any gif because all are fixed images represented by only 1 frame at the moment of the load page.

    <img data-ils="4" jsaction="rcuQ6b:trigger.M8vzZb;" class="rg_i Q4LuWd" jsname="Q4LuWd" alt="Loading Gif GIF - Loading Gif - Discover &amp; Share GIFs" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRw_4375N--RxEJ2qxaczAK-W3kE9dEoLHudOV-CtcG0w&amp;usqp=CAU&amp;ec=48665701" width="241" height="181">

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAATYAAACjCAMAAAA3vsLfAAAAz1BMVEX////6+vr89PT+/Pz87OL86Nr89vaxvIL4sXv8///l6NbM1c2istT4r3b2l3f9lamwwdft8OX+9/SYlcuwu9XV2uajtNLO1eS4xNfz8+z19fGxvIXM07utuXyyvIrEy6j98Ov66ur707n84c/f3sb3pmW2wZX5u4z3rob5wJb4q2/86OP5y6/71b398+z64uH219L3p4v1nYD6vK32kXH2tKH2oZP1zcP4s6r1w7T7sbj9i6L7nq7Y2tX4xsjh5eXh5+38v8mpq9Khnc61tNbzoKeKAAACnElEQVR4nO3Za1PaQBiG4d0EA4EECKBgkIq1Vm1toK2lrVCh6P//Td1NsuXUAn6KGe7LmRw2+bDzzLuHoBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgJyz7ax7kEe2ZZHbC5yexifHspz4gqrbR9jtnemzia1RKJDbbkGvGOdmKSJOrdDIuk85EL4pFnuBqTZbpUa17eO8WCyem9j6KrV+1j3KhUDF1rXTlZRi2+3i7aWO6F2v15XpCmpmtkZEeP9z5ftXdyqe8vsz0xT19XLaP1Iy7Njrdu2XSn5pc93UoR0VMuhQPlg3Orfb9eZCHBuDdIlcubOuP/j+jRW3S/PIjmstSU2uvn+w1mP4eHf7ab09KkRseFfpeGRaQ1K6riuEq+/1n36QPEpaFq8ffM3JZODpWFz3YjCwFvfpVXyyndBZff2wmTlMnYefq9Xql6+WaTe1JaQdlLWGMI0bY/vQpINPHaP7qnb/bdFuYktSK5eXUz5sS9U2SnL77qb3i9jCJLWAajMW4Qjn8sdo9LPvmrAWsckwCspBaEvmttTy0qgXUleYBXQpUHVQn/Zplqyk/+L0Nz4HpCMZllsNHsbjibPaJiuVyi/+HbPF47hWq03WPgl0bJXKNJse5cFQpzZ+XG+ekttWOrXaUF3M/o5TGapDGOeWXb9euYfa5Lcaoc68OTdNnXpb/9A7pdp2em42n9Reo9WSOrZ6J+v+5EO72dTVdux5x3FsdepsH3MVW1uIlue11CynYuuw+dht9qSKTQ3PE887UbOaLje2urvN1Mw2EyY2EarcZtn2KBfs1rPedIiO58WLQdhuZ9uhfGl7Hnm9nN1hKQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACA3PsD/R0hdMCZUboAAAAASUVORK5CYII=" data-deferred="1" class="rg_i Q4LuWd" jsname="Q4LuWd" alt="Spinner - Build GIF, SVG, APNG and CSS Ajax Preloaders with Loading.io" data-iml="1256" data-atf="true" width="310" height="163">

    https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRw_4375N--RxEJ2qxaczAK-W3kE9dEoLHudOV-CtcG0w&usqp=CAU&ec=48665701

    You can use the ImageMagick, and specifically the convert command to extract a frame from the gif image.

    convert input.gif[0] output_frame.png