HTMLをJPGに変換

使い方

1. 1HTMLとCSSをエディタに貼り付けます。ページを開いた時点でJPGがすでに選ばれています。
2. 2画像領域の幅と高さをピクセルで設定します。
3. 3ピクセル密度を1x、2x、3xから選びます。
4. 4JPG品質を1から100の間で設定します。初期値は80です。
5. 5「画像を作成」をクリックし、JPGファイルをダウンロードします。

出力例

HTML JPG 変換の使い方

HTMLとCSSをエディタに貼り付け、画像領域の幅と高さを設定します。ページを開いた時点でJPGが選ばれているため、形式の切り替えは不要です。「画像を作成」をクリックし、ファイルをダウンロードしてください。

ツールはヘッドレスChromium（画面を持たないブラウザエンジン）でページを描画し、JPEGとして保存します。サイズの設定がもっとも重要です。画像のサイズは、設定した領域×ピクセル密度で決まります。一部が欠ける場合は、領域を大きくするか、CSSが領域内に収まっているか確認してください。ダウンロード後は、原寸で表示して確認してください。

• 貼り付けるときは、style要素や公開されているスタイルシートへのリンクを含む完全なHTMLを使います。
• ダウンロードしたファイルを原寸で開き、レイアウトを確認します。

HTML JPG 変換ツールの仕組み

貼り付けたHTMLとCSSは、レンダリングサーバー上のヘッドレスChromiumで描画されます。変換のたびに、リソースを制限したコンテナー内の新しいブラウザコンテキストで実行され、時間の上限が厳格に決められています。結果はJPEGファイルとして保存され、ダウンロードできます。

「HTMLをPNGに変換するツール」と同じエンジンを使うため、レイアウトとフォントは同じで、出力形式だけが異なります。このツールが扱うのは貼り付けたマークアップで、公開中のWebサイトではありません。JavaScriptは既定で実行されます。画像とスタイルシートは、公開されているhttpまたはhttpsのアドレスからのみ読み込まれます。

• 貼り付けたHTMLとCSS：対応しています。
• 公開中のWebサイトのアドレス：「Webサイトのスクリーンショットツール」を使ってください。

JPG品質とファイルサイズ

JPG品質は、エンコーダーが残す細部の量を決めます。設定できる範囲は1から100で、初期値は80です。値を下げるとファイルは小さくなりますが、目に見える劣化が増えます。値を上げると細部は残りますが、ファイルは大きくなります。

ファイルサイズを変えたいときは、変換の前に品質を調整してください。テストでは、フラットな色と文字のテストカードを640 x 340pxの領域で2xに変換しました（1280 x 680px）。結果は、品質30で23.5KB、50で29.0KB、80で41.0KB、95で65.2KB、100で88.8KBでした。数値はデザインによって変わるため、手持ちのHTMLで2、3段階の設定を試してください。

• 品質80は初期値で、多くのデザインの出発点として適しています。
• 細部を優先したいときは、品質95以上を試してください。ファイルは大きくなります。

JPGとPNGの選び方

正しい形式は画像によって変わります。JPEGは非可逆（ロッシー）圧縮で、アルファチャンネルを持ちません。写真向けの候補として選ばれることが多い形式です。PNGは可逆（ロスレス）圧縮で、完全な透過に対応しています。MDNの画像形式ガイドでは、図表のように鮮明さが求められる内容では、非可逆圧縮で満足のいく結果が得られない場合があると説明されています。

テストでは、フラットなカードは2xでPNG 41.6KB、JPEG（品質80）41.0KBで、ほぼ同じサイズでした。1200 x 630pxのソフトなグラデーションのバナーは、PNGで493KB、JPEG（品質80）で26.8KB、品質50で14.3KBでした。テストでは、グラデーションでの削減効果がもっとも大きくなりました。

同じHTMLを両方の形式で変換し、ファイルを比べてください。透明な端や鮮明な線が必要な場合は、「HTMLをPNGに変換するツール」を使ってください。これらの測定は2026-10-11に、ローカルテストエンジンで行ったものです。例であり、規則ではありません。

JPGと背景

JPEGは透過に対応していません。ページが背景を描かない部分は、JPGでは白く表示されます。角丸や透明な端も、JPGでは白になります。

別の色を使うには、CSSでhtml要素またはbody要素に背景を設定します。例：「background: #f5f1e8」。色は画像全体を覆う要素に適用すると、画像の全域を塗りつぶせます。透明な端を残す必要がある場合は、PNGを使ってください。

• html要素またはbody要素に背景を設定し、画像全体を塗りつぶします。
• 透過が必要なときは、PNGを使います。

画像サイズとピクセル密度

画像のサイズ（ピクセル）は、幅×高さ×ピクセル密度で決まります。たとえば、640 x 340pxの領域を2xに設定すると、1280 x 680pxの画像になります。ピクセル密度は1x、2x、3xから選べます。

ピクセル密度を上げると、同じ領域でも描画されるピクセルが増え、ファイルは大きくなります。無料のWebツールでは、幅は100から4000px、高さは100から2000pxまで設定できます。ピクセル密度を変えてもレイアウトは変わらず、描画されるピクセル数だけが変わります。

• 公開する画像と同じサイズに領域を設定します。
• テキストや細部をより多くのピクセルで描きたいときは、2xを使います。

SNSカード・バナー・メール画像の作成

このツールは、SNSカード、Webバナー、メール用の画像づくりに使えます。グラデーションの背景や写真のようなバナーは、JPEGでよく圧縮されます（前の項の測定結果を参照）。HTMLをJPEGに変換したい場合も、同じフォームを使えます。APIで使う場合は、値をjpegと書きます。

文字や図表をくっきり見せる必要がある場合は、品質を上げるか、PNGが必要になることがあります。ツールは各プラットフォームの規則を知りません。HTMLが描いたものを、設定したサイズのJPEGとして出力します。アップロードの前に、サイトやメールクライアントの要件と寸法、ファイルサイズを確認してください。インストールは不要です。

• SNSカード：大きな見出しをグラデーションの背景に載せます。
• バナー：必要なピクセルサイズをそのまま設定します。
• メール画像：品質を下げてファイルサイズを減らし、メールで表示を確認します。

HTMLに含めるフォント・画像・スクリプト

デバイスにあるフォントは、レンダリングサーバーにはありません。サーバーにあるのは、Liberation、Noto Sans、Noto Serifのファミリー、Noto Sans CJK（中国語・日本語・韓国語）、Noto Color Emojiです。2026-10-11のテストで、CJKの文字と絵文字が正しく描画されることを確認しました。それ以外のフォントは、公開URLまたはデータURLから@font-faceで読み込みます。

画像とスタイルシートは、公開されているhttpまたはhttpsのアドレスからのみ読み込まれます。プライベートネットワーク、localhost、クラウドのメタデータアドレスはブロックされます。JavaScriptは既定で実行され、ページを変更するスクリプトは結果にも反映されます。画像の読み込みに失敗すると、JPGには欠けた部分が残るため、使用前に確認してください。

• 画像ごとに公開されているhttpsアドレスを使います。
• カスタムフォントは、データURLと@font-faceを組み合わせて使います。

サイズとファイルの制限

無料のWebツールでは、1回の変換につき256 KBまでのHTMLを受け付けます。画像領域の高さは最大2000pxです。各訪問者は、1分あたり10回、1日あたり50回まで変換できます。これらの制限は無料のWebツールに適用され、APIには別のプラン上の制限があります。

匿名で使う場合は、セキュリティ確認（Cloudflare Turnstile）が必要です。ログインしているユーザーは確認を省き、1回のシンプルなレンダリングにつき1クレジットを使います。無料アカウントは毎月100無料クレジットを受け取れます。出力に透かしはありません。制限を超える場合は、使っていないCSSを削除するか、大きな画像を公開アドレスに移してください。

• 制限：無料のWebツールでは、1回の変換につき256 KBまでのHTML。
• 制限：無料のWebツールでは、画像領域の高さは最大2000px。

コードからHTMLをJPGに変換する方法

同じ変換は、APIを使えば自分のコードから行えます。https://api.aiipworld.com/v1/render にHTMLを含むPOSTリクエストを送り、outputに「jpeg」を指定します。options.qualityには1から100を指定します（初期値は80）。認証は、Authorization: Bearer ヘッダーでAPIキーを渡して行います。ツールの下には、cURL、Node.js、Pythonの例が表示されます。

APIは202とjob_idを返します。GET /v1/jobs/:id を、statusがsucceeded、failed、timeoutのいずれかになるまで問い合わせます。その後、download_urlからファイルをダウンロードします。download_urlは有効時間が短いため、受け取ったらすぐ保存してください。失敗したジョブとタイムアウトしたジョブのクレジットは返却されます。不明なオプション名は拒否されるため、各名前のつづりを確認してください。APIのドキュメントは/docs/、スクリーンショットAPIのページは/screenshot-api/にあります。

• その他のオプション：ビューポートの幅と高さ、device_scale_factorは1から3まで、full_pageとclip。
• 出力は「jpeg」で指定します。WebPはHTMLツールでは対応していません。

プライバシー：ファイルの扱い

HTMLは描画のためにレンダリングサーバーへ送られます。無料のWebツールでは、結果は10分後に削除されます。変換の履歴は保持されません。変換中、描画されたページはサーバーを経由します。共有が許可されている内容だけを貼り付けてください。

このツールには利用ポリシー（英語）が適用されます。実際のファイルと実際のページにだけ使ってください。

• APIキーなどの秘密情報をHTMLに含めないでください。
• 必要なJPGは保存してください。保存期間を過ぎると削除されます。

よくある質問