【お願い】ブログに画像をアップロードする前にリサイズ＆圧縮してください

どうも、かっつー(@kattu0403)です！

先日、こんなツイートをしました。

初心者ブロガーさん。本気でブログを運営するなら僕の話を聞いてください。

・Wordpressがオススメ
・まず有料テーマを買って時短
・画像のリサイズ&圧縮は絶対に
・毎日でなくともいいので「検索流入を意識した記事」を書こう
・ツイッターはほどほどに

ちょっと先を行く先輩からのアドバイスです😏

— かっつー@学生ブロガー (@kattu0403) 2018年9月8日

ありがたいことに結構拡散されたのですが、

「画像のリサイズ&圧縮は絶対に」

の意味がよく分からない方がたくさんいました。

というわけで、この記事では

• なぜリサイズと圧縮が必要なのか
• 具体的にはどうやって行うのか
• アップロードするまでの一連の流れ

この3つについて書いていきます！！

まあ最終的には

1. アップロードする画像をまとめる
2. iMage Toolsで横幅700pxに一括リサイズ
3. Optimizillaで画像を一括圧縮
4. (画像の名前をパーマリンクに設定)
5. WordPressにアップロード

こうすればいいです！！！

なぜブログに画像をアップロードする前にリサイズと圧縮するのが大切なのか

大きい画像はリサイズされている

突然ですが、いまから2つの画像を見せます。

なにが違うか、注意深く見てみてください！

…どうでしたか？なにか違いました？

おそらく、満場一致で

一緒やんけ〜〜〜〜

こう思いましたよね？

でも編集画面からは

こんな感じに見えています。

画像のサイズ、違うんですよ。

ではなぜ同じに見えるのか？25秒で伝えます。

Google Chromeの拡張機能「View Info」を使って、画像のサイズを見てみます。

なにそれって方はこちらの記事をどうぞ。

1枚目の画像のサイズを調べてみます。

画像の説明を簡単にしますと

です。

つまり、1200px→700pxにリサイズされています。

次に、2枚目の画像の情報を見てみましょう。

サイズが変わっていませんね…！！

つまり、2枚目はそのまま表示しているのです。

横幅が700pxであろうが1200pxであろうが、

表示されるのは700pxまでです(多分はてなも)。

では700pxを超える画像はどうなっているのか？

WordPressがこっそりサイズ変更をしています。

図解してみました。わかるかな！！？？？

実はですね、wordpressはですね、

サイズが大きい画像を読み込む時に

って悲鳴を上げながらリサイズしているんですよ。

裏ではそんなことが繰り広げられていたのです。

さらにリサイズはページ速度を非常に遅くするので、絶対に避けたいですよね。

よって「毎回リサイズされないように、最適なサイズでアップロードする」のが大切なのです。

圧縮しないと容量が重すぎてヤバい

リサイズだけでは終わりません。

圧縮しましょう。

画像をWordpressにそのままアップロードしたら、

いずれはこうなります。

なぜならアホみたいにサイズが大きいから。

最初のうちはいいかもしれませんが、レンタルサーバーの容量は無限にあるわけではないですからね。

例えば、iPhone 6sで撮った写真は1枚1~2MBくらいですが、リサイズと圧縮をしたら100KB前後。

10分の1くらいのサイズになります。

ちなみに圧縮しても画質の劣化はほぼありません。

次の2枚を写真を見てください。

1枚目はiPhoneで撮ってそのままブチ込んだもの、

2枚目が700pxにリサイズ＆圧縮したものです。

変わりませんよね？

少し違いますが、微々たるものですよね？

1枚目のサイズ、2枚目の10倍あるんですよ。

頭おかしくないですか？僕は頭おかしいです。

よって、画像をそのままアップロードはアウト。

「塵も積もれば山となる」ではなく大問題です。

はい、というわけでリサイズと圧縮しないと

こうなります。

ページ速度の向上→SEO対策に

画像を最適化すると、SEO対策にもなります。

といっても、まだSEOの意味がよく分からない方もこの記事を読んでいるのではないでしょうか？

まあざっくりいうと、

Google検索の順位にモロに影響が出ます。

画像を最適化すれば上位になりやすくなります。

だからリサイズ＆圧縮は大切なんでっせ！！！

では、具体的にどうやるのか説明してきます！

画像のリサイズ＆圧縮の方法を具体的に説明していく

横幅を指定して一括リサイズ

Macユーザーにオススメのソフトを紹介します。

「iMage Tools」です。

iTunesストアで無料でダウンロードできます。

ソフトにアップロードしたい画像を入れて

指定した横幅で一括リサイズできます。

詳しい使い方は後ほど！

Windowsは「縮小専用。」などがありますね！

リサイズした画像を一括圧縮

圧縮するソフトはいろいろありますが、

Optimizillaがオススメです。

WEBサイト上で、無料で圧縮できます。

これはMac、Windowsどちらでも利用可能。

他のサイトに比べてサイズの減り方が良いです！

「アップロード」で画像を指定して

数秒間待つと圧縮されます。

サイズは60~90％くらい減ります。すげえ。

注意としては、一度に圧縮できるのは20枚まで。

枚数が多い時は複数回に分ける必要があります。

圧縮した画像をWordpressにアップロード

そして圧縮した画像を

WordPressにブチ込んで終わりです。

あ、その前に画像の名前を変更するとGOODです。

Macであれば画像を選択して右クリックして、

「◯項目の名前を変更」をクリック。

カスタムフォーマットで名前を指定します。

ぼくはパーマリンクと連番にしていますね。

もう一回整理しましょう。

1. アップロードする画像をまとめる
2. iMage Toolsで横幅700pxに一括リサイズ
3. Optimizillaで画像を一括圧縮
4. (画像の名前をパーマリンクに設定)
5. WordPressにアップロード

では最後に、一連の流れをお見せします〜！

最後に、画像をアップロードするまでの一連の流れを通しで説明する

まずはじめに

• 「アップロードしたい画像」
• 「リサイズ後」

の2つのフォルダを作ります。

別に名前は「まぐろ」「かつお」でもいいです。

アップロードする画像をファイルにぶちこみます。

あ、ちなみに今回は

僕の顔を6枚ほど集めました。

「【永久保存版】かっつーの顔オススメ6選。シーンに合わせて使い分けよう！」 という記事で使います。嘘です。

さて、まずはiMage Toolsで一括リサイズ。

全部ぶち込んだら、リサイズの設定をします。

Resize→Fixed Width→Widthで700pxに指定。

急に英語が多くなってすみません。Sorry.

STRATを押して「リサイズ後」にぶち込みます。

左がリサイズ前、右がリサイズ後です。

横幅が統一されましたね！(見にくくてすみません)

次はブラウザでOptimizillaを開きます。

リサイズ後の画像を一括でぶちこみます。

一度に20枚までしか圧縮できないので、それ以上ある時は複数回に分けましょう。

めっちゃ圧縮されてるやん。ひええ。

驚いてないで「全てをダウンロード」をクリック。

ファイル「imagecompressor」が作成されます。

全て選択して「◯項目の名前を変更」をクリック。

僕は「パーマリンク-」にしています。

名前を変更したらWordpressを開き、

一括でぶち込みます。

無事、アップロード完了！！

以上がアップロードするまでの流れでした。

まとめ

ちなみにこれ全部、

はじめて3ヶ月くらい経ってから知りました。

って思っていろいろ調べたら見つけたんです。

実はPhotoshopはリサイズと圧縮の両方をできるらしいです。僕は持っていないのでこうしてますが！

てか、ブログ始めるときに「画像をリサイズ＆圧縮しましょう！」なんてどっかに書いてましたか？

(書いてあったらごめんなさい)

本当に早く気づかないと

になるので、今すぐ実践してみてください！

そして、こんな感じで「初心者に向けたブログノウハウ記事」を書こうと考えているのですが、

他にどのようなことが知りたいか僕のツイッターのDMで教えていただければと思います。

そしてそして！！！

【初心者ブロガー必見】
画像をリサイズ&圧縮する手順を書きました。

1.iMage Toolsで一括リサイズ
2.Optimizillaて60〜90%圧縮

これで画像のサイズが10分の1くらいになります。やらないとヤバイです。

超重要なことなので、よく分からない方は必ず読んでください！！！！https://t.co/79Gzh50tjD

— かっつー@学生ブロガー (@kattu0403) 2018年9月9日

もし役に立ったらリツイートしてくださると嬉しいです！！！！！