Embed a GIF with an image element that points to the actual media URL. A webpage URL is not an image source, and changing its extension will not produce a usable file.
Include dimensions and an alternative description so the page remains understandable while the image loads or when a visitor cannot see it.
Start with a simple image
<img
src="/media/team-celebration.gif"
alt="The team celebrates the completed release"
width="480"
height="270"
loading="lazy"
style="max-width: 100%; height: auto;"
/>
The local path is illustrative: replace it with media you are authorized to publish. The width and height should match the file’s aspect ratio. Reserve space before loading to reduce layout movement.
Lazy loading suits content below the first screen. Do not automatically lazy-load the main image needed immediately, because that can delay its appearance.
Design for motion preferences
An animated GIF inside an image element has no native pause control. For an animation that needs user control, consider a static preview with an explicit play action or a video rendition with suitable controls.
Use reduced-motion preferences to start with a still image, and make the essential meaning available in text. Replacing a GIF with an autoplaying video does not solve accessibility by itself.
MDN’s image-format guide explains format tradeoffs, and the GIF accessibility guide covers pause behavior.
Keep API access separate from display
A public webpage should not contain your secret GIF API key. Fetch search results through the appropriate authenticated server flow, then use media URLs according to the provider’s documentation and terms.
GIFs.so requires verified access for catalog browsing and API use. Its integration guide distinguishes source, thumbnail, GIF, and MP4 fields. Do not assume that another provider grants the same embedding or caching permissions.
If a file fails, show a useful fallback rather than a broken-image icon. Check the response content type, availability, and destination page’s content security policy. The links-vs-files article explains why a working source-page link can still fail when placed in an image element.