# HTMLを画像に変換

> HTML 画像 変換は、貼り付けたHTMLとCSSを、指定した幅、高さ、ピクセル密度でPNGまたはJPEG画像にする無料のオンラインツールです。

HTMLを画像（PNGまたはJPG）に変換する無料のオンラインツールです。幅と高さ、ピクセル密度（1x、2x、3x）を指定すると、その設定で画像を作成できます。ファイルのアップロードは不要で、拡張機能やコマンドラインツールを入れる必要もありません。

## 主な仕様

- 入力：HTMLとCSS、256 KBまで
- 出力：PNGまたはJPEG、ピクセル密度は1x、2x、3x。透過背景はPNGのみ
- 無料ツールの高さ上限：2000px
- アカウント登録なしの無料利用では、訪問者ごとに毎分10件、毎日50件まで変換でき、透かしは入りません。ログインしているユーザーは、レンダリングごとに1クレジットを使用します。毎月100無料クレジットが付与されます。
- ファイルは自動的に削除されます。アカウント登録なしの場合は変換後10分、無料アカウントの場合は1日で削除されます。
- 開発者は、APIキーを付けてPOST https://api.aiipworld.com/v1/renderを送信すると、同じレンダリングを実行できます。詳しくはスクリーンショットAPIページをご覧ください。

## 使い方

1. HTMLとCSSをエディタに貼り付けます。
2. 画像にする領域の幅と高さを、ピクセルで設定します。
3. PNGかJPGを選びます。PNGでは「透過背景」を設定し、JPGでは品質を1から100の間で設定します。
4. 「画像を作成」をクリックして、ファイルをダウンロードします。

## 変換の仕組み

変換は、ブラウザではなくこのサイトのサーバーで行われます。変換のたびに、ヘッドレスChromium（画面を持たないブラウザエンジン）を使います。各変換は新しいブラウザコンテキストで実行され、リソースを制限したワーカーコンテナ内で動作します。処理時間には厳格な上限があります。

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

画像サイズは、指定した幅と高さに、ピクセル密度（1x、2x、3x）を掛けた値になります。たとえば、640 x 340の領域を2xで変換すると、1280 x 680pxの画像になります。無料ツールでは、幅は100pxから4000pxまで指定できます。

## 透過背景のルール

PNGは、ページが背景を描いていない部分だけ透過されます。htmlやbodyに背景色を指定すると、透過は置き換えられます。JPEGには透過がありません。

## PNGとJPEGの選び方

文字や輪郭がはっきりした画像、透過が必要な画像にはPNGが向いています。グラデーションのバナーや、ファイルサイズを小さくしたい画像にはJPGが向いています。品質、ファイルサイズ、背景については「HTMLをJPGに変換するツール」で説明しています。WebPには対応していません。WebPを指定してAPIを呼び出すと、エラーが返されます。既存のPNGを変換する場合は「PNGをWebPに変換するツール」を使えます。

## フォント、画像、スクリプトの扱い

デバイスにインストールされているフォントは、レンダリングサーバーでは使えません。別のフォントを使う場合は、公開URLまたはデータURLから@font-faceで読み込んでください。

画像とスタイルシートは、公開されているhttpまたはhttpsのアドレスからのみ読み込まれます。JavaScriptは標準で実行されます。

## よくある用途

ソーシャルカード、バナー、コードのスニペットを画像として見せる場合に使えます。

## APIでの利用

APIでは、POST /v1/render にHTMLを入れてリクエストを送り、outputにpngまたはjpegを指定します。認証は、APIキーをBearerトークンとして送ります。

APIは202を返し、job_idを受け取ります。GET /v1/jobs/:id を呼び出し、statusがsucceeded、failed、timeout（タイムアウト）のいずれかになるまで確認します。成功したら、download_urlから画像をダウンロードします。download_urlは短時間のみ有効です。失敗したジョブとタイムアウトしたジョブのクレジットは返却されます。

## HTMLコードを画像にする

ブロック単位のマークアップを画像にする、HTMLコードを画像にするツールとしても使えます。HTMLと、それを飾るCSSを貼り付け、幅と高さを設定して、準備ができたらダウンロードします。

画像に写るのは、コードそのものではなく、ブラウザが描いた結果です。レンダリングサーバーでスタイルやフォントが見つからない場合は、その状態が画像に出ます。投稿や文書に使う前に、必ず結果を確認してください。

## バナーとスニペットに同じHTMLを使う

表示させたいボックスのサイズに合わせて、画像サイズを設定します。文字や輪郭がある画像ならPNGを選びます。写真のようなバナーなら、フォーマットの一覧からJPG（JPEG）を選びます。

品質、ファイルサイズ、背景の扱いは「HTMLをJPGに変換するツール」で説明しています。

## HTML 画像 変換の使い方

HTML PNG 変換は、HTMLとCSSを貼り付け、幅と高さを設定し、PNGを選んで「画像を作成」をクリックするだけで行えます。ブラウザ拡張機能やコマンドラインツールは必要ありません。PNGは、ページが背景を描いていない部分の透過を保ちます。

バッジ、ステッカー、ほかのデザインに重ねて使うカードの作成に向いています。

## ページ全体か一部の要素か

スタイルのブロックを含む完全なドキュメントを貼り付けるのが最も適しています。貼り付けたHTMLを描画するもので、公開中のサイトを開くわけではありません。ページのアドレスから撮影したい場合は、「Webサイトのスクリーンショットツール」を使ってください。

一つの要素だけを画像にするには、その要素とCSSだけを貼り付け、幅と高さを合わせて設定します。APIにはclipオプションがあり、x、y、width、heightで指定した矩形を切り出せます。

## よくある質問

### 画像の大きさはどのくらいになりますか？

画像の大きさは、幅と高さのピクセル数にピクセル密度を掛けた値になります。2xの場合、640 x 340の領域は1280 x 680pxの画像になります。無料ツールでは、高さは2000pxまで、幅は100pxから4000pxまで指定できます。

### 透過背景はどうすれば使えますか？

PNGを選び、「透過背景」をオンのままにします。ページがhtmlやbodyに背景を指定していないことも必要です。JPEGには透過がないため、透過背景は使えません。

### HTMLから外部の画像やフォントを読み込めますか？

はい、公開されているhttpとhttpsのアドレスは、描画中に読み込めます。プライベートなアドレスやローカルのアドレスは、意図的にブロックされます。データURLならネットワークへのリクエストなしで使えます。

### JavaScriptは動きますか？

はい、JavaScriptは実行されます。画像はページの読み込みが終わってから撮影されます。後から完了するページには、APIの待機オプションを使えます。

### ページの一部だけを撮影できますか？

APIでは、x、y、width、heightの矩形を指定するclipオプションで一部を切り出せます。無料ツールでは、設定した表示領域全体が撮影されます。

### WebPに対応していますか？

まだ対応していません。出力はPNGまたはJPEGです。WebPを指定してAPIを呼び出すと、エラーが返されます。

### 画像はどのくらい保存されますか？

Webツールの結果は10分後に削除されます。削除される前にダウンロードしてください。

### HTML PNG 変換はどのように行いますか？

HTMLとCSSをエディタに貼り付け、幅と高さを設定し、PNGを選んで「画像を作成」をクリックします。その後、ファイルをダウンロードします。Webツールの結果は10分後に削除されます。

### HTMLファイルを変換できますか？

このツールは貼り付けられたHTMLとCSSを扱うもので、ファイルのアップロードには対応していません。HTMLファイルをテキストエディタで開き、内容をコピーして貼り付けてください。

### 画像がぼやけるのはなぜですか？

画像は、選んだピクセル密度で撮影されるためです。1xでは、CSSの1ピクセルが画像の1ピクセルになるため、高密度の画面ではぼやけて見えることがあります。鮮明にするには2xか3xを選んでください。

### 公開中のWebページを画像にできますか？

いいえ、このツールは貼り付けられたHTMLとCSSを扱います。Webページをアドレスから撮影するには、「Webサイトのスクリーンショットツール」を使ってください。画像の作成中に読み込まれるのは、公開されたhttpとhttpsのアドレスだけです。プライベートやローカルのアドレスは画像に写りません。

### HTMLの一つの要素を画像にできますか？

はい、その要素とCSSを貼り付け、幅と高さを合わせて設定できます。APIを使う場合は、ページ全体を描画してから、clipオプションで矩形を切り出します。

### 日本語や絵文字は表示されますか？

はい、テストで表示されることを確認しています。テスト日は2026-10-11です。簡体字と繁体字の中国語、日本語、韓国語、絵文字を含むページをPNGにしたところ、どの文字も空の枠ではなく、文字または色付きの絵文字として表示されました。サーバーではNoto Sans CJKとNoto Color Emojiで描画しています。自分のフォントを使う場合は、公開URLまたはデータURLから@font-faceで読み込んでください。

## 関連ツール

- [HTMLをPDFに変換](https://aiipworld.com/ja/tools/html-to-pdf/index.md)
- [SVGをPNGに変換](https://aiipworld.com/ja/tools/svg-to-png/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)
- [HTMLをJPGに変換](https://aiipworld.com/ja/tools/html-to-jpg/index.md)

ページ： https://aiipworld.com/ja/tools/html-to-image/