サイズが大きければ当然重くなる
画像のサイズってわかりにくいですよね。
ピクセルが大きさの単位。
640ｘ371は640個の点ｘ371個の点で構成されています。
目に見えているサイズという概念とは違います。
※なぜ640ｘ371なのかは次回の記事で判明します。
左側の写真はiPhoneで撮影したものを
そのままＰCに保存したもので
サイズは3024ｘ4032ピクセル
実物の10％サイズで表示しています。
iPhoneで見る写真は小さいですが
画素数でいうと決して小さいわけではありません。
右側の写真はリサイズして
640ｘ853ピクセルに縮小しています。
縦横の比率は変更していません。
実物の50％サイズで表示しています。
見た目は同じ。
※加工ソフトのスクショです。
ちょっと重くなってごめんなさいですが
実物を二つ並べてみます。
ネット環境によっては同時に表示されたかもしれませんが
左側はファイルサイズが大きくて重い。
ブログに貼りつけた時の視覚としては同じサイズで表示されます。
ネット環境によっては左は開くのに時間がかかります。
見た目が同じなら、
画像は軽くして使う方が親切です。
ページが開くのに時間がかかるのは
離脱の要因にもなるので自身のためでもあります。
スマホ用の無料ソフトでもそれができると思いますので
ひと手間かかっても、サイズダウンを推奨します。
保存形式を選ぶ
サイトにより表示できる画像の拡張子は違うと思いますが
はてなブログの場合はJPEGとPNGだと思います。
明確に書いてあるものが見つからなかったのですが
以前GIFは表示できないと読んだ気がします。
私の記憶が正しければ。
JPEGとPNG どちらを選ぶか
JPEGは画像が劣化しやすいと言われていますが
ファイルとしては軽いのでお勧めです。
通常であればJPEGが適していると思います。
ただ、透過保存ができないという弱点があります。
PNGは透過して保存ができます。
下の画像、左がJPEG。
ブログの背景が白い場合は違いが判らないのですが
当サイトの様に色付きの背景の場合は
透過された右のPNGの方が境目が無くて
見栄えがいいです。
はてなフォトライフに保存した場合
PNGは勝手にファイルサイズが大きくなってしまうそうです。
※確認はしていませんが記事に書いてありました。
透過が不要な場合はJPEG
透過したい場合はＰNGが適していると思います。
JPGで透過に見せる裏技
JPGの背景は保存する時にレイヤーが結合されてしまうので
白くなってしまいますが
背景色をブログ背景と同色に塗れば
境目が分からなくなります。
このサイトの背景色は
R223 ,G244,B241
#E9F4F1
このように色番号を抽出して
それを背景色にすれば透過と同じ効果は得られます。
ただし、デザインテーマを変更して
背景色が変わってしまうと意味をなさなくなります。
SUMMARIES
♕ 画像はファイルサイズを小さくしよう
♕ 透過の場合はPNG.軽いのはJPEG.
♕ 縦長画像は横に二枚並べるとおさまりがいい
次回は用途に合わせたサイズのご案内
