toDataURLの際にjpegと比較して軽い方を選ぶように

canvasから画像スキームデータを抽出する際のtoDataURL()メソッドですが、
そのままだとpng画像になります。

toDataURL()はpngの対応が必須実装なので、canvasが使えるブラウザは必ずpng出力が出来ます。
ですが、jpeg対応しているブラウザも多く、特に大きなアイコン画像などを扱うiconDecotterでは
実際のところjpegの方がだいたいは軽いので、今まではpngしか扱っていなかったのをjpeg対応するようにしました。

//png画像
var png_data = canvas.toDataURL('image/png');

//jpeg画像
var jpeg_data = canvas.toDataURL('image/jpeg');

//比較
if( png_data.length > jpeg_data.length ){
  console.log('jpegの方が軽い');
}else{
  console.log('pngの方が軽い');  
}

加工後画像のデータを取得する時に、pngとjpegで比較して容量の少ない方を選ぶようにしました。

ものにもよりますが、データ容量がかなり削減されるケースが多いようで、トラフィックの軽減にもかなり役立っているような気がします。
ちょっと前からアイコン画像の扱うサイズ自体も512pxまで拡張したため、元アイコンが大きなユーザーが増えており、そうなると無圧縮pngを通信していると非常に遅い、という問題がありました。

色々と試しましたが、jpegでデータを取れないブラウザはもうあまり無いみたいなので、jpeg対応するようにしました。