WordPressに画像をアップロードする時、ただ適当にアップしていませんか？
重要なプラグインやアップロード手順を知らないと、サイト全体の容量がとんでもないことになるかも…。
こうしたことが起こらないように、今回はWordPressに画像をアップロードする手順に解説して行きます。最初は少し面倒に感じるかもしれませんが、すぐに慣れます。後々のことを考えると、今すぐ実践すべきものばかりです！
ちなみにですが、一応僕の使用環境についても書いておきたいと思います。
- パソコン：Mac。途中でMac用のアプリを使用するのですが、Windows用の代替案も記載してあるのでご心配なく。
- レンタルサーバー：ConoHaを使用、WordPressテーマはCocoonです。
使用しているアプリ・プラグイン
それではまずは、これ以外に使用するツールからです！
ツールはたったの2つだけ。簡単です。
「Image Optim」画像圧縮アプリ
まずは「ImageOptim」ですね。名前から想像できるかもしれませんが、画像圧縮用のアプリです。
こちらはMacで利用できるアプリで、App Storeからインストールすることができます。App Storeにあるので信頼できますね。
無料版では1日20枚までですが、画像の圧縮やpng→jpgのような拡張子の変更を行うことが出来ます。後述するプラグインよりも圧縮率が高いのが特徴です。
そして、Windowsの方はどうするの、という話ですが、TinyPNGというWebサイトを頼りましょう。
上記のアプリと同等の圧縮率を誇るもので、正直に言うとこちらの方が遥かに有名です。ちなみにPNG以外もきちんと圧縮できます。
個人的にはインストールして使えるアプリの方が好みなので、ImageOptimを使っています。ここら辺は正直好みの問題ですね。
「EWWW.Image Optimizer」多機能なWordPressプラグイン
次に「EWWW Image Optimizer」です。こちらはWordPress用の画像圧縮プラグインになります。念のため、上記のような圧縮ツールと併用しても問題はありません。類似のWordPressプラグインとは干渉する可能性が高いですが…。
このプラグインのメリットは5つあります。ので、別の記事にて解説しています。
アップロード手順の概要。
それでは実際の画像のアップロード手順についてです。例えばスマホで写真を撮ってMacの「写真」Appに保存したとしましょう。ここから先の作業は次の通りです。
- 1「写真」から「Finder」にコピー
- 2画像のサイズを「プレビュー」から変更
- 3ファイル名を変更
- 4「Image Optim」に画像を入れて圧縮
- 5WordPressに画像をアップロード
- 6代替テキストの設定
アップロード手順の詳細。
それではこの手順に沿って実際に試しながら解説して行きます！
1「写真」から「Finder」にコピー
まずこの後の作業のために画像をFinderにコピーしましょう。単純にドラッグ&ドロップで良いです。この時、僕の場合は「圧縮前」というフォルダを作ってそこに入れています。
2・ファイル名を変更
次にファイル名を変更して行きます。SEO対策のためには適切なファイル名を付ける必要があるようですね。例えばこの写真だったら「u-tokyo-red_gate」や固有名詞なので「u-tokyo-akamon」などでしょうか。
この時、少し詳しめに名前を付けることが重要です。分かりやすい例で言えば、「dog」より「litte-dog」にするということですね。
3・「Image Optim」に画像を入れて圧縮。
次はいよいよ画像の圧縮ですね。これもドラッグ&ドロップで完了します。僕の場合はFinderの「ダウンロード」のところに「ImageOptim」というフォルダが生成され、そこに圧縮後の画像が入れられます。
ちなみに元の画像がなくなることはありません。
画像によると思いますが、だいたい50％くらい圧縮されますね。すごい！
ただし、無料版だと1日に20枚までしか圧縮できません。使う画像をまとめて圧縮するよりも毎日ちまちまと圧縮しましょう。
Windowsの方はここを「Tiny PNG」などで代替していただきたいところになります。
4・画像のサイズを「プレビュー」から変更
次は画像のサイズを変更して行きます。これはMacの人は「プレビュー」を使いましょう。これによってさらに画像の容量を小さくすることが出来ます。
左上から「ツール」を選び、さらに上の方にある「サイズを調整」を選択します。ここでは画像の幅と高さを指定できます。
おすすめは、長辺の値を1000にすることですね。これで画像容量をある程度減らすことが出来ます。SEO対策の観点からもこのくらいのサイズがちょうど良さそうです。（確証はありませんが…）
ちなみに、この値を小さくし過ぎると画質が壊滅的なことになってしまいます。また、解像度や再サンプルに関してはデフォルトのままで大丈夫です。
5・WordPressに画像をアップロード
これで事前準備は完了です。それではWordPressに画像をアップロードして行きましょう。
左のメニューのメディア＞新規追加、ですね。これもドラッグ&ドロップもしくはファイルを開くことでアップロード出来ます。ここに関してはこれだけですね。
6・代替テキストの設定
最後に代替テキストですね。HTMLで言うところのalt属性です。これを設定することで、画像が読み込まれなかった時に代わりに表示されます。
また、代替テキストによってGoogleなどの画像検索でも表示されるようになり、SEO的にもグッドです！
これを設定するのは実際に記事に画像を挿入するときで良いと思います。こちらもファイル名と同じ考え方で、出来るだけ詳しく書くことをおすすめします。アイキャッチ画像には記事のタイトルを付けるのが良いかな。
また、単なる装飾目的の画像には、無理して代替テキストを設定しなくて良いようです。
まとめ
というわけで、以上がWordPressに画像をアップロードする時のおすすめ手順でした！
結局のところ、全てはサイトへの集客につながっていますね。画像を軽くすれば表示速度が改善され、ファイル名や代替テキストによって検索にヒットする回数を増やしています。
参考にできそうな部分はぜひ参考にして、快適なブログ生活を営んでください。僕もそれを目指しています…
