How to Create a GIF Image for a Website

Short answer: Create one image layer per frame, keep every frame the same size, export the layers as an animated GIF, choose the frame delay and looping behavior, then embed the exported file with a normal HTML <img> element. GIMP provides this workflow directly; Google Web Designer provides a separate Animated GIF document workflow.

GIF is still useful for simple animations that need broad browser compatibility. It is not always the smallest or fastest format, so compare GIF with animated WebP, AVIF, or APNG for your audience and content.

1. Plan the animation before creating frames

An animated GIF is a sequence of still images played in order. Decide these points first:

Canvas size: design at the dimensions you intend to display. Larger frames increase download size.
Frame order: place frames in playback order.
Timing: decide whether every frame uses one delay or whether some frames need to pause longer.
Looping: choose a repeating animation or a single play-through.
Transparency: confirm that the visual still works with transparent areas after GIF conversion.
Color: GIF uses indexed color. Full-color artwork may show dithering or other conversion artifacts.

2. Create an animated GIF in GIMP

Step 1: Create one layer per frame

Open GIMP and create a new image, or open an existing image that will become the first frame.
Add one layer for each additional frame.
Keep all layers the same width and height.
Arrange the layers in the order they should play.
Review the canvas at the size it will have on the website. Designing a very large canvas and shrinking it in CSS still requires the browser to download the larger file.

Step 2: Export the layers as a GIF

Choose File > Export As.
Give the file a .gif extension and select GIF as the output format.
In the GIF export dialog, enable As animation.
Enable Loop forever when the animation should repeat continuously.
Set a default frame delay if your layers do not already specify delays.
Choose the frame disposal behavior. Replacing the previous frame is appropriate when each frame is a complete image; a cumulative mode can be useful when frames contain only changes.
Export the file.

GIMP documents these animation controls, including looping, unspecified frame delay, and frame disposal behavior. There is no universal setting that is correct for every animation, so preview the result and adjust it for the intended motion.

Read GIMP’s official export documentation.

Step 3: Preview and revise

Open the exported GIF in a current browser or image viewer.
Check that the first frame appears correctly.
Watch for unexpected pauses, skipped-looking transitions, or frames that leave visual remnants behind.
Inspect transparency and color conversion.
Check the file size and reduce the canvas dimensions, frame count, or visual detail when the file is larger than the page needs.

3. Create an animated GIF with Google Web Designer

Google Web Designer documents another route that starts with an Animated GIF document. The workflow lets you name the document, choose a location and dimensions, add image or video assets, preview the animation, and publish it as a GIF.

Create a new document and select Animated GIF.
Set the document name, location, and dimensions.
Add image or video assets and arrange the animation.
Preview the result.
Publish or export the animation as a GIF.

Google’s guide notes that animated GIF authoring is not supported on Linux. Check the current product availability before choosing this workflow.

Read Google’s official animated GIF guide.

4. Embed the GIF in a website

Once the file is available at a public URL, use a normal image element:

<figure>
  <img
    src="/images/product-demo.gif"
    alt="A product dashboard opening and displaying a report"
    width="800"
    height="450"
  >
  <figcaption>The report opens and updates automatically.</figcaption>
</figure>

Use descriptive alternative text that explains the useful content or action. If the GIF is decorative, use an empty alt attribute instead. Set width and height that match the file’s proportions so the page can reserve space while the image loads.

Responsive sizing

.demo-gif {
  display: block;
  height: auto;
  max-width: 100%;
  width: 800px;
}

The CSS scales the image down on narrow screens while preserving its aspect ratio. It does not reduce the bytes downloaded; optimize the exported file for that.

Respect motion preferences

A continuously moving image can be distracting or uncomfortable for some visitors. If the animation is not essential, provide a still fallback or offer a pause control. For animations you control with HTML and CSS, honor prefers-reduced-motion. A GIF itself cannot be paused with CSS alone, so consider a still image or a different implementation when user-controlled playback matters.

5. GIF, WebP, AVIF, or APNG?

Format	Use it when	Tradeoffs
GIF	You need a simple animation with broad browser compatibility.	Indexed color can reduce color quality, and MDN describes GIF as less performant than newer animation choices.
Animated WebP	Smaller delivery or richer visual quality matters and your audience supports it.	Check target browser support and provide a fallback where required.
Animated AVIF	High compression and newer image capabilities are priorities.	Use a fallback for browsers without suitable support.
APNG	Lossless animation is important.	Confirm support for the browsers you need to serve.

MDN describes GIF as a good choice for simple images and animations, while also covering WebP, AVIF, and APNG as alternatives. Select the format by comparing browser support, appearance, and delivered file size for your actual audience.

MDN image file type and format guide and MDN’s multimedia performance guide provide the format background.

6. Optimize file size and playback

Reduce dimensions: export at the largest size you truly display.
Remove redundant frames: keep only frames that change the visible result.
Use longer delays for static moments: this can remove unnecessary duplicate frames.
Simplify high-detail backgrounds: indexed-color conversion is more noticeable in photographs and gradients.
Choose disposal deliberately: incorrect disposal can create trails or flashes.
Preview on the real page: inspect layout, loading behavior, and perceived speed on the devices your visitors use.
Compare formats: export a WebP, AVIF, or APNG candidate when the audience supports it, then compare visual quality and file size.

There is no single file-size threshold that fits every page. The right target depends on the animation’s role, dimensions, audience, and connection conditions.

7. Troubleshooting common GIF problems

Problem	Likely cause	Fix
The file is static.	Animation was not enabled during export, or the file contains only one layer.	Confirm that each frame is a separate layer and enable As animation in the GIF export dialog.
Frames appear in the wrong order.	Layers are ordered incorrectly.	Reorder the layers in playback order, then export again.
The animation leaves trails.	Frame disposal does not match the way frames were drawn.	Try a replace-style disposal when every frame is complete, or a cumulative mode when frames contain only changes.
The animation is too fast or too slow.	Frame delays are missing or unsuitable.	Set a default delay during export or assign delays to individual frames, then preview again.
Colors look harsh or dithered.	GIF’s indexed-color palette cannot represent the source directly.	Simplify gradients or color detail, inspect the conversion, and compare an animated WebP, AVIF, or APNG version.
The page downloads too much data.	Frames or canvas dimensions are larger than necessary.	Reduce dimensions, remove redundant frames, reduce detail, and compare another animation format.
Transparency looks wrong.	The source uses partial transparency or relies on a background that changed during conversion.	Preview the exported GIF against the page background and revise the artwork or output format.
The image does not appear on the page.	The URL is wrong, the file was not deployed, or the server is returning an error.	Open the image URL directly, check the browser network panel, and correct the path or deployment.
Google Web Designer cannot create the document.	The platform may not support animated GIF authoring.	Use the GIMP workflow or verify the current Google Web Designer platform requirements.

8. Or skip the browser setup

If your actual task is capturing a clean still image of a web page for documentation, previews, or a social card, ScreenshotNeo provides a one-request screenshot API. It returns PNG, JPEG, WebP, or PDF; it does not create an animated GIF, so use the frame-based workflows above when you need animation.

See the ScreenshotNeo API documentation for the complete option list.

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://stripe.com \
  -o shot.webp

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://stripe.com'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const image = Buffer.from(await res.arrayBuffer());
await fs.promises.writeFile('shot.webp', image);

ScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before the shot. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and the response identifies the result with X-Page-Verdict and X-Billed headers. Its MCP server lets AI agents use take_screenshot, get_page_info, and capture_pdf. The Free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000.

Create a free ScreenshotNeo account.

9. FAQ

Can I make a GIF from a video?

Yes. Extract or import the video frames into an animation tool, arrange them in order, and export as a GIF. Review dimensions, timing, color, and file size after conversion.

Should a GIF loop forever?

Only when continuous repetition fits the content. Otherwise, choose a finite loop or a still fallback so visitors are not exposed to unnecessary motion.

Why does my GIF look worse than the source image?

GIF’s indexed-color palette cannot preserve every full-color image exactly. Dithering and palette changes are especially visible in photographs, gradients, and detailed illustrations.

Can HTML change a GIF’s frame delay?

No. The delays are stored in the GIF during export. Re-export the file with different timing settings.

Is a GIF always the best web animation format?

No. GIF is a practical compatibility choice, while animated WebP, AVIF, or APNG may deliver better performance or quality for supported audiences.