画像/メディア

画像/メディア — Base64 ↔ 画像変換、プレースホルダー画像生成、OG画像ジェネレーターなど5種類の無料オンラインツールをまとめたカテゴリです。インストールや登録は不要で、すべてブラウザ内で処理されるためデータは外部に送信されず、結果をすぐに確認してコピーできます。開発でよく使う作業を複数のサイトを行き来せずに素早く片付けられます。

5個のツール

Base64 ↔ 画像変換画像ファイル（PNG・JPG・GIF・SVG）をBase64のdata URI文字列に変換、またはBase64を画像へ復元し、プレビュー・コピー・ダウンロードできる無料オンラインツール。アイコン・プレースホルダー・SVGなどの画像・メディア素材を扱う作業に適しており、ファイルはブラウザ内で処理されサーバーにアップロードされず、インストール不要で無料で利用できます。

プレースホルダー画像生成幅、高さ、背景色とテキスト色を指定してダミー画像を作成し、リアルタイムプレビューと即時ダウンロードに対応した無料のプレースホルダー画像生成ツールです。アイコン・プレースホルダー・SVGなどの画像・メディア素材を扱う作業に適しており、ファイルはブラウザ内で処理されサーバーにアップロードされず、インストール不要で無料で利用できます。

OG画像ジェネレーターソーシャル共有用のOG画像をブラウザで作成しPNGで書き出せる無料オンラインツール。タイトルや背景、フォントを設定し1200x630のOpen Graph画像を作れます。アイコン・プレースホルダー・SVGなどの画像・メディア素材を扱う作業に適しており、ファイルはブラウザ内で処理されサーバーにアップロードされず、インストール不要で無料で利用できます。

ICOコンバーターPNG・JPG画像をアップロードすると16x16、32x32、48x48など複数サイズを含むマルチ解像度ICOファビコンに変換する無料ツール。処理はすべてブラウザ内で完結アイコン・プレースホルダー・SVGなどの画像・メディア素材を扱う作業に適しており、ファイルはブラウザ内で処理されサーバーにアップロードされず、インストール不要で無料で利用できます。

SVG最適化ツールSVGファイルから不要なメタデータやコメント、空白を削除してファイルサイズを縮小する無料の最適化ツール。ブラウザ内で最適化しダウンロードできます。アイコン・プレースホルダー・SVGなどの画像・メディア素材を扱う作業に適しており、ファイルはブラウザ内で処理されサーバーにアップロードされず、インストール不要で無料で利用できます。

使い方

1
画像をツールに置く— ファイルはブラウザのFileReader APIで読み込まれ、タブ内で処理されるため、アップロードは発生せず画像が端末を出ることはありません。
2
変換するかサイズを落とす— PNGやJPGを複数サイズ入りの.icoファビコンに変換し、画像をBase64データURIにエンコードし、SVG最適化でエディターのメタデータを取り除いてパスを短くします。
3
ファイルとして保存するかインラインで貼る— 結果をダウンロードするか、データURIをそのままCSSやHTMLに貼り付けてください。OG画像ジェネレーターとプレースホルダー生成で、ページに足りない画像もその場で用意できます。

よくある質問

いいえ。ファイルはFileReaderで読み込み、ブラウザ内のcanvas上で処理するため、どこにも送信されません。ICO変換ツール、Base64画像変換ツール、SVG最適化ツールのいずれも同じです。

1200x630ピクセル、比率でいうと1.91:1です。Facebook・X・多くのメッセンジャーがこの比率で切り抜くためです。OG画像ジェネレーターはこのキャンバスから始まり、ファイルを1MB前後に抑えると、遅いクローラーでプレビューがタイムアウトするのを避けられます。

アイコンや小さなロゴなど、数KB程度のアセットの場合です。HTTPリクエストを1回減らす効果が、Base64による約33%の容量増を上回るからです。大きな画像はファイルのままにしておくと、ブラウザが個別にキャッシュし遅延読み込みできます。