さて今回は、画像を記事で使うときの注意点とし・・・
Pandaえっ！待って！！おいらの登場シーンこれだけ？！めっちゃ頑張って圧縮しそうな絵になってたけどもぉー？！（恥ずかしっ=＞＜=）
おかぴーいや、後できちんと出番を用意しまっせ！
ということで、今回はなにやら手元でチャクラを溜めているこのパンダさんが大活躍する回です！
また後で彼には登場してもらいますので、まずは画像の圧縮についてお話しします。
みみこ
おかぴー
画像を記事に貼り付けるときに注意すること、それは圧縮して容量を小さくすることです。
大きすぎる画像はブログの表示速度を低下させるだけでなく、
ページの読み込みが遅いことで読者の方の離脱も増えてしまいます。
余分なデータ容量の画像にいいことはありません。
この記事では、そんな思いをしなくて済むように簡単に画像の容量を小さくできる便利なプラグイン、「Compress JPEG ＆ PNG images」のインストールと設定、圧縮方法をご紹介します。
圧縮って？
みみこおかぴーそうですね。
まずはどんなことをしているのかをイメージするために、こちらの画像をご覧ください↓
先ほどのパンダさん再登場！！
仕事ができて喜んでるみたいでよかったですね（笑）
あとでまたこの画像は出てくるのですが、この例でいうと、
左の赤枠の「943.6KB」が もともとの画像のデータ容量で、これを右の赤枠に書いてあるように、「302.7KB」にまでデータ容量を減らしています。
つまり、「68%の圧縮」に成功したことになります。
圧縮とはこの一連の作業のことです。
この「302.7KB」といった数値が少なくなればなるほど、
ページの読み込むときの負担が少なくなり、結果的に読者の方がページを読み込むスピードが速くなります。
これを行う、行わないでかなり読み込み速度に影響しますので、必ずやった方がいい作業と言えるでしょう。
プラグインをインストールしよう
それでは、具体的にどのように圧縮していくのか？
一番簡単な方法をご紹介します。
それが、「プラグインを使って圧縮する」です！
僕がその中でもおすすめするのが、「Compress JPEG ＆ PNG images」というプラグインで、
もともとTinyPNGというオンラインで圧縮できる無料のサービスがあり、そのプラグインが登場したというわけです。
でも、なんで無料のオンラインサービスがあるのにプラグインの話をしたいのかですが、
基本的にオンラインでも同じことができます。
ただ、
「圧縮したい画像をアップロード」
↓
「圧縮後の画像をダウンロード」
↓
「それをワードプレスにアップロード」
という作業を行う必要があるので、一番速くて簡単にやるにはプラグインを利用するのが一番だからです。
でも、後でオンラインのTinyPNGを使うべき理由もあるので、
一つずつ順番に解説していきますね。
まずはワードプレスの管理画面から「プラグイン＞新規追加」に進み、右上の枠でプラグイン名を検索します。
すると、画像のようなちょいリアルなパンダが出てきますので、
こちらを「今すぐインストール」をクリックしてインストールし、「有効化」とボタンを押します。（僕はすでにインストールしているので、有効とだけ出ています）
有効化されると、プラグインの設定画面に進みますので、ここでプラグインを使用するためのAPIキー（認証するためのアカウントのようなもの）を発行します。
「Tiny-PNG Developer API」に進んで、左に名前・右にメールアドレスを入力。（このメールアドレスですが、紐付けがうまくいかない場合があるのでワードプレスを設定したときと同じものを使ってください。）
すると、入力したメールアドレスに確認メールが来ますので、
リンクをクリックすると認証されました！と出てあなたが使用するAPIキーが発行されます。
この赤枠内のAPIキーをコピーしておきましょう。
今コピーしたキーを、プラグイン設定画面の赤枠①に貼り付け、「保存」をクリック。
これで認証が完了して、ワードプレスでプラグインが使えるようになりました。
あと、②にはワードプレスで使っているメールアドレスが入っているのですが、これは利用するブログで設定しているメールアドレスになっていると思います。
先ほどAPIキーで設定するために使ったメールアドレスですね。
このプラグイン、個人でブログを運営するのであれば無料の範囲内で十分だと思います。
クレジットカードを登録する画面で登録しておくと圧縮できる画像が増えますが、以下のように「free」の500枚で全く問題ありませんので登録せずに進みましょう^^
さて、インストールしたら今度は下の方にある各設定項目に進みます。
なにやら英語で項目がたくさん。。。
でも、以下の画像通りの設定で大丈夫ですのでご安心を。
オススメの設定
①new image uploads
→Compress new images in the background(Recommended)
アップロードし、自動で裏で圧縮してくれますのでここにチェックを。
②image sizes
→これは使っているテーマごとに表示が異なります。
基本的にOriginalにチェックが入っていれば問題ないです。
- Thumnail（160×160）
- Medium（300×300）
- Large（1024×1024）
の３つは、ワードプレスでデフォルトで設定されている画像の大きさで、
テーマに関わらず画像を挿入しようとすると選択肢として出てきます。
画像を挿入するときに見たことある方は多いのではないでしょうか^^
逆にOriginalを含めた、この４つ以外はテーマで独自で生成されるサイズです。
たとえば、僕の「STORK」のテーマでは、
- Medium large（768x?）
- Home thum（486×290）
- Post-thum（300×200）
の３つがテーマ内で使われるサイズになり、
僕のオススメは、Original image・Medium largeの２つにチェックを入れる設定です。
他の小さいサイズは圧縮をしなくてもそこまでスピードに関係してこないと考えているからです。
ただし、画像をアップロードするときは解像度だけ「72px」にしてます。
ブログ（つまり、WEBページ）で扱う画像はこれで十分です↓
解像度が「72px」でなければそこだけ変更します。
そしてアップロードしたサイズがこちら↓
赤枠が圧縮したサイズ、それ以外は圧縮していない表示がされています。
Originalサイズが、「Compressed：168.8KB（キロバイト）」。
つまりデータが168KB圧縮されて、461.4KBになりました。
つまり、768pxを超えるものは圧縮するように設定し、なるべくオリジナルサイズで使えるようにします。
画像を挿入するときも、なるべくオリジナルサイズにしておくことで圧縮対象の画像を作らずに済むので手間が省けます。
逆にもし、いつも画像を挿入するときにオリジナルサイズでなく、
３つのどれかのサイズを選択して使ってる場合は、デフォルトで出てくるサイズにチェックをいれておきましょう。
③Original image
→「Resize the original image」は、指定したサイズを超えたものだけ圧縮に加え、リサイズもする設定なのですが、①・②の設定さえしておけば不要だと思います。
すでにプラグインをインストール・設定完了した後にアップロードした画像は問題ないのですが、
設定前にアップロードしていた画像はまだ圧縮できていないので、次にその圧縮方法をご紹介します。
ワードプレス管理画面の「メディア」に進み、画像を見てみると、
②のように青い「Compress」というボタンが出ているのがわかります。
これが出ているってことは「まだ圧縮していない画像」を意味していて、
ボタンを押すと勝手に先ほど指定したサイズで画像の容量を圧縮し、データ量が少なくなります。
たとえば、下の画像の「muumuu9」というものは「２ sizes to be compressed」となっているので、
「Compressボタンを押すことで、先ほど指定した２つのサイズを圧縮しますよ〜」と書いてあるのです。
実際にボタンを押してみると、こんな感じで緑色のチェックが入ります。
「Detail」をクリックすると、圧縮されたデータが確認できました↓
このように、設定前の画像は「メディア」から必要な画像を圧縮していくのがいいでしょう。
ここでお伝えしたいことがあります。
このプラグイン基本無料なのですが、無料で圧縮できる数が１ヶ月で500枚までと決められているということです。
みみこおかぴーいえ、大丈夫です。
インストールするときに無料の設定をしておけば、「アップロードできません」と出てワードプレス上で圧縮できないと出るだけです。
先ほどのボタンを押すと、他のサイズの画像まで一気に圧縮できるのですが、
それも１枚にカウントされてしまいます。
それをしたくない場合は、先ほどの②「image sizes」の設定でチェックを外せば圧縮するサイズ数が減ります。
一つの画像を２サイズに圧縮するとなると、１ヶ月で250枚できる計算になります。
これだけできれば十分ですね。
もし超えてしまいそうな場合は、
アップロード・ダウンロードの手間がかかりますが、
今からお話しする「TinyPNG」というオンラインサービスを利用しましょう。
最初にお話ししたように、「Compress JPEG ＆ PNG images」のプラグインは、このオンラインサービスが元となっていて、どちらも同じ仕組みで圧縮してくれます。
オンラインなら圧縮枚数は無制限です。
僕は「Compress JPEG ＆ PNG images」で無料の枚数を超えてしまったときに主に活用しています^^
おかぴー最初慣れないうちは大変かもしれないけど、WEBの仕事をしていると画像でページの読み込みが左右されることが多いため、現場で必ずこの作業は行なっています。
結局誰のため？ってなったときに、自分のブログをよくするのもそうですが、読者の方が読みやすくなるようにすることが、結果的に自分に成果として返ってくると思うので、
少し大変かもしれませんが、画像のサイズには気を配っていきましょう^^
それでは、ここからはそのTinyPNGの使い方をご紹介します！
TinyPNGの使い方
このTinyPNGの使い方は簡単にいうと、
ネット上に一度画像をアップロードして、画像のデータ量を少なくしてからそのデータをダウンロードします。
パンダさん再登場！！
みみこふぅ、やっとわしも喋れるわい。（ワクワク）ちなみに、わしの好きな食べ物はのぉ・・・って、もう記事の後半やんけーーー（＞＜）
おかぴー
みみこ・・・
・・・笹かな？
はい、ほっといて次いきましょー！
真ん中の枠線部分に画像をドラッグすると、
データ量を大幅に削った画像を用意してくれてるんです。
こちらは冒頭に出てきた画像です↓
圧縮後、最後に緑色のボタンを押すと圧縮された画像をダウンロードできます。
ちなみに、画像だと１枚だけ圧縮していますが、
一気に圧縮できる数は20枚までとなっているので、
いくつかの画像を一気にドラッグして圧縮するのが便利です。
まとめ
画像は思った以上にとても重いデータです。
グーグルが提供しているPageSpeed Insightsというサービスがあるんですが、
これにブログのURLを入力すると、ブログの表示速度をスコア形式で測ってくれるので、
もし画像が重たい場合、この画像が重たいですよ〜と教えてくれるツールです。
ちなみに、このテストで仕様が変わり高スコア獲得が難しくなったそうですが、
モバイルスコアを93点獲得した方法をまとめた記事があるので、
興味がある方はぜひご覧ください^^↓
WEB制作の現場でも、ページの表示速度はとても重要な要素と言われています。
最近、計測方法が変わったようですが、これで今まで作成してきたページの改善点を見つけていくと、
ユーザーの人が見たときに快適にページが見れるようになります。
一度、画像の大きさが適切な容量で記事が作成できているか、
自分のブログの速度を確認してみるのもいいと思います。
あなたも、画像のデータ量をキレイに減らしてブログの記事の表示スピードを速くして、
ユーザーの方にとって見やすい快適な記事を作っていけるといいですね^^
コメント