画像形式変換

画像形式変換の基本とWebでの役割

適切な形式選択は、ページの読み込み速度や画質、対応ブラウザの広さに大きく影響します。
Web制作では軽量かつ高品質な画像提供がユーザー体験の向上に直結します。

代表的な画像形式の特徴と使い分け

JPEGは写真に適しておりファイルサイズを抑えられますが、透明度は扱えません。
PNGは透過処理が可能でロゴやアイコンに適していますが、ファイルサイズが大きくなりがちです。
近年はWebPやAVIFといった新しい形式も広まりつつあり、高圧縮と高画質を両立できます。

HTMLでの画像表示と形式指定の工夫

複数形式の画像を使い分ける場合は<picture>タグやsrcset属性を活用し、ブラウザごとに最適な画像を配信します。
また、<img>タグのalt属性は必ず設定し、遅延読み込みにはloading="lazy"を利用してパフォーマンスを向上させましょう。

変換時の画質とファイルサイズのバランス調整

画質を保ちつつファイルサイズを抑えるために、圧縮率の調整や色数の制限、解像度の最適化が必要です。
また、変換ツールやサービスにより品質の差があるため、用途に合わせて適切なツール選びを行いましょう。
実際の表示で確認しながら調整することが大切です。

実務上の注意点と対応ブラウザの確認

新しい画像形式は優れた圧縮性能を持ちますが、全てのブラウザでサポートされているわけではありません。
したがって、代替形式を用意して対応することが必須です。
また、変換処理は開発環境やCI/CDに組み込むことで効率的な運用が可能となります。

// ファイル名から拡張子（.jpg など）を取り除く関数
function removeExtension(filename) {
	return filename.replace(/\.[^/.]+$/, "");
}

画像を別形式に変換したときに、ファイル名がsample.jpg → sample.webpのように置き換わるように、拡張子を除去しています。

// ファイルごとの進捗表示を作成する処理
function createProgressItem(filename) {
	// HTMLのDOMを生成し、ファイル名とスピナーを表示
}

複数の画像ファイルをアップロードする場合でも、1つずつ進捗状況が見えるようになっています。これにより、ユーザーが「どのファイルが成功したか・失敗したか」を把握しやすくなります。

// SVGファイルはテキスト読み込み→Base64変換→画像として扱う
reader.readAsText(file);
img.src = 'data:image/svg+xml;base64,' + base64SVG;

SVGはビットマップではないため、直接Imageオブジェクトに読み込めません。ここではテキストをBase64に変換し、data URLとして読み込むことで、PNGやJPGに変換可能にしています。

// JPGに変換するときは白背景を塗る（透明は使えないため）
if (format === 'jpg') {
	ctx.fillStyle = 'white';
	ctx.fillRect(0, 0, canvas.width, canvas.height);
}

JPG形式は透過をサポートしていないため、背景が透明なPNGやSVGをJPGにすると黒くなってしまうことがあります。それを防ぐため、あらかじめ白で塗りつぶしてから画像を描画しています。

// canvasに描画した画像をダウンロード形式で生成
canvas.toBlob((blob) => {
	const url = URL.createObjectURL(blob);
	const a = document.createElement('a');
	a.href = url;
	a.download = `${fileName}.${format}`;
	a.click();
});

変換した画像はブラウザ上で即座にダウンロードできるように、canvas.toBlob()を使ってファイルに変換し、aタグを動的に生成してダウンロード処理を実行しています。

// 外部から filesUploaded イベントを受け取る
document.addEventListener('filesUploaded', (event) => {
	handleFiles(event.detail.files);
});