メモ帳

温泉、宇宙、地図、博物館、パソコンいじり、何気ないたわいもない発見。平凡な日常生活でやってみたこと、思ったことを綴ったメモ帳のようなもの・・・

パソコン

大小使い分け!ブログの画像サイズはこんな風に決めています。(WordPress使用)

投稿日:

 サイト上で画像をどのくらいの大きさで表示するかは今は簡単に設定が出来ますが(上図:WordPress)アップロードする画像のサイズはどのくらいにすればいいのか?

 初心者のころは”画像の横幅は640ピクセルくらいが良いよ”という話をかたくなに守ってずーっとそのサイズを使ってきましたが、今は地図や表など細かい画像は640ピクセルくらいだと「ちょっと拡大して見たい!」と思ったりするので、クリックして大きく表示する画像は大きなサイズで、特に拡大する必要もない”イメージ画”などはサイトの横幅に合わせたサイズでWordPressのギャラリーに保存しています。

”画像の横幅は640ピクセルくらいが良い”の真意は?

 640ピクセルの根拠は良く使われているテンプレートの記事エリアの幅だと思います。
 ホームページの画面は中央に本文のエリアと、左右もしくは片方に目次やカテゴリーなどのエリアがあるパターンが多いので記事の幅は大体450~700ピクセルくらいになり「多少のずれは気にしなくても(自動でサイズ調節されるので)640ピクセルくらいでいいよ!”と言う事のようです。

 自動でサイズ調節されるならどんなサイズでもいいのでは?と思いたくなりますが、ホームページ上で見る分には横幅640ピクセル、容量約200KBくらいあれば十分なのに、スマホで撮った横幅が3,260ピクセル、ファイルの容量は2MB(約10倍)もある画像をサイズダウンせずにそのままアップロードしていたら10倍のスピードでサーバーが満タンになってしまうので、さすがにそのままでは無駄が大きすぎます。やっぱり「640くらいにしておこう」と言うことのようです。

 自分のサイトが幅500ピクセルだとしても、140ピクセルくらいの差は見た目には分からないので気にしなくても良いですが、容量が10倍も異なっては”誤差”とは言い切れませんよね。

ちょっと詳しくみたい細かい画像は少し大きめに。

 ホームページ上で十分見える画像はリンクを貼らずにクリック出来きないようにしていますが、地図や表などの拡大して見たくなるような画像はリンクを貼っています。

 この時の画像は大きいものをギャラリーにアップロードしていて、大きさは横幅1,000ピクセルから1,500ピクセルくらい。画像にメディアライブラリへのリンクを設定しておいて、別画面で大きく表示されるようにしています。


 これが同じ640ピクセルの画像をアップロードしていると別画面で開いても同じ大きさなので意味がありません。

 注意したいのは、画像表示のプラグインを入れているときです。ホームページ上にポップアップ画面で写真を表示するプラグインを使っているとそちらの設定の大きさでしか開かないのでせっかく大きな画像をアップしておいても意味がなくなってしまいます。

スポンサーリンク

横幅は分かったけれど、縦はどれくらいがいいのか?(アスペクト比))

 画像のサイズはあまりこだわらなくても、ある程度自動で調節されるし、リンクして別ウィンドウで表示できれば拡大表示も出来ることがわかりました。

 ところで、縦は?横幅ばかり気にしているけれど、縦方向はどのくらいがいいのか?

 縦横の比率を”アスペクト比”と言うそうで正方形から縦長、横長までいろんな比率がありますが、これは写しているものによって変化してかまわないと思います。

 ハイビジョンスクリーンのように横長がかっこいいかもしれませんし、服のコーディネートなら縦長、ましかく(1:1)もおしゃれですよね。自分のサイトに合ったサイズに統一してみるのもいいかもしれません。
(自分のサイトはごちゃまぜな画像サイズですが、、、)

 ひとつだけサイズを変更しないほうが良い画像があります。”アイキャッチ画像”です。

 ホームページで記事の一覧を表示した時に、記事の内容を表す見出しの画像ですが、このトップ画面がずらっと並んだ時にサイズがバラバラだと、ラインがでこぼこになって見た目が悪くなります。ここだけはきちっと同じサイズを選びたいです。

まとめ

 画像のサイズは必要最小限にしたほうがサーバーの負担も軽く表示スピードも早くなって見やすい快適なサイトになるが、細かい数字は合わせなくても大丈夫。
 今回色々調べてみて、画像サイズを最初から計画的に統一したサイトは美しいなぁと感じました。自分も次のブログを作る時はもっと計画的に作りたいと思います。

うまくまとまらない文章になってしまった。最後まで読んでくださってありがとうございました。

-パソコン
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

お問い合わせはこちら