以前も書きましたが、僕の使っているiPhone 5sのカメラアプリで撮った写真をそのままワードプレスにアップロードすると、2448 × 3264(3264 × 2448 )という非常に大きなサイズになります。

そして、その画像(2448 × 3264)をフルサイズで貼り付けた後、サイズを変更して添付した場合、スマホだと表示されなくなってしまうとも書きました。

そのため、これまでは

①iPhoneで撮った写真を768 × 1024にリサイズし、
②そのあと記事に画像をフルサイズで添付→自分の載せたいサイズに変更

といった非常に手間のかかる作業をしていました。

※詳しくはこちら⇒WordPressの画像がスマホだと表示されなくなったのを解消しました

※追記:①のリサイズ自体はSimpleResizeを使えば比較的簡単に行えます。
詳細⇒ブログ等投稿用にiPhoneアプリSimpleResizeで画像をリサイズする

スポンサーリンク
[adsense]

Imsanityで画像をアップロード時に自動でリサイズする

上にも書いたように、SimpleResizeというiPhoneアプリを使えば、①の部分を比較的簡単に行えるのですが、結局iPhone内で同じような作業をしなければならないため、やっぱり面倒です。

なんか良い方法はないかなーと思って調べて見つかったのが、Imsanityというワードプレスのプラグイン。

画像をワードプレスにアップロードする際に、画像の最大サイズを指定することができるので、自動でリサイズした感じになります。

たとえば僕のiPhone 5sのカメラアプリで撮った写真は2448 × 3264サイズですが、画像の最大サイズを1024としておけば、①の「768 × 1024にリサイズ」という作業が完全になくなります。

Imsanityで画像を自動でリサイズする方法

1.WordPressにログインして、プラグイン「Imsanity」をインストール→有効化

2.左メニューの設定から「Imsanity」を選択し、リサイズの設定をする

Imsanity Settingsを下にスクロールすると下のような画面が出てきます。

WS000000

どれも1024という数字が入っていることからわかるように、デフォルトだと横も縦も最大1024ピクセルにリサイズされます。

それぞれ、

・一番上のImages uploaded within a Page/Postは固定ページ、通常の記事投稿からアップロードした場合の最大サイズ

・真ん中のImages uploaded directly to the Media Libraryはメディアから画像を新規追加した場合の最大サイズ

・一番下のImages uploaded elsewhere (Theme headers, backgrounds, logos, etc)はよくわかりませんがそれ以外の最大サイズ

だと思います。

アップロードの方法でリサイズする大きさを変えたい場合は、細かく設定しましょう。

・JPG image qualityはJPGimage画像のリサイズ時の画質です。
ワードプレスのデフォルトだと90になっているっぽいです。

・Convert BMP To JPGはBMPファイルをJPGへとコンバートするか否か。
未確認ですが、YesにすればBMPファイルをJPGファイルへと変更してくれるんだと思います。

アップロード時のリサイズについてはこれで以上です。
では、実際にリサイズした画像を添付して比較してみましょう。

まずは、リサイズしていない画像から。
※スマホでこのブログを見ている場合、この画像だけは見られない可能性が高いです。

image

2448 × 3264という大きなサイズの画像をフルサイズで添付後、自分でwidthを300、heightを400へと打ち直して画像を貼っています。

ちなみに元画像のファイルサイズは2MBです。

次に、メディアライブラリから画像編集でサイズを768 × 1024変更(リサイズ)したもの。

image

サイズを768 × 1024へとリサイズした画像をフルサイズで添付後、上と同じようにwidthを300、heightを400へと打ち直して画像を貼っています。

ファイルサイズは185kBまで落ちました。

次に、Imsanityでサイズを1024(Imsanityのデフォルト)へとリサイズしたもの。

image

Imsanityを有効化し、アップした画像は最大1024にリサイズされるようになっているので、768 × 1024へと自動でリサイズされます。

そのリサイズされた画像を、同じようにフルサイズで添付→widthを300、heightを400へと打ち直して画像を貼っています。

ファイルサイズは187kB。当たり前と言えばそれまでですが、上とほぼ同じファイルサイズです。

次に、Imsanityでサイズを縦(高さ)400へとリサイズしたもの。

image

Imsanityの設定を400 × 400にしてしまうと高さが400にはならなかったので、0 × 400にして横(幅)をきかなく(disable)しています。

こうすることで、最初から300 × 400の画像にリサイズされるため、widthを300、heightを400へと打ち直すことなく、そのままフルサイズで添付すればいいだけとなります。

他の画像と比べると、ちょっと粗くなっちゃった・・・かな?
ファイルサイズはまさかの33kBまで落ちています。

iPhoneのスクショ画像も一応貼っておきます。

image

上の画像と同じようにImsanityの設定を0 × 400のままアップ。
iPhoneのカメラ画像ではなく、スクショ画像なので225 × 400です。

こちらは27kB。当然ですが、さらに小さいサイズになりました。
ファイルサイズを落としているので、少し粗くなってはしまいましたが、そこまで大きく変わってないと思います。

以上で画像の比較は終わりです。

Bulk Resize Imagesについて

補足です。

Imsanityの設定の下の方にBulk Resize Imagesとありますが、これは過去にアップした画像のリサイズになります。

過去の画像もリサイズできるのは非常に便利なんですが、仮にリサイズしたとしてもそれまでに添付した画像には影響を与えないはずなので、画像は貼り直しになると思います。

また、リサイズする前のオリジナル画像(元画像)のバックアップは何かあったときの為に絶対に取っておいた方がいいです。

あとがき

ここまでImsanityの使い方、ワードプレスで画像のサイズを指定してアップロード(リサイズ)する方法を長々と書いてきましたが、いかがだったでしょうか?

Imsanityは非常に使いやすいプラグインの1つだと思います。
シンプルですしね。使わないときは切っておけばいいし。

大きなサイズの画像をたくさん使う機会がある人や、毎回毎回自分でリサイズして画像を使用している人は試してみるといいかもです。