Do you build things with AMP? Fill out the new AMP Developer Survey!
AMP

amp-anim

Description

Manages an animated image, typically a GIF.

Required Scripts

<script async custom-element="amp-anim" src="https://cdn.ampproject.org/v0/amp-anim-0.1.js"></script>

Behavior

The amp-anim component is almost identical to the amp-img element, but allows the AMP runtime to reduce CPU usage when the animation is off-screen. Like other elements, it supports an optional placeholder child, to display while the src file is loading:

<amp-anim width="400" height="300" src="my-gif.gif">
  <amp-img placeholder width="400" height="300" src="my-gif-screencap.jpg">
  </amp-img>
</amp-anim>

In the future, additional functionality, such as animation playback control, could be added.

Attributes

src

Similar to the src attribute on the img tag. The value must be a URL that points to a publicly-cacheable image file. Cache providers and email clients may rewrite these URLs when ingesting AMP files to point to a cached version of the image.

In AMP email, this must be an absolute URL.

alt

A string of alternate text, similar to the alt attribute on img.

attribution

A string that indicates the attribution of the image. For example, attribution="CC courtesy of Cats on Flicker".

height and width

An explicit size of the image, which is used by the AMP runtime to determine the aspect ratio without fetching the image.

Common attributes

This element includes common attributes extended to AMP components.

Invalid AMP email attributes

The AMP for Email spec disallows the use of the following attributes on the AMP email format.

  • srcset
  • object-fit
  • object-position

Styling

amp-img can be styled directly via CSS properties. Setting a grey background placeholder for example could be achieved via:

amp-anim {
  background-color: grey;
}

Validation

See amp-anim rules in the AMP validator specification.

도움이 더 필요하신가요?

이 문서를 수십 번 읽었음에도 여전히 궁금한 점이 남아 있나요? 다른 개발자들도 같은 심정일지 모릅니다. Stack Overflow에서 소통해 보세요.

Stack Overflow로 이동
버그나 누락된 기능을 발견하셨나요?

AMP 프로젝트는 여러분의 참여와 기여를 적극 환영합니다! 오픈 소스 커뮤니티를 통해 지속적으로 활동해 주셔도 좋지만 관심 있는 주제에 한 번만 기여하셔도 큰 도움이 됩니다.

GitHub로 이동하기