画像の圧縮・変換には、ブラウザに標準で搭載されている Canvas API を使っています。Canvas はもともと JavaScript でグラフィックを描画するための仕組みですが、「画像を読み込んで別の形式で書き出す」という使い方もできます。
処理の流れはこうです。まず選択された画像を <img> 要素として読み込み、<canvas> に描画します。リサイズが指定されている場合は、キャンバスのサイズをあらかじめ変更してから描画することで自動的に縮小・拡大されます。「比率維持」が有効なときは、幅から縦横比を計算して高さを自動で決めます。
描画が終わったら、canvas.toBlob(callback, 'image/webp', 0.8) のように呼び出すことで、指定したフォーマット・品質でエンコードされた画像データが得られます。WebP や AVIF は JPEG に比べて同じ品質でファイルサイズが小さくなる傾向があります。
すべての処理はあなたのブラウザの中だけで完結します。画像がサーバーに送られることはなく、プライバシーの面でも安心して使えます。