よくSNSとかでプロフィール画像としてアイコンを使うことが多いですよね。

今回はアイコンとかでよく使う画像をアップロードするときに画像サイスを軽量化する方法をお教えします！

画像ファイルって割と重いんですよね。。

本番環境で画像ファイルをMBのまま使ったり、画像ファイルをアップロードするときMBのままだと画像を読み込むのに時間がかかったり、データベースの容量も多く取ってしまいます。

なので、ユーザーにアップロードしてもらった画像はこちらで軽量化しましょう！

凄く簡単なので、肩の力を抜いてご覧ください。

browser-image-compressionのインストール

画像を軽量化するbrowser-image-compressionというパッケージを使います。

> npm i --save browser-image-compression

オプションの設定

次にどのように画像をリサイズするかのオプションを設定します。

const options = {
  maxSizeMB: 1, // 最大ファイルサイズ
  maxWidthOrHeight: 80 // 最大画像幅もしくは高さ
}

この他にもさまざまなオプションがあります。

詳しいことはこちらに書いてるので、興味にある方は是非ご覧ください！

画像の圧縮

これらを用いて画像を圧縮します。

import imageCompression from 'browser-image-compression'

const options = {
  maxSizeMB: 1, // 最大ファイルサイズ
  maxWidthOrHeight: 80 // 最大画像幅もしくは高さ
}
const file = await imageCompression(event.target.files[0], options)

// 画像サイズの比較
console.log(${event.target.files[0].size / 1024 / 1024} MB)
console.log(${file.size / 1024 / 1024} MB)

このようにして画像を圧縮することができます！

実際にconsole.logで画像サイズが圧縮されているか目で確かめてみてください！！

以上、「実は簡単！？画像ファイルをinputでアップロードする時、サイズをMBからKBへ軽量化する方法」でした！

また、何か間違っていることがあればご指摘頂けると幸いです。

他にも初心者さん向けに記事を投稿しているので、時間があれば他の記事も見て下さい！！

あと、最近「ココナラ」で環境構築のお手伝いをするサービスを始めました。

気になる方はぜひ一度ご相談ください！

Thank you for reading