シェアする

【さくらのVPS】WordPressに投稿した画像のサイズを圧縮する方法

シェアする

WordPressに投稿した画像のサイズを変更したい時ありますよね。

当ブログは容量が30Gしかないので、大きいサイズの画像は絶対ダメですSSDじゃなくてHDDにすればよかった

メンバーにも「サイズの大きい画像は圧縮してアップロードしてね」と言っています。

スポンサーリンク




環境

当ブログの環境です。

  • さくらVPS
  • Ubuntu16.04
  • 1GBプラン

今回はUbuntu 16.04の場合ですね。

少しコマンドを変えればCentOSでも出来ると思います。

当ブログのサイズが大きい画像ランキング👏

何回もメンバーに「サイズが大きい画像は圧縮してアップロードしてね」と言ってありますので大丈夫だと思いますが......

今回は2017年の7月のサイズが大きい画像ランキング、TOP10を発表したいと思います👏

保存場所

WordPressをインストールしているのディレクトリから

wp-content/uploads/にアップロードしている画像が保存されています。

ちなみに当ブログの環境で、2017年7月の画像は

wordpress/wp-content/uploads/2017/07

に保存されています。

検索方法

シェル芸で探していきます。

結果

なるほどーなるほどー

1位の画像(DSC_0381.jpg)

1490ファイルの中で堂々の1位!!凄い。

暑中見舞いの記事で出てた画像ですね。

[企画]しょっちゅうお見舞い申し上げます。
拝啓 涼風肌に心地よく……と、堅苦しいのは無しです。お元気ですか。僕は近頃の暑さに融け始めています。夏の暑さはアルカリ性なのでしょうか?そ...

そうこれがサイズの無駄使い。こんな画質いらないと思うのですよ。

勿論、画質が必要な時もあります。

しかしまぁ、最近の携帯は無駄に画素数が高くてまいっちんぐマチコ先生ですな。

雑記(WordPressの画像ファイルについて)

ちなみWordPressは1枚の画像から、何枚も色々なバージョンの画像を作ります。

例えばDSC0381.jpgの画像は22枚もバージョンがあります。

DSC0381.jpgのシリーズ

なぜ22枚もあるのか?

テーマによって変わりますが、スマホ用などに画像を加工したものを、アップロードした時に自動で作成します。

以下はfunction.phpの中身の一部ですが、

このような記述がある場合、100x100,150x150の画像を自動で作成します。

  • DSC_0381-100x100.jpg
  • DSC_0381-150x150.jpg

などがそうですね。

また、DSC_0381-e14...などは、WordPressの内部で編集した画像になります。

これも、編集された画像が自動で加工されて、ファイルが増えていきます。

1枚の画像から沢山作られてしまいますね。

  • 元画像
  • 元画像のサイズを変えたもの
  • 元画像を修正したもの(WordPressで画像を編集した場合)
  • 元画像を修正して、サイズを変えたもの(WordPressで画像を編集を修正した場合)

なので、画像をアップロードする際に、サイズを小さくするのは大事な事なのです。

リサイズの方法

今回は.jpg限定で紹介させていただきます。

最適化

最適化とは、圧縮せずに、余分なデータを除く事です。(見た目は変わりません)

容量が 6.7M -> 6.0Mになりました。

最適化した画像

品質を下げる

こんな高画質いらねーよと思う時は、品質を下げます。

  • 半分の画質で良いと思った場合

半分の画質

  • 1M以上の画像は認めないと思った場合

(単位はkbです)

1Mの画像


オーカワ
正直見た目変わってなくね?

応用

2M以上は認めないと思った時、こんなシェル芸を実行しています。強制的に1Mにするシェル芸でっす。

ディレクトリ下のjpgファイルを最適化する時

感想

1M以上の画像は本当にそんな画質必要?って思ってしまいます。

重い画像は最適化して、少しでも軽くする努力をしたほうがいいと思います。

参考

いつもお世話になっております。

画像ファイルには余計な情報が色々と埋め込まれていたりします。 そういったものを除去することで、画像のファイル容量を減らすことができます。 ##JPEGの最適化(ロスレス) jpegoptimを使用します。 ###jpegoptimの...
ブログやWebサービスをやってく上で問題となるのが画像の容量です。そのままアップロードしていると無駄に転送量が増えたり、ブラウザの表示が遅くなる原因になります。
The following two tabs change content below.

オーカワ

ロボット勉強中の大学4年生!!いつもはTwitterにいるよ。フォローちてね♪
オーカワ専用のブログ作りました。よろしくお願いします。
スポンサーリンク







シェアする

フォローする