画像フォーマット相互変換 PNG, JPG(JPEG), WebP

動作環境(2022-08-01時点)
・Google Chrome 103
・Microsoft Edge 103
・Mozilla Firefox 103 対応していますが、WebPのダウンロードで不要な別タブが開きます。
・Apple Safari 15.6 非対応 WebPへの変換ができません。

開発段階ではAVIFに対応しておりませんが、近い将来ブラウザが対応すれば使用できるようになります。

PNG, JPG(JPEG), WebP のデータフォーマット相互変換ができます。JPGとWebPは圧縮率をリアルタイムに変更できます。Base64データも生成します。HTMLやCSSのインラインイメージにも使用できます。
処理はJavaScriptで完結しています。サーバーにアップロードされませんので機密データにも安心してお使いいただけます。

base64:
base64とは、制御コード等を含む印字不可能なバイナリデータやマルチバイト文字を、64種類の英数字のみを用いてエンコードする方式です。 MIMEによって規定されていて、7ビットのデータしか扱えない電子メールにて広く利用されています。
エンコード後のデータ(文字列)は、A-Z,a-z,0-9までの62文字と、+-の記号2つ、パディングの為の記号=の1個、合計64文字+1となります。 データ量は4/3(約133%)になります。MIMEの基準では76文字ごとに改行コードが入る為、この2バイトを含めるとデータ量は約137%になります。

インラインイメージ(インライン画像)について：
「data:」に続いてMIMEタイプの「image/png」や「image/gif」や「image/jpeg」が続き、「；」と「base64,」そしてbase64エンコードされた文字列が続く一連の文字列を使用します。
例)
data:image/png;base64,iVBORw0KGg--略--FTkSuQmCC

HTMLやCSSにbase64エンコードデータを埋め込んだ物をインラインイメージと呼びます。
ウェブサイトのCSS内にインラインイメージとして埋め込むことでHTTPリクエストを減らす事が可能となり、またトータルのファイル数もそれに応じて減りますので扱いやすくなるという利点が有ります。

HTMLやCSSに画像を埋め込む「インラインイメージ」の記述方法：

CSS内では以下の様に使用できます。
background-image: url(data:image/png;base64,iVBORw0KGgoAA--略--AAAElFTkSuQmCC);

HTML内では以下の様に使用できます。
<img src="data:image/png;base64,iVBORw0KGgoA--略--AAAAElFTkSuQmCC">

2022年8月初版
2024年9月改訂
このサイトについてのお問い合わせはエーオーシステムまでお願いいたします。
ご使用上の過失の有無を問わず、本プログラムの運用において発生した損害に対するいかなる請求があったとしても、その責任を負うものではありません。