12
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

自社サービスで行っている画像最適化について

Last updated at Posted at 2017-12-08
ページ読み込みが3秒以上かかると53%のユーザーが離脱

Google Developers Japanより引用

自社サービスも計測した結果、読み込みにに10秒以上かかっていて、PageSpeed Insightsでの点数では30点台と低い数値となっていました。

image.png
※PageSpeed Insights図

システム・クリエイティブの少数精鋭でサイト最適化・高速化の改善を半年以上かけて行い、ウェブサイトの表示速度を2秒台まで縮め、最適化の点数も最大で80点台を出すことに成功しました。

その中で改善項目の一つでもあった**「画像最適化」**について簡単にお話しをしたいと思います。

画像最適化

webページ上のダウンロード容量を調べたところ、ほとんどが画像で占めていました。
最適化することでwebページの容量の大幅な削減やパフォーマンス改善に繋がります。

画像圧縮はコマンドラインで

これまで外部webサービスの**「TinyPNG」**を利用して画像圧縮を行ってきましたが、コマンドラインを使用したフローに変更しました。

メリット
導入が楽
引数にオプションつければなんでもできる
作業スピードの短縮にも大きく繋がった

圧縮しよう

  • 拡張子pngはpngquantを使用。
  • 拡張子jpgはjpegoptimを使用。

インストール

brew install pngquant //PNG
brew install jpegoptim //JPG

使い方

pngquant

sample.pngを圧縮してみる。

pngquant --ext .png --force sample.png

--ext--forceはオプションです。
--extは拡張子等。
--ext -new.pngにすると、sample.pngがsample-new.pngとして保存されます。
--forceは上書きオプションです。

jpegoptim

sample.jpgを圧縮してみる。

jpegoptim --max=80 sample.jpg

--maxはオプションです。
上記例の--max=80は品質80%で圧縮してくれます。

圧縮前・後の画像を比較

横幅150px 縦幅94pxの画像をコマンドラインにて圧縮した比較が以下になります。
image.png

見栄えもほぼ変わらず、容量を-2 KB縮めることが出来ました。
今回、例にあげた画像は容量が低めでしたが、500 KB近く容量がある画像などもあったりします。その場合は画像サイズを縮め、そこから圧縮することによって5〜6 KBほど圧縮するようにしています。
この作業を画像サーバーにアップした段階で自動で圧縮する仕組みも考えましたが、画像によっては荒くなって見えづらくなる問題もあったため、地道に手作業で一つ一つ圧縮し、目視で画像を確認するようにしています。

地道にこういったフローを踏みつつ、画像最適化の作業を進めています。地味な作業かもしれませんが、大幅にサイトパフォーマンスを改善することが出来ました。
サイトが重いと感じた方は、ぜひこのフローを取り入れてみてもよいかもしれません。

12
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?