Convert HTML to GIF, one still picture per page

This HTML to GIF converter makes a still picture of your .html file, not a recording of it. Press Select HTML file (or drop an .html or .htm file anywhere on this page), pick a Resolution and press Convert to GIF. Our server lays the file out on A4 pages, as if it were printing them, and saves each page as a GIF. That is why the route reads HTML → PDF → GIF. A plain .txt file goes the same way when you convert text to GIF.

If you hoped to convert HTML to GIF as an animation, such as an ad banner or a page element that moves, this tool will not capture it. Scripts do not run and CSS animations do not play, so every GIF is a single frame. A short file gives one GIF named after it; a longer one gives a ZIP of numbered pages. Further down this page is a way to build a moving GIF from your HTML in a few steps.

Resolution is the only setting: 96, 150 (the default) or 300 DPI makes an A4 page 794 × 1123, 1241 × 1754 or 2481 × 3508 pixels. The route is graded Good enough, since the page is laid out for paper first. Text and flat colour come through as drawn, while photos lose fine detail, because a GIF holds at most 256 colours.

No browser opens your file. It is laid out the way a word processor prints a page, so the GIF can differ from what your browser shows. Our test page, a sale banner with a photo, a table and two CSS animations, came out like this:

• An element with a CSS animation keeps its normal style. A heading styled yellow, with an animation from green to red, came out yellow, and a box set to slide across stayed where it started.
• Anything hidden until an animation reveals it shows anyway: a line at opacity: 0, waiting to fade in, was in the GIF.
• An animated GIF inside the page shows its first frame only.
• JavaScript does not run, so a paragraph that a script rewrites keeps its original words.
• Boxes set side by side with flexbox are stacked. Table cells stay in a row, but borders given to them in CSS were missing, while the border attribute on the table tag drew them.
• A picture written into the file as a data URI is kept, and the clear parts of a PNG turn white. A picture saved beside the file is missing, because only the .html is uploaded.

Each page is A4 unless the HTML sets another size. For a banner, or the backup image of an HTML5 ad, add a CSS @page rule with the size and the margin in millimetres. In our test, @page { size: 80mm 66mm; margin: 0mm; } gave a GIF of 303 × 250 pixels at 96 DPI, filled edge to edge with the banner.

• To find the size in millimetres, divide the pixels you want by the DPI and multiply by 25.4: 300 pixels at 96 DPI is about 79 mm.
• Write the margin as 0mm. A plain margin: 0 was ignored, so the page kept its 2 cm margin and the last line spilled onto a second GIF.
• Upload the banner as one .html or .htm file with its pictures written in as data URIs. The tool does not take a zipped ad package.

This page cannot record an animation, but it can draw each moment of one when you give every moment a page of its own. Then you join the pictures yourself:

1. Write each frame as its own part of the file, and put style="page-break-before: always" on the heading that opens each frame after the first. The break worked on a heading in our test, but not on a div wrapped round the frame.
2. Convert the file here and unzip the download. Our three-frame banner gave three GIFs of 303 × 250 pixels, numbered in order: frames-p001.gif, frames-p002.gif and frames-p003.gif.
3. Add them to Images to GIF, check the order, and set the Time per frame (0.1 to 3 seconds) and the Repeat (Forever, Once or 3 times). Pick Original under Width to keep the banner's size. It works in your browser, so nothing is uploaded again.

For a document shown page by page rather than an animation, convert the HTML to PDF, then open the PDF in PDF to GIF and keep Animated GIF of all pages. Each page stays on screen for half a second to 5 seconds, and the GIF loops. That route takes two conversions.

A GIF is not always the poorer picture of a page. We converted a one-page receipt and our banner page with a photo at 150 DPI:

• Text, tables and flat colour suit GIF: the receipt came out at less than half the size of the PNG and looked the same.
• For photos, gradients or a picture you will edit, convert HTML to PNG. PNG keeps every colour: our photo had over 200,000, against 255 in the GIF.
• For the smallest file, convert HTML to WebP: 67 KB for the banner page and 41 KB for the receipt at Balanced quality. When a form only takes JPG, convert HTML to JPG: 140 KB and 95 KB.
• When the words must stay words, with links that still work and every page in one file, convert HTML to PDF.

Going the other way, convert GIF to HTML reads the words in a GIF back into a plain web page. Our receipt came back as lines of text with no table, and a few letters misread, so keep your original .html file.