HTMLをGIFに変換

Q: チャットアプリで送れるサイズまでGIFを小さくするには？

**HTMLページの幅**を狭くするか、最初のページだけを変換してください。それでも上限を超える場合は、[Discord用にGIFを圧縮](/compress-gif-for-discord)すると、アップロード上限に近づけて小さくできます。

HTMLファイルをブラウザエンジンで描画し、GIFとして保存します。メール署名、古い掲示板、旧式のCMSの入力欄など、今もこの形式を求められる場面に対応します。ウィンドウ幅と、縦長の画像1枚にするかページ単位のフレームを連続させるかを選べます。

またはDOC, DOCX, DOCM … ファイルをここにドロップ ·

1ファイルあたり最大95 MB· 最大20ファイルまで· 30分後に削除

出力

変換先

解像度

画像の出力方法

ファイルは当社のサーバーで処理され、30分後に削除されます。

このツールの使い方

1
HTMLをアップロード
.html、.htm、.mhtml ファイルを追加します。1回に最大20個、1ファイルあたり95 MBまで対応しています。ページを「ウェブページ、単一ファイル」として保存すると、画像やスタイルも一緒に保持されます。
2
幅とレイアウトを選択
HTMLページの幅は1280 pxです。メールテンプレートなら600 pxにしてください。画像の出力方法は「1枚の長い画像」にすると静止GIFが1枚できます。「ページごとに1枚」にすると、ページ大のフレームが順に表示されます。
3
GIFに変換
変換ではなく「GIFに変換」ボタンを押します。GIFを色付きの背景の上に置く場合は、詳細設定の背景を透明にするをオンにしてください。

HTMLのGIF変換は、ページの動きではなく見た目を取り込みます。ブラウザーが指定した幅でページを描画し、結果は静止GIF1枚、またはページ大のフレームをまとめた1つのファイルになります。

HTMLをGIFに変換する仕組み

まず、HTMLページの幅(320〜3840 px)で、通常のウェブページと同じようにHTMLをレイアウトします。ファイル内のスタイルと画像は適用され、読み込めないフォントは近いフォントに置き換えられます。その後、描画されたページを取り込みます。

画像の出力方法を「1枚の長い画像」にすると、ヘッダーからフッターまでのページ全体が静止GIF1枚になります。「ページごとに1枚」にすると、ページ大に分割され、それらが順に表示される1つのGIFのフレームになります。長いニュースレターや複数セクションのランディングページを、スクロールせずに確認するのに便利です。

制限はGIFの形式によって決まります。GIFは1987年にCompuServeが発表し、1989年のGIF89aでフレーム間隔と透明色が加わりました。これは今もすべてのビューアーが対応しています。各フレームは256色のパレットに限られるため、コンバーターはページの色を見つけられる最適なパレットに割り当てます。文字、アイコン、ボタン、フラットなブランドカラーはきれいに出ますが、写真や柔らかい影は最も劣化します。

Webページを描画したGIFで注意すべき制限

1フレームあたりの色数: 256
透明はピクセル単位で、縁のぼかしなし: オン/オフ
ページは録画ではなく取り込み: 静止
1回のHTMLファイル数、1ファイル95 MBまで: 20

HTMLをGIFに変換した結果の目安

誤解ページのGIFには、ホバー効果やアニメーションも映る。

事実操作に応じた状態や動きは、人やスクリプトが起こさないと現れません。取り込まれるのは静止した状態のページです。

誤解GIFはウェブページ用として最も小さい画像形式だ。

事実写真を含むページでは、JPGやWebPのほうがたいてい大幅に小さくなります。GIFが有利なのは、単純でフラットなグラフィックだけです。

誤解GIFはウェブサイトのアドレスからページを取得してくれる。

事実コンバーターが処理するのは、アップロードしたHTMLファイルです。先にブラウザーからページを保存してください。できれば単一のMHTMLファイルがおすすめです。

誤解フレームを増やすとGIFが鮮明になる。

事実フレームを増やしても長さとファイルサイズが増えるだけで、細部は増えません。鮮明さはページの幅とカラーパレットで決まります。

HTML

ハイパーテキスト・マークアップ言語

HTMLはウェブのマークアップ言語で、1990年代初めにティム・バーナーズ=リーが考案し、現在はWHATWGが「Living Standard」として管理しています。HTMLファイルは見出し、段落、リンク、表、画像、フォームを記述し、見た目の装飾は通常CSSが担当します。すべてのブラウザで表示でき、メールテンプレートや保存したウェブページにも使われます。HTMLファイル単体では外部の画像やスタイルシートに依存していることが多く、単独で移動すると表示が崩れる場合があります。

圧縮方式: –
透過: –
アニメーション: –
登場時期: 1993 · Tim Berners-Lee; maintained by WHATWG

HTML 変換

GIF

Graphics Interchange Format

GIF は1987年に CompuServe が導入した形式で、短いループアニメーションでは今も最も広く対応しています。可逆ですが、1フレームあたり 256 色のパレットに制限されるため、写真やグラデーションではバンディングやディザリングが目立ちます。透明はオン/オフのみ(1 ビット)で、曲線の縁がギザギザになります。アニメーション GIF は、同じクリップの MP4 や WebP よりはるかに大きくなることがよくあります。すべてのブラウザー、チャットアプリ、SNS で GIF を再生できます。

圧縮方式: 可逆
透過: 対応
アニメーション: 対応
登場時期: 1987 · CompuServe

GIF 変換

描画したページをGIFにするのは、メール署名や古いプラットフォームなど、出力先がGIFしか受け付けない場合や、動画プレーヤーなしで再生できる1つのファイルに複数のページフレームをまとめたい場合です。

HTMLのGIF変換に関するよくある質問

CSSアニメーションをGIFアニメにできますか？

いいえ。ページは一度だけ描画されて取り込まれるため、CSSトランジション、キーフレームアニメーション、動画、スクリプトによる効果はその瞬間の状態で止まります。動きを残したい場合は、ページを再生しながら画面を録画し、その録画を動画GIF変換で変換してください。

GIFにするとグラデーションや写真がざらついて見えるのはなぜですか？

GIFは1フレームあたり最大256色までしか使えません。滑らかなグラデーションや影、写真を含むページには数千色が含まれるため、ディザリングで近似され、ざらつきや色の帯として現れます。フラットなデザインや文字はきれいに残ります。写真が多いページは、全色を保てるHTMLをPNGに変換が向いています。

透過GIFの縁がギザギザに見えるのはなぜですか？

GIFの透明はピクセル単位のオン・オフで、半透明は使えません。背景となじませたアンチエイリアスの縁は、単色になるか消えるため、暗い背景では明るい縁取りが残ることがあります。白い背景に置く場合は、白い背景のままにしておくほうが無難です。

GIFで保存したHTMLメール署名はどのメールアプリでも表示されますか？

静止GIFはほぼすべてのメールクライアントで表示されるため、署名にも長年使われてきました。アニメーションGIFは確実ではなく、2007〜2013年のWindows版クラシックOutlookでは最初のフレームしか表示されません。重要な内容は1コマ目に入れてください。

チャットアプリで送れるサイズまでGIFを小さくするには？

HTMLページの幅を狭くするか、最初のページだけを変換してください。それでも上限を超える場合は、Discord用にGIFを圧縮すると、アップロード上限に近づけて小さくできます。