読者です 読者をやめる 読者になる 読者になる

メープルたいむ

甘ったるくゆったり読める雑記を目指してます。どうぞ「メープル」な一時を。

ブログにちょうどいい、見やすい画像サイズとは?

ブログ ブログ-カスタマイズ

ここまでブログを書いてきて、画像を元のデータそのまま、特に何も考えずに載せていた。

でも思った、そのまま貼ると見にくい画像の大きさってあるよね?!

例えばスマホで撮影した写真そのまま。あれなんかスマホの画面の大きさそのものだから、パソコンとかで見たら縦長すぎるでしょ!文字とバランス悪いでしょ!

みんな画像のトリミングしてる?!

トリミングは画像のいらない部分を切り取ることだよ!


見やすい画像を追求すべし!

f:id:momijitan:20160906165738j:plain

貼る前に大きさを調整しないと、見にくい画像サイズってあると思うんス。


ブログで画像を貼ることは、記事の内容をイメージする手助けをする他、文章だらけで疲れちゃう読者を休ませる効果もある。

だからこそ結構こだわる価値あると思うんよね。

画像の大きさはもちろん、やたら高画質の重い画像いっぱい載せてページの読み込みが遅くなるのも、読者にとってはストレス


なので今回むっちゃ時間かけて調べまわって記事にしたよ!!

ブログにピッタリな画像の大きさって?

「そもそもブログにちょうどいい大きさって、どれくらいなんだ?!」

これが今回の主題であります。私気になります!!

調べてみたところ、こんな記事を発見。

ブログに載せる画像サイズはどのくらいがいいの? - 道楽者の詩

いやはや、なんとありがたい記事。俺の知りたかったことがドンピシャ。

この記事を参考に、実際に同じ画像をトリミングして貼ってみて、印象をパソコン・スマホそれぞれで見比べてみました。

ピザ美味しそうでしょ?

momijitan.hatenablog.com

結論として、
アスペクト比(幅:高さ)4:3で560×420(px)
の大きさが現状しっくりきました。


当分はこの大きさで画像をトリミングしていく予定です。

自分で試す前は、前述の記事を鵜呑みにして600×400でトリミングを行っていたんですが、実際に他と比べると横長すぎる印象を受けました。

ただし、これはあくまで「はてなブログ」しかも現在俺がテーマに設定している「Naked」における加減ですので、読者の方全員に流用できる結果とは限らないと思います。

是非ご自分のブログで試してみることをオススメします。

トリミングと圧縮、縮小の違い

トリミングと圧縮、あと縮小ってどう違うの?

画像をいじるにあたって、トリミングの他に「圧縮」「縮小」という単語を耳にするかもしれません。実際にトリミングのやり方を解説する前に、この疑問に答えておこうと思います。

  • トリミング:画像を指定の大きさに切り取ること
  • 圧縮:いらないデータを削って画像の容量を小さくすること
  • 縮小:画像の大きさを縦横比などを変えずに縮めること

トリミング、縮小は単に画像の大きさをいじるもの、圧縮は容量をいじるものという点で大きく違います。


容量とは、画像のファイルとしての重さ、150KBとかそういう数値です。

この数値が大きくなってしまうとサイトが重くなって読み込み速度が下がり、結果的に見る人がストレスを感じるページになってしまいます。

そのため、いらないデータを削ってできる限り見かけを保ったまま軽くしてあげよう、というのが圧縮なんです。

momijitan.hatenablog.com


ところが、トリミングや縮小を行うことでも容量は小さくなるのです。

なぜかというと、トリミングも縮小も画像を元の大きさより小さくする行為だからです。

画像を小さくするということは元の状態よりデータで表現する敷地が減る、ということですから、結果的に容量も減ってしまうんです。


じゃあ圧縮はする必要ないのか、というと場合によります。

トリミングや縮小をしてもさらに削って軽くしてあげられる容量は実際あります。というか圧縮そのものを何度でもかけて容量を極限まで減らすこともできます。ただし必要以上に圧縮してしまうと画質が相当粗い汚い画像になってしまう、という問題が…

俺はトリミングをしてみて、100KB以上であったら圧縮をかけて画質の様子を見るようにしています。


無料でトリミング・縮小

見つけちゃいました見つけちゃいました。
無料でトリミングと縮小ができちゃうサイト。Photoshopの下位互換、トリミング・縮小以外にも結構使えそう。

Online Photo Editor | Pixlr Editor | Autodesk Pixlr


まずトリミングの方法

①画像ファイルを開く

f:id:momijitan:20160917042824p:plain

コンピューターから開くを選択。ここから使いたい画像を選ぶ。

②切り抜きツールをクリック

f:id:momijitan:20160917043030p:plain

こんな画面になる。左側にあるツールの左上にある切り抜きツールをクリック。


③出力サイズを選択して幅と高さを設定する
f:id:momijitan:20160917043342p:plain
画像のように設定する。幅と高さはお好み、今回は「560×420」小数点は入力しなくて大丈夫。


④切り抜きたい範囲をドラッグ

f:id:momijitan:20160917043612p:plain

画像上でマウスをドラッグすると領域が現れる。切り抜きたい範囲に合うように四隅などをいじって調節する。
画像の外などをクリックすると「変更を適用しますか?」と出てくるので「はい」をクリック。


⑤できた画像を保存
f:id:momijitan:20160917044134p:plain
画面上部のファイルから保存をクリック。するとこのような画面になる。右下にできあがるファイルのサイズが表示されている。名前をわかりやすく変えるなどして「OK」をクリック。すると保存する場所を選択する画面にうつるので、場所を指定して保存。

これでトリミングは完了だ。


縮小する方法

f:id:momijitan:20160917044911p:plain

縮小するには画像を開いた上で、上部メニューの「画像→画像サイズ」でこのような画面になる。縦横比が固定にチェックが入ったままなのを確認し、幅の方に適当な数値、例えば「560」と入力する。すると画像が縦横比を保ったまま幅が560になるよう縮小される。
終わったら⑤のように保存すれば完了だ。



著作権に注意!トリミングはアウト?!

画像を扱うにあたって注意しなきゃなのは著作権

この記事を投稿した時点では一切気にせずにいた俺ですが、無断転載で違法やらかしてたことに気付いて大慌て。

結論から言うと、
ネットで拾ってきた画像をトリミングして載せるのはアウトです!
なんてこったい!!

f:id:momijitan:20160906165940j:plain

著作権フリーはOK!

もちろん著作権フリーのサイトから頂いてきた画像なら、何の心配もいりません。思考停止してトリミングなり縮小なり使って大丈夫です。みんな大好き「ぱくたそ*1」とか。

「トリミング」は✕、「縮小」は◯

ネットで拾ってきた画像は、「トリミング」はダメでも「縮小」はOK*2なんです。

なぜならデバイスやブラウザによって、「どうしても元画像の大きさを維持できない」状況が起きてしまうから。パソコンの背景用に作られた大きい画像をスマホで見ることなんて、そもそも不可能でしょ?

  • 「トリミング」とは縦横比を変えて画像の一部を切り取ること
  • 「縮小」とは縦横比を保ったまま画像そのものを縮めること

許可は必要?

出典を明記しましょう。

基本的に許可を取る必要はありませんが、中には著作者に直接許可を取らなければ画像を一切使えないサイトもあります。

「pixiv」などがそうです。*3