【ワードプレス初心者向け】アイキャッチ画像の作り方・画像を軽くする方法

わたしのブログはまだ重い！こんにちはミカコ（@mikakolife)です。

前回、「主婦の方、収益の出るブログを書きませんか？」という記事を書きました。

主婦の皆さん！収益の出るブログを書いてみませんか？初歩のやり方を伝授！

これはその続編的な記事です。
WordPressブログ初心者の方にも参考にしていただければ！

わたしのような初心者がWordPressでブログを作ろう！と思い立った時につまづいて、調べるのに時間がかかったこと、これだけあります。

すいすい記事を書こう！と思っても、最初にやらなきゃいけないことがこんなにあって、その都度調べるのは、時間がかかります。

そこで、ただ検索しただけでは出てこない、Twitter内で諸先輩方に教えて頂いたことをまとめてお伝えしていきます！

今回は「アイキャッチの作り方と、画像を軽くする方法」についてです。

アイキャッチを作れるサイト・アプリ

 

多分、上級者の方はIllustratorやPhotoshopを使っているかもしれませんが、初心者のわたしの場合でご紹介します。

PCで作る時はcanvaという、色々なデザインが作れるサイトがあります。

これがとても使いやすいです。

最初からかっこいい素材やフォントが用意されているので、ちょこちょこっと自分のサイト用にカスタマイズすれば出来上がってしまいます。

操作も直感的で、マニュアルなどなくても全然いけますよ！

参考 Amazingly Simple Graphic Design Software – CanvaCanva

使い方はこちらのサイトが参考になります 

参考 おしゃれなアイキャッチ画像の作り方＆デザインのコツ8つサルワカ | サルでも分かる図解説明マガジン

スマホやタブレットで直感的に作ることができるアプリもあります。

phontoというのですが、こちらのブログで詳しい説明とともに紹介されています 

参考 スマホで簡単、アイキャッチ画像の作り方。デザインのコツまで徹底解説！｜セトさんドットコムセトさんドットコム

 

ベースとなる写真素材は、ぱくたそ、Unsplushからダウンロードしています。

そして、初心者のわたしは作ったアイキャッチ画像の重さについて知識が全然足りていないことが昨日発覚しました。

 

画像を軽くするための工夫

 

まずは、わたしの初心者丸出しの恥ずかしいツイートからご覧ください。
（クリックすると、実際にリプ頂いている貴重なご意見も読めます）

どなたか詳しい方、教えて頂けたら助かります！！

画像が400KBしかないのに、表示に時間がかかる時はどうすれば治るものなのでしょうか🤔

何がいけないのでしょう😱

— ミカコ＠アイコン一時変えてます🤩主婦雑記ブロガー (@mikakolife) 2018年8月11日

沢山リプを頂きましたので、わかったことをまとめていきます。

①素材はサイズ変更する！

 

写真素材サイトから素材をDLした時、サイズがかなり大きいので、横幅を500〜700pxにサイズ変更をする。

追記：テーマJINを使用の方は、横760×縦428px　がキレイにハマるサイズだそうです！

画像のサイズ変更などが一発で出来る便利なサイト：iLobeIMG 、　画像を縮小する！

参考 iLoveIMG | 画像編集用オンラインツールiLoveIMG | 画像編集用オンラインツール 参考 画像を縮小する！画像を縮小する！

②pngよりjpgファイルのほうが小さくできる

 

アイキャッチ画像を作り終わったら、保存する時、写真ベースならjpgファイルで保存する。
透過画像を使っているなど、イラストメインのときはpng。

jpgのほうがファイルが小さく圧縮されるのだそうです！

 

③画像を圧縮する

 

メディアライブラリにアップロードする前に、画像を圧縮！

②のサイトでもできますが、先輩方はパンダのサイト(Tiny PNG)で圧縮されているようです！

（圧縮技術がなんかいいのかもしれない！）
参考 TinyPNG – Compress PNG images while preserving transparency

 

④画像圧縮プラグインを併用する

 

④これは先に設定しておくのがおすすめ、画像圧縮プラグインを入れておく！

よく使われているのが「EWWW Image Optimizer」というプラグイン。

調べてみると、「TinyPNG」もプラグインがあって、これもアップロードする時に自動で圧縮され、「EWWW Image Optimizer」よりも小さくなるのだとか。

参考までに、プラグインの画面です　
上のプラグイン名をコピペして、プラグインの新規インストールで検索しましょう！
（プラグイン名は正しく入れないと、途中までのワードは検索結果に出てこないみたいなので注意です！）

参考リンク 

参考 WordPressの画像圧縮プラグインは「TinyPNG」が絶対おすすめ。 MORIAWASE（モリアワセ）

⑤画像の大きさの目安

 

最終的に、重さは30KB〜50KBが目安！

⑥今のブログの重さを把握して、改善しよう！

 

PageSpeedInsights というサイトで、自分のブログの表示速度が、モバイル・PC別にわかります。
ぜひ計測をおすすめします！

ココさんのブログに詳しい使い方と改善方法が初心者向けに紹介されています。

わたしもここで計測しながら一気にプラグインで画像圧縮を試みて、３２→６８まで改善されましたが…まだ少しPC表示が重いようです。

今後アップする画像はこのやり方でやり、過去の重い画像はぼちぼち見つけたら軽くしていきます。

参考 【初心者向け】ブログの表示速度が遅い？画像を一括で軽くした結果 - ココブログ-新米パパの子育て奮闘記-ココブログ-新米パパの子育て奮闘記-

まとめ：画像を軽くしてブログの表示スピードをあげましょう

 

初心者には色々とつまづきの多いアイキャッチ画像ですが、Twitter内でお聞きしてみて、検索しただけではわからなかったことを学ぶことができました！

同じように迷われていた初心者の方のお役にたてたら幸いです！

【おしまい】

主婦の皆さん！収益の出るブログを書いてみませんか？初歩のやり方を伝授！ 【WordPress】超初心者ブロガーのTwitterの使い方。離れ小島で、アクセスの少なさに涙目にならないための方法！ ブログ開設１週間の運営報告。