# HTMLをJPGに変換 > 貼り付けたHTMLとCSSを、指定した幅・高さ・ピクセル密度・品質のJPG（JPEG）画像に変換する無料ツールで、ヘッドレスChromiumで描画します。 HTMLをJPGに変換する無料のオンラインツールです。サーバー上のヘッドレスChromium（画面を持たないブラウザエンジン）がページを描画するため、出力はブラウザで表示される見た目と一致します。幅、高さ、ピクセル密度、JPG品質を指定してダウンロードでき、登録もインストールも不要です。 ## 主な仕様 - 入力：HTMLとCSSをエディタに貼り付けます。上限は256 KBまで、幅は100から4000px、無料ツールの高さは2000pxまで、ピクセル密度は1x、2x、3xです。 - 出力：JPG（JPEG）で、品質は1から100、初期値は80です。JPEGは透過に対応しないため、描画されない部分は白になります。 - テスト：フラットなカードは品質80でJPG 41KB、PNG 42KB。1200 x 630pxのグラデーションバナーは、JPG 27KB、PNG 493KBでした（品質80）。 - API：POST https://api.aiipworld.com/v1/render にoutput jpegとoptions.qualityを指定します。PNG版はHTMLをPNGに変換するツールです。 - アカウント登録なしの無料利用では、訪問者ごとに毎分10件、毎日50件まで変換でき、透かしは入りません。ログインしているユーザーは、レンダリングごとに1クレジットを使用します。毎月100無料クレジットが付与されます。 - ファイルは自動的に削除されます。アカウント登録なしの場合は変換後10分、無料アカウントの場合は1日で削除されます。 - 開発者は、APIキーを付けてPOST https://api.aiipworld.com/v1/renderを送信すると、同じレンダリングを実行できます。詳しくはスクリーンショットAPIページをご覧ください。 ## 使い方 1. HTMLとCSSをエディタに貼り付けます。ページを開いた時点でJPGがすでに選ばれています。 2. 画像領域の幅と高さをピクセルで設定します。 3. ピクセル密度を1x、2x、3xから選びます。 4. JPG品質を1から100の間で設定します。初期値は80です。 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は保存してください。保存期間を過ぎると削除されます。 ## よくある質問 ### HTMLをJPGに変換するにはどうすればよいですか？ HTMLとCSSをエディタに貼り付け、画像領域の幅と高さを設定してから「画像を作成」をクリックします。JPGはすでに選ばれているため、そのままダウンロードできます。必要に応じて、変換の前にピクセル密度とJPG品質を設定してください。 ### JPEGとJPGは同じ形式ですか？ はい、同じです。JPGとJPEGは同じ形式の2つの名前です。ツールの形式一覧にはJPG（JPEG）と表示され、APIではjpegという値を使います。 ### JPGの背景が白いのはなぜですか？ JPEGは透過に対応していないため、描画されない部分は白く表示されます。CSSでhtml要素またはbody要素に背景色を設定すると解決します。 ### JPG品質はどれにすればよいですか？ 初期値の80から始めてください。設定範囲は1から100です。文字や端の周りにブロック状のノイズが見える場合は上げ、ファイルを小さくしたい場合は下げてください。選ぶ前に、手持ちのHTMLで数種類の設定を比べてください。 ### JPGはPNGより小さくなりますか？ 必ずしもそうではありません。フラットなカードのテストでは、品質80のJPEGはPNGとほぼ同じサイズでした。グラデーションのバナーのテストでは、JPEGがはるかに小さくなりました。結果はデザインによって変わります。 ### HTML文書をJPGに変換できますか？ はい、貼り付けられるHTMLとCSSであれば変換できます。.htmlファイルをテキストエディタで開き、内容をコピーしてエディタに貼り付けてください。このツールはファイルのアップロードではなく、貼り付けられたコードを受け付けます。 ### 公開中のWebページをこのツールでJPGにできますか？ いいえ、このツールはアドレスのページではなく、貼り付けられたHTMLを描画します。アドレスで公開中のページを撮影するには、「Webサイトのスクリーンショットツール」を使ってください。JPEGで出力できます。 ### 文字がぼやけたり、ブロック状に見えたりするのはなぜですか？ JPEGは非可逆圧縮のため、品質が低いと文字や鋭いエッジの周りにブロック状のノイズが出ます。品質を上げると減りますが、ファイルは大きくなります。文字をくっきり残す必要がある場合は、「HTMLをPNGに変換するツール」を使ってください。 ### 1つの要素だけをJPGにできますか？ 無料のWebツールでは、その要素だけを取り出すことはできません。要素と必要なCSSだけを貼り付けてください。APIでは、スクリーンショットのオプションのclipにx、y、width、heightを指定して領域を撮影できます。 ### JPGの大きさの上限はどれくらいですか？ 無料のWebツールでは、幅は100から4000px、高さは2000pxまでです。最終的なサイズは幅×高さ×ピクセル密度で決まり、ピクセル密度を上げるほど大きくなります。APIのフルページ撮影は、高さ16,384pxまでに制限されています。 ### HTML JPG 変換は無料ですか？ はい、無料のWebツールはアカウント登録なしで使えます。匿名で使う場合はセキュリティ確認が必要で、ログインしているユーザーは確認を省けます。ログインしているユーザーは毎月100無料クレジットを受け取り、1回のシンプルなレンダリングにつき1クレジットを使います。 ### コードからHTMLをJPGに変換できますか？ はい、APIを使えば変換できます。/v1/renderにPOSTリクエストを送り、outputに「jpeg」とoptions.qualityを指定してください。ジョブが終わるまで問い合わせ、ファイルをダウンロードします。cURL、Node.js、Pythonの例がツールの下に表示されます。 ## 関連ツール - [HTMLを画像に変換](https://aiipworld.com/ja/tools/html-to-image/index.md) - [ページ全体のスクリーンショット](https://aiipworld.com/ja/tools/full-page-screenshot/index.md) - [PNGをWebPに変換](https://aiipworld.com/ja/tools/png-to-webp/index.md) - [WebPをPNGに変換](https://aiipworld.com/ja/tools/webp-to-png/index.md) - [WebPをJPGに変換](https://aiipworld.com/ja/tools/webp-to-jpg/index.md) ページ： https://aiipworld.com/ja/tools/html-to-jpg/