画像リサイズ

Image Resizer

画像をまとめてドラッグ＆ドロップすると、横幅や高さを入力するだけで一枚ずつでも一括でも瞬時にサイズを変えられるツールです。すべての画像に同じ幅や高さを一気に適用することもでき、指定したサイズで揃えたらボタンひとつで個別に保存することも、ZIPにまとめてダウンロードすることも可能です。大量の写真をリサイズしてウェブに上げたいときや、SNS用に規定サイズでそろえたいときなど、いちいち画像編集ソフトを開くことなくブラウザだけで完結できるので、作業時間とストレスを大幅にカットできます。

コラム・豆知識
ツールの仕組み解説

画像をドラッグ＆ドロップまたはファイルを参照

一括で横幅を変更 px

適用

一括で高さを変更 px

適用

全画像をZIPでダウンロード

コラム・豆知識

画像リサイズの重要性とWebパフォーマンス

画像の適切なリサイズはWebサイトの表示速度向上に直結します。
過大な画像ファイルは読み込み時間を延ばし、ユーザー体験を損なうため、表示サイズに合わせた画像の最適化が必要です。
レスポンシブデザインと組み合わせて効率的に運用しましょう。

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

画像リサイズでは画質を保ちながらファイルサイズを抑えることが求められます。
解像度の縮小だけでなく、適切な圧縮設定やフォーマット選択も重要です。
実際の表示環境で見え方を確認しながら調整を行うことがポイントです。

HTMLでの画像サイズ指定と属性の活用

<img>タグのwidth、height属性を正しく設定することで、レイアウトの安定化が図れます。
また、srcsetやタグを利用して異なる解像度の画像を切り替えられるようにすると、より効率的なリサイズ運用が可能です。
さらにloading="lazy"属性で遅延読み込みを設定しましょう。

レスポンシブ対応とCSSによる調整

リサイズ画像はデバイスごとに適切に表示される必要があります。
CSSのmax-width: 100%;やheight: auto;などの指定で、画面サイズに応じて画像が自動調整されるように設計します。
これにより、スマートフォンやタブレットでも美しい表示が実現できます。

ツールの仕組み解説

// アップロードされた画像を処理するカスタムイベントリスナー
document.addEventListener('filesUploaded', (event) => {
	const files = event.detail.files;
	if (files.length > 0) {
		for (let i = 0; i < files.length; i++) {
			processImage(files[i]);
		}
	}
});

filesUploadedというカスタムイベントを監視して、画像ファイルの配列を受け取ったらprocessImage関数で1枚ずつ処理します。他のJSと連携しやすい柔軟な作りになっています。

// アスペクト比固定のチェックボックスに対応したリサイズ処理
widthInput.addEventListener('input', () => {
	if (aspectRatioCheckbox.checked) {
		heightInput.value = Math.round(widthInput.value / aspectRatio);
	}
});

画像の横幅や高さを変更する際、チェックボックスでアスペクト比（縦横比）を固定できるようにしています。意図しない変形を防ぐための実用的な工夫です。

// リサイズ後の画像をCanvasで描画し、即時ダウンロード
ctx.drawImage(img, 0, 0, newWidth, newHeight);
canvas.toBlob((blob) => {
	const link = document.createElement('a');
	link.href = URL.createObjectURL(blob);
	link.download = `resized_${fileName}`;
	link.click();
}, mimeType);

画像をCanvasに描画し、リサイズした画像をその場でダウンロードできるようにしています。ページ遷移なしで完結するユーザー体験の良い設計です。

// 透過に対応していないJPEGなどは背景を白に塗る処理
if (!supportsTransparency) {
	ctx.fillStyle = 'white';
	ctx.fillRect(0, 0, canvas.width, canvas.height);
}

JPGやGIFのように透過をサポートしない形式に対しては、あらかじめ白背景を塗っておくことで、画像の見た目が崩れないようにしています。

// 一括ダウンロード機能：複数の画像をZIPファイルにまとめる
zip.file(`resized_${fileName}`, blob);
zip.generateAsync({ type: 'blob' }).then(function(content) {
	saveAs(content, 'resized_images.zip');
});

複数の画像を一括でダウンロードできるよう、JSZipライブラリを使ってZIPファイルを動的に生成しています。大量の画像を処理したいユーザーにも対応可能です。

// 一括で横幅を変更し、必要に応じて高さも自動調整
applyWidthBtn.addEventListener('click', () => {
	const newWidth = parseInt(bulkWidth.value);
	for (const imageObj of imageObjects) {
		imageObj.widthInput.value = newWidth; if (aspectRatioCheckbox.checked) {
			imageObj.heightInput.value = Math.round(newWidth / aspectRatio);
		}
	}
});