📄 HTML Minifier（HTML圧縮）

HTMLを貼り付けて圧縮（minify）します。コメントを除去し、タグ間の余分な空白・改行を集約して最小化し、元サイズ・圧縮後サイズ・削減量・削減率をUTF-8バイトで表示します。<pre>・<textarea>・<script>・<style> の中身と属性値は保護。処理はすべてブラウザ内で完結します。

入力

<pre>・<textarea>・<script>・<style> の中身と、タグの属性値はそのまま保持します。Ctrl/⌘ + Enter でも実行できます。

オプション

圧縮結果

解説

HTMLの圧縮（minify）とは、ブラウザに表示される結果を変えずに、ファイルサイズだけを小さくする処理です。人が読むための改行・インデント・コメントは、ブラウザの解釈には必要ありません。これらを取り除くと、同じ見た目のままHTMLが軽くなり、ページの読み込みや初期表示が速くなります。転送量が減ることは、モバイル回線や大量アクセス時のコスト・体感速度の両面で効いてきます。本ツールは、貼り付けたHTMLからコメントを除去し、タグ間やテキスト中の余分な空白・改行を集約して最小化します。

何を削るかは明確です。削るのは (1) コメント（<!-- … -->）、(2) 連続する空白・タブ・改行、(3) 文書の前後の空白、の3種類だけで、いずれもオプションで切り替えできます。要素・属性・テキストの中身そのものには手を付けません。空白の集約は「1個の半角スペースに詰める」保守的な方式です。これはインライン要素（a・span など）の間の空白が表示上の意味を持つためで、完全に0にすると単語がくっつくなど表示が変わることがあります。1個だけ残すことで、インデントや改行は削りつつ表示結果は保てます。

安全のために、中身を保持する「保護領域」を設けています。<pre> と <textarea> は空白・改行がそのまま表示に反映される要素、<script> と <style> はコードを含む要素なので、これらの内側は一切変更せず逐語的にそのまま出力します。またタグ（< … >）は引用符を考慮して終端を判定し、そっくり残すため、alt="a b" のように空白を含む属性値、値の中の > も壊れません。<!DOCTYPE> 宣言もそのまま保持します。

条件付きコメント（<!--[if IE]> … <![endif]-->）は、古いInternet Explorer向けに使われる特殊なコメントで、除去すると挙動が変わる場合があるため、既定で保持します（オプションで解除可）。なお本ツールは正規のHTMLパーサではなく、記号を手がかりにした簡易的なminifyであり、テンプレートエンジンの独自記法や壊れたHTMLには完全対応しません。あくまで保守的に圧縮するため、プロダクションでは専用のビルドツールの利用も検討してください。適用前に出力を必ず元と見比べ、バックアップを取ってから使うことをおすすめします。処理はすべて端末内で行い、貼り付けた内容はどこにも送信されません。

よくある質問

圧縮すると見た目（表示結果）は変わりますか？

基本的に変わりません。削るのはブラウザの解釈に不要なコメントと余分な空白・改行だけで、要素・属性・テキストの中身は残します。空白は完全に消さず1個のスペースに集約するため、インライン要素の間隔も保たれます。ただし簡易ツールのため、CSSで white-space を細かく指定している場合など、特殊なケースでは差が出ることがあります。適用前に必ず元と見比べてください。

<script> や <style> の中身は圧縮されますか？

いいえ。<script>・<style>・<pre>・<textarea> の内側は「保護領域」として逐語的にそのまま残します。JavaScriptやCSS本体は最小化しません。これらのコードも圧縮したい場合は、JS/CSS専用のminifyツール（当サイトの「CSS圧縮」など）や、ビルドツールを併用してください。

条件付きコメント（<!--[if IE]>）はどう扱われますか？

既定では保持します。<!--[if …]> … <![endif]--> は古いIE向けに分岐する特殊なコメントで、通常のコメントとして消してしまうと挙動が変わる可能性があるためです。不要であれば「条件付きコメントは残す」をオフにすると、他のコメントと同様に除去します。

属性値の中の空白は壊れませんか？

壊れません。タグ（< … >）は引用符（" '）を考慮して終端を判定し、そっくりそのまま出力します。そのため alt="山 と 川" や value="a b" のように空白を含む属性値、値の中の > も保持されます。集約の対象になるのはタグの外側のテキストと、タグとタグの間の空白だけです。

<!DOCTYPE> は消えませんか？

消えません。<!DOCTYPE html> のような <! … > 宣言はそのまま保持します。DOCTYPEはブラウザのレンダリングモードを決める重要な宣言のため、除去しないよう設計しています。

削減率はどう計算していますか？gzipと併用できますか？

削減率 = (元サイズ − 圧縮後サイズ) ÷ 元サイズ × 100 で、サイズはUTF-8のバイト数（TextEncoderで計測）です。実際の配信ではサーバーがgzip/Brotliで転送時圧縮も行うため、minify（テキストの無駄取り）とgzip（通信路の圧縮）は重ねて効きます。通信量の実削減は、本ツールの数値よりさらに大きくなるのが一般的です。

PHPやテンプレートエンジンの記法にも対応していますか？

完全には対応しません。<?php … ?> や {{ … }}、{% … %} のようなテンプレート記法は保護対象外のため、その内部の空白が集約されることがあります。ロジックが空白に依存する場合は注意が必要です。サーバー側でHTML化してから圧縮するか、ビルドツール側のminifyを利用してください。

入力したHTMLはサーバーに送られますか？

送られません。圧縮はすべてブラウザ内のJavaScriptで完結し、貼り付けた内容やサイズの計測結果はどこにも送信されません。ネットワークを切った状態（オフライン）でも利用できます。