seo Question posted in
Some basic information to get you started with this can be found here.

Using amp-img tag for gif animations – SEO

There is <amp-anim> tag for gif animations.
But I found that <amp-img> tag can show gif animations.
I know <amp-anim> tag can set a placeholder, but I don’t need it.
And I found no defference any more.
So, my question is “Is there problem to use <amp-img> tag for gif animations?”

Open https://ampbyexample.com/playground/ and paste the html code below, if you want to check how work <amp-img> tag and <amp-anim> tag.

<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-anim" src="https://cdn.ampproject.org/v0/amp-anim-0.1.js"></script>
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <link rel="canonical" href="https://ampbyexample.com/components/amp-anim/">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
<body>

  <h2>amp-anim supports gif animation</h2>
  <amp-anim width="245" height="300" src="/img/gopher.gif" alt="an animation"
            attribution="The Go gopher was designed by Reneee French and is licensed under CC 3.0 attributions.">
  </amp-anim>

  <h2>amp-img also supports gif animation</h2>
  <amp-img width="245" height="300" src="/img/gopher.gif" alt="an animation"
            attribution="The Go gopher was designed by Reneee French and is licensed under CC 3.0 attributions.">
  </amp-img>
</body>
</html>
Tags:

2

Answers


  1. 0

    You can read in the amp-anim docs that amp-anim is an extended version of amp-img in that it provides additional functionality with the GIF animations specifically in mind. As long as amp-img is working for you then by all means use it.

    The amp-anim component is very similar to the amp-img element, and
    provides additional functionality to manage loading and playing of
    animated images such as GIFs.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search