Welcome to my blog

vanillaice (Akira)

vanillaice (Akira)

sample一般的に「画像の大きさ」と言ったとき

・ 画像の縦横サイズ
・ 画像の容量


この二つを指しますよね (´・ω・`)
本記事は主に「容量」についてです

ひとつ大きな誤解として
「画像のサイズを縮小表示したら 画像容量も小さくなる」
これは間違いです

例えば 縦横1000px正方形の画像を 300px四方で縮尺掲載したとします

<img src="画像アドレス" style="width: 300px; height: auto;" alt="代替テキスト">


コードとしてはこんな感じですかね あるいはFC2のツールバーを利用するとこんな感じ

<a href="画像アドレス" target="_blank"><img src="画像アドレス" alt="代替テキスト" border="0" width="300" height="300" /></a>


デフォルトではリンクが生成され リンク先は「アルバム」あるいは「オリジナル画像」いずれか
(border="0" の記述は現況のweb標準の観点ではよろしくありませんので削除した方が良いです
html5構成のテンプレであれば末尾のスラッシュも不要
alt属性の代替テキストもホントは画像を端的に示す文言を自分で書いた方が良いです)

このパターンは オリジナル画像がそのまま存在しており
htmlやCSSを利用して「縮尺」して「表示」する方法です
これでは画像の容量を削減することができません オリジナル画像の容量と全く同じ負荷です
オリジナルの画像を一旦読み込んで それを表示上のリサイズをしているだけですので
小さく掲載する = ページへの負荷が減る
という方程式は成り立ちません
ということは

1000px四方 画像容量1MBの画像を縮尺で 300pxで掲載しても
容量は 1MB のままである
ということです
ここを誤解されている方が結構いらっしゃるのではないでしょうか

容量を減らすためには オリジナル画像に直接なんらかの修正を加えます
いわゆる「画像の編集」です


------------


なにが言いたいかというとですね
iPhoneやAndroidで写真を撮りますよね
スマホの写真サイズ(縦横寸)というのは とんでもなく大きいんです
2000pxとか3000pxとかありますよね
ちょっと前までは最も流通しているパソコンの画面サイズは 1024px と言われていました
現在では 1300ちょいですかね
ブログテンプレートの全体幅としては 900~1300あたりが多いかと思います
2000pxもある写真の全体像をそのまま見せるというのは至難の業でございます(笑)

縮尺表示ってサイズ記述するだけなので楽なんですよ
でもそれだとページ表示の負荷というのがあまりにも大きい
例えば

テンプレートの仕様が「全文表示」さらに1ページあたりの「表示件数10記事」だとします
写真がメインのブログで 撮った写真には特に手を加えずそのままアップロード
1記事あたりの写真掲載数が 5点
写真1枚あたりの容量が800KB(このあたりが平均です)

すると単純に
5×800=4000KB (4MB)
4MB×10記事=40MB

1ページあたり40MBですよ 40メガバイト!!!(笑)
これ比較的画像表示に強いChromeでもスクロール中にクラッシュするレベルです
IEだとクラッシュする前にホワイトフリーズかな というところ
でね 実際にいらっしゃいます
せっかく綺麗な写真を載せていらっしゃるのに クラッシュしてしまったら元も子もない (´・ω・`)

というわけで
画像はしかるべき処理をして 容量は極力減らしましょう
大きけりゃ良いってもんでもない
写真というのは全体像を目で捉えることができて初めて
「ああ 綺麗だな」
という認識ができます それが人間の「感覚」です
大きい = 綺麗
ではないんです (´・ω・`)

最適サイズはどうでしょうね
最近のパソコンは大画面化していますので 横1000px~1200px というところじゃないでしょうか
逆に小さすぎても辛いですよね
大画面スライドを利用したテンプレートなども最近では多いです
ということで おすすめは横1000pxあたり
(モバイルファーストを考えるとまたちょっと違いますけどね)
縦横のサイズを画像編集で小さくしただけでも容量は減らせますが
さらに専用ソフトなどで「容量削減」を行うと良いですね
私は平均サイズ横1000px 画像容量は最大でも100KB(平均だと 60KB程度) まで減らしています
1000pxを基準にしているのは 大きめのスライダー付きテンプレを作成する可能性を考慮してです
極論を言うと スライダー等で抽出できる画像というのは 記事の一番最初の画像だけですので
それ以外は小さいサイズでも良いと思うー (´・ω・`)

-------------------

写真の拡張子は主にjpgですが
この拡張子の画像というのは

拡大しても縮小しても解像度が落ちます

縮小でも解像度は落ちるんです
ですから専用ソフトを利用するのが望ましい
以下のソフトあるいはwebサービスを探します

① 拡大専用
② 縮小専用
③ 縦横サイズを変更せずに容量だけを削減

大きくこの3つです
③については当ブログのカスタマイズ書庫に情報があります
その他は自力で探す (`・ω・´)b (えぇ?!)

時間あればおすすめ追記します(笑)

---------- 追記 2015.8.17

①のおすすめソフト

縮小専用。

②のおすすめソフト

SmillaEnlarger

③のおすすめサイト

Compressnow
関連記事
最終更新日2015-08-17
Posted by

Comments 2

There are no comments yet.
hige  
No title

 (FC2)ブログを始めた当時は画像の容量が気になってて、gif にしたりしてましたが、始めて5年経った結果全体容量の5%も使ってませんでした。
 100%になるのは100年後!
 最近カメラに凝ってまして、画像の大きい方が表現力が大きいと云うことに気づいてから、おっきな画像を貼るようになりました。(横長写真はW=1200px)
 記事本文の画像はどうもサムネールの方が表示は速そうです。
 投稿画像を縮小表示させると表示に時間が掛かるようです。
 それでも、どうもサムネール表示よりは元画像の縮小表示の方が画質がいいようで、結局そうしてます。
 画像の編集はXnView がファイラーも兼ねていてめっちゃ使い勝手がいいです。モザイクをかけたりとか、明暗レベルの調整とか、縮小とか・・・。

 テンプレート。いじってるとなかなか勉強になります。

2015/11/15 (Sun) 16:52 | EDIT | REPLY |   
Akira  
To higeさん

お返事大変遅くなりました (*_ _)

そうですね。サムネイルは高速表示に特化していると言っても良いと思います。
極東あたりの画像サイトなんかは未だに3MB, 4MB級のPNGを元画像のまま載せたりしていることが多いです。
めちゃくちゃ重たいっつーの(笑)
何事もバランスですかね。
画像にしろ人生にしろ((((笑)

コメントありがとうございますe-454

2015/11/16 (Mon) 22:38 | EDIT | REPLY |   

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い