Help us understand the problem. What is going on with this article?

画像の圧縮方法

More than 1 year has passed since last update.

はじめに

サイト作成時に容量を減らす方法として画像圧縮があります。
どの方法がベストなのか検証してみました。

検証した圧縮方法

gulp-imagemin
imagemin-pngquant
イメージオプティム
tinypng
gulp-tinypng-compress

検証画像

・jpeg
image.jpg

・png
image.png

検証結果

jpg png
何もしない 10,657バイト(10.657KB) 97,660バイト(97.66KB)
gulp-imagemin 10,504バイト(10.504KB) 92,126バイト(92.126KB)
imagemin-pngquant ----- 24,496バイト(24.496KB)
イメージオプティム 10,038バイト(10.038KB) 87,165バイト(87.165KB)
tinypng 9,224バイト(10.657KB) 27,254バイト(27.254KB)
gulp-tinypng-compress 9,224バイト(10.657KB) 27,254バイト(27.254KB)

考察

・画質を変化させることなく容量を落とすなら、イメージオプティムが一番安全
・多少画質落としても大丈夫な場合はimagemin-pngquantをタスクランナーで動かすのが楽
・一番楽に、多く容量を落とすならtinypngだが、仕事で使っている公開前の画像等をfileにアップするのが少し怖い気がする
・その変わりにgulp-tinypng-compressを使ってみたが
 1ヶ月500画像まで(それ以上は有料)
 5MB以上の画像は圧縮不可
 tinypngに登録をして、API keyを取得する必要がある...等といった点を考慮すると、ちょっと面倒かと

最後に

時と場合によりけりで使い分けるしかないですが、何を使って圧縮するか考える材料になればと思います。
また、これ以外の方法を使っている方がいましたらぜひ教えていただきたいです。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away