こんにちは、みよし之です。
今回は、Cocoonにおいて画像のサイズや横幅・縦幅について記事を書いてみました。
ブログに画像をアップする時は、サイズが小さいほうがいいのかな？
このように思っていませんでしたか。
確かに画像サイズは小さい方がいいんですよね。
ところが、私はこれを勘違いして失敗をしたのです。
画像編集でピクセル(px）を極端に小さくしてしまいました ・・・
画像をアップロードしても小さく表示されるし、逆に拡大してみるとぼやけてしまうことになるのです。
ますます意味が分からなくなりました。
そこで、この記事では適正なサイズやファイルサイズについて、気が付いたことを記事にしています。
なお、プラグインはEWWW Image Optimizerを使用していますので、ファイルサイズが大幅に縮小されています。このプラグインは、Webp化もできる上に次世代フォーマットでの画像の配信もできますので、おすすめなプラグインです。
ファイルサイズについて
ここでは、ファイルサイズについて説明します。
メディアライブラリで確認すると〇〇kBと表示されていますよね。これがファイルサイズです。
この数字が大きくなればなるほど、次のようなことが考えられます。
- サイトの読み込みに時間がかかる
- レンタルサーバーの容量を圧迫する
ですから、できる限り小さく抑えたいと考えるわけです。
他の人ってどれくらいのファイルサイズなんだろう？
これに関しては簡単に調べることができるのです。
- Edgeの場合は、調べたい画像を右クリックして、開発者ツールで調査するを選択
- chromeの場合は、調べたい画像を右クリックして、検証を選択
右側にコードが表示され、カーソルを合わせると調べたい画像が青くなります。同時に右側のコードのエリアでは、ファイルサイズなどが表示されます。
ただし、そこで調べたものとメディアライブラリで表示されているファイルサイズが違っている場合もあります。
このコードは、他のサイトなどを調査や検証するためのものです。そのため、仮にコードを削除しても自分のパソコン画面上で起こっていることであり、元のサイトのコードを書き換えるというわけではありません。
なので、コードを書き換えて画像などが消えても、一度画面を閉じて再度開いてみると元に戻っています。
ファイルサイズの違いについて
では、次の3つの画像をご覧ください。
アップロードしたのは1600×150pxの同じ画像で、数字だけ分かりやすくするためにつけ足しています。
上記で説明したように画像を調査・検証してみてください。Edgeの方が分かりやすいかもしれません。
同じ画像でもpxが違います！
これは、EWWW Image Optimizerの設定を変更しただけなのです。
プラグインを開くと画面上部の基本の項目に画像のリサイズという項目があります。
画像のリサイズを1024pxにしたため、chromeでは調べてみても1024pxとなっています。
このように、画像のリサイズを設定している場合は、大きいサイズでもアップロードするときに修正してくれます。
私は、ここに気が付くまでに時間がかかりました。なので、GIMPなどのアプリを使って400×〇〇pxに変更してから、いつも画像をアップロードしていました。
本当は、一度画像を小さくしたら、あとで大きくすることをしない方がいいんですよね。
その理由は後半に書いてあります。
では、実際の画像サイズがどのようになっているかを説明します。
- アップロードした画像は、1600×150px
- 元の画像のファイルサイズは、158ｋB
| 1の画像 | 2の画像 | 3の画像 | |
| リサイズ設定のサイズ | 1536×144 | 1280×120 | 1024×96 |
| ファイルサイズ | 66kB | 47kB | 30kB |
| Webp後 | 55.0kB | 39.8kB | 25.3kB |
なお、Edgeとchromeで調べてみると、双方で違ったサイズが表示されることもあります。
このように画像の見た目は同じでも、画像のリサイズによってファイルサイズが大きく違ってきます。
ポイントは、この表では高さが違うようになっているという点です。試しにペイントを使って3つの高さを比べてみましたが、サイト上では同じになっています。
ですから、このプラグインを入れている人は、画像のリサイズに合わせて画像の大きさをアップロードすることによって、ファイルサイズを小さくすることができるというわけです。
例えば、私が使っているテーマはXWRITEです。
定期的にテーマが更新されているのですが、その一つにふき出しの幅を変えることができるようになったのです。
幅200PX
幅850PX
幅1000PX
このようなことから、メインコンテンツ幅は約850PXだということが分かるのです。
同様に、サイズ違いの画像をいくつか取り込み、メディアライブラリで確認してみてください。
アップロードする最適なサイズやファイルサイズについて、理解しやすいと思います。
なお、画像をアップロードする際にはTinyPNGで圧縮かけておくことをおすすめします。
こちらは画像圧縮についての記事になります。もう少し圧縮の違いについて知りたい方はこちらをご覧ください。
また、画像のピクセルサイズを変更してみたい人は、GIMPを使うと簡単に変更することができます。
GIMPの使い方についてはこちらをご覧ください。
ファイルサイズはページの読み込み速度にも影響してきます。できる限り小さくしておきましょう。
画像のアップロードについての注意点について
ここでは、私がブログを始めてから随分経った時に気が付いたことを、注意点としてお伝えします。
実はこれ、大きな間違いだったのですね。
確かにピクセルは小さいほうがいいのです。ピクセルが小さいとファイルサイズも小さくなるからです。
これは、あとで記事をリライトするときに後悔した内容です。
1000pxの画像を400pxに修正してからアップロード！
これをしてしまうと、確かにファイルサイズは小さくなります。
ですが、記事をリライトする時に大きいサイズものが必要となることもあります。
- 拡大することはできるが、画質が荒くなる
- 大きいファイルサイズの画像を消去している
この点には、注意をしておきましょう。
試しにこちらに貼り付けてみます。
白紙に文字を書いただけのものです。
サイズは200×50pxで作成したものを使い、それを拡大させて表示したものが下の図になります。
このように、拡大した場合は画質が悪くなります。
この点について、気をつける必要があるのがお分かりいただけましたでしょうか。
例えば、アイキャッチなど1200pxで作成しても、実際は画像のリサイズに合わせて変更されます。また、ヘッダー画像はアイキャッチ画像や普通の画像アップロードサイズと異なります。
これらをどのサイズでアップロードしたらいいかは、自分で試してみた方が理解しやすいと思います。
こちらの記事は、画像の横幅や縦幅について書いています。よかったらご覧ください。
まとめ
いかがでしたでしょうか。ここでは、ブログにおけるサイズやファイルサイズについて説明をしてきました。
ファイルサイズはサイトの表示スピードにも関わってきます。どこまで小さくできるだろうかということは、実際に自分のワードプレスで試してみてください。
ここを理解しておくと、どのサイズでアップロードすればよいか悩まなくても済むようになります。
一方で、どこまでサイズを小さくしたらいいかも気を付けておく必要があります。記事をリライトしようと思った時、大きいサイズが欲しかったと後悔しないように注意しておきましょう。
最後まで読んでいただきありがとうございました。
