画像フォーマットを変換します。JPGとWebPは圧縮率を変更可能。

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

JPGとWebPは圧縮率をリアルタイムに変更できます。オリジナルと比較しながら最適値の画像をダウンロードできます。
Base64データも生成します。HTMLやCSSのインラインイメージにも使用できます。
処理はJavaScriptで完結しています。サーバーにアップロードされませんので機密データも安心。

画像ファイルを選択

 

Original

PNG

JPEG

JPEG

WebP

WebP

動作環境(2022-08-01時点)
・Google Chrome 103
・Microsoft Edge 103
・Mozilla Firefox 103 対応していますが、WebPのダウンロードで不要な別タブが開きます。
・Apple Safari 15.6 非対応 WebPへの変換ができません。
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月当時の物です。
このサイトについてのお問い合わせはエーオーシステムまでお願いいたします。
ご使用上の過失の有無を問わず、本プログラムの運用において発生した損害に対するいかなる請求があったとしても、その責任を負うものではありません。
このページでお気付きの点がございましたら
ご連絡いただけますと幸いです。
Eメール(任意)
送信内容
 

便利ウェブサイト