戯れ言葉

ブログなどのWEBサイトでの画像の容量にはこんなことに注意されてはどうでしょう

カテゴリ:FC2ブログの色々とカスタマイズとか
タグ:

FC2ブログに限らず画像を使用する場合ここを注意しましょうという話。

画像には縦800px 横1200px などと云う画面上の大きさと、200KB(キロバイト)などと云う容量というものがあります。画面上の大きさが大きくなると、容量も大きくなるのですが、青一色の画像と複雑な風景では同じ画面上の大きさでも容量は画像のファイル形式で違ってきます。

画像の容量は極力減らしてくれないと、スマホから閲覧した場合、表示に時間がかかって俺のギガが無駄になくなってしまう。そんなサイトは見に行きたくない。アフィリをやってるブログを含む商用サイトはこんなケースが多いんです。肝心なところが表示される迄に時間がかかってイライラ。おまけに記事を読んでる最中に、記事の部分が逃げてしまって上下にガクガク。なんなのと思ってたらおもむろにCMが割って入ってきた。

それでも画像の縦横の大きさはある程度ないと、せめて画像の長辺のサイズは1,200px(ピクセル)は必要だと言う話も。でないと最近の高解像度のスマホでも画像が粗くなるらしい。

画像は縦横の大きさと云うか, そんな広さの他に、画像が持ってる容量というものがあります。例えばA4の紙に描かれた210mm×297mmという面積に描かれた画像が、デジタル的にどれだけの容量に格納されているのかと云うことが重要です。jpgという一般的に使用されている画像の様式は特殊な設定にしない限り圧縮の技法が使われています。

jpgの色々な画像を見てもらえば判ってもらえると思いますが、画面に複雑なものが写されているものよりも単純な青空一杯な画像の方が容量が少ないことが判って戴けると思います。

次の画像は、カメラで撮れた画像を、FC2ブログでアップロード(登録)できる1ファイル当りの容量の限度の5MBに近い4.33MBに圧縮したものです。

(以下の画像例では記事内画像をクリックして実際の大きさの画像を体験して欲しい。)


こいつはFC2ブログのアップロードできるファイルの総合容量的にもまずいと思いますが。

この様に書いても閲覧して戴いてる方にどのような影響が実際に出るのかは検証できてないのと、2回目以降の表示にはブラウザのキャッシュが働いて影響は出ないかも知れません。

もしなんの影響もなければ、今回の私の記事は大失敗かもね。スマホで見ていただくと体験できるかも

もし影響が出るとすればPCやスマホが画面に画像を表示する場合、どれだけの時間で表示できるかということと密接な関係があります。

次の画像は、横幅を1,200pxに縮小して、圧縮をしない画像です。画像容量は990KBあまりです。

更に次の画像は横幅が同じ1,200pxで容量を104KBぐらいまで圧縮したものです。

これくらいならば画像の差はそれほど判らないようですが

さすがに画像の横幅が同じ1,200pxであってもここまで圧縮(49KB)すると画像劣化は明白になります。レンガのアーチ下や葉の表現を見てもらえれば、画質の劣化状況は一目瞭然ですね。両方の画像をクリックして二つとも開き、タブをクリックして見比べていただければわかります。どちらも縦横サイズは同じ1200px なのに細かい部分の表現力が違ってます。

この容量を圧縮すると言う方法を採ると、同じ色のエリアが広いほど圧縮後の容量は少なくなります。例えば一面が青空の画面では上記の例よりも更に容量は小さくなります。上記の画像の様に複雑な色が画面のあちこちで使用されている場合は圧縮の効果が悪く、画質の劣化が判りやすくなります。

画質をどこまで確保してそして閲覧者が我慢しなくてもいい表示スピードを保証するのか。そんな優しさが必要になってきて、グーグルもそこを判断基準にしてきた様です。

まぁ、俺のブログはスマホで見てくれなくてもいい。それなりの性能を持ったパソコンで見てくれ!と云うのも有りとは思いますが。グーグルさんには嫌われるかもしれませんね。グーグルさんはモバイル(スマホ)優先を打ち出されてますので。

画像のサイズを小さくしたり、容量を圧縮したりできるフリーソフトでは JTrim  が一番有名かも知れません。ただ私は使ったことがなくて、私はXnView  というフリーソフトがお気に入りです。

又は下記の様なサイトでも画像の容量を圧縮してくれるサービスがあります。フリーソフトの導入に抵抗のある方にはお勧めかもです。

オンラインイメージ最適化ツール/Optimizilla 

繰り返し念押しをしておきますが、容量の圧縮とは、縦横のサイズの大きさ px を小さくすることではなくて容量を減らすことです。画像処理するソフトに付いていると思いますが、画質や品質の調整の項目があれば(%表示で載ってる場合が多い)そこを悪い方向に設定変更してみて下さい。

因みにJTrimやXnViewで画像処理を行う場合どこで操作するのかを簡単に書いておきます。

JTrimの場合

JTrimの場合は

メニューのイメージをクリックすると上図の様なドロップダウンメニューが現われます。画像のサイズは「リサイズ(S)」、容量は「JPEG品質(P)」で設定します。

「リサイズ(S)」をクリックすると下図のウィンドウが開いて

画像のサイズが指定できます。下欄の「縦横の比率を保持する」にチェックが入っていれば縦横どちらかの数値さえ入れれば他方は自動で入力されます。

「JPEG品質(P)」をクリックすると

画像の品質(容量)を指定するウィンドウが開きます。私は60に指定しています。私は風景などの画像は1200×800pxにしていますが、品質を60ぐらいにしておくと複雑な画像でも200KB以下に収まってくれます。このJTrimではファイルサイズでも指定できます。この設定は一度やっておくと次からも引き継がれます。

XnViewの場合

画像を選択してアプリ内でフル画面表示させておきます。

画像のサイズを変更する場合は

メニューの「画像(I)」→「リサイズ」と辿って

サイズ変更ウィンドウで画像のサイズが指定できます。下欄の「固定縦横率」にチェックが入っていれば縦横どちらかの数値さえ入れれば他方は自動で入力されます。

画像の容量指定は

「ツール(T)」→「オプション(O)」と辿って

「読み込み/書き込み」→「書き込み」→「JPEG」の画質の数値を変更します。私は55に指定しています。私は風景などの画像は1200×800pxにしていて、画質を55にしていると複雑な画像でも200KB以下に収める事が出来ます。

画像の容量変更は「ファイル名を付けて保存(A)」のウィンドウでも出来ます。

メニューの「ファイル(F)」→「ファイル名を付けて保存(A)」と辿って

「画像ファイルを保存」のウィンドウの オプション ボタンをクリックする事によって同じ画質設定ウィンドウが開きます。この設定は一度やっておくと記憶されます。

スポンサーサイト



Comments 13

There are no comments yet.

Kねこ  

一枚目は全て読み終わるころにやっと開き切りました^^;
最後の写真はこのままでは判りづらいですが
タブを開くと一目瞭然ですね!
とても判りやすい比較だと思いました^^
自分の記事の写真をもう一度見直してみます。

2019/10/05 (Sat) 23:03 | 再編集 | 返信を書く |   
hige

hige  

To Kねこさん

 体験できてますか。良かったです。
 連絡ありがとうございます。
 私のパソコンではパッと表示されてしまうので、やっぱキャッシュの影響ですかね。

2019/10/06 (Sun) 10:07 | 再編集 | 返信を書く |   

bodai_ju  

画像の大きさと容量

私はスマホは持っていませんので(IT縄文人です)専らパソコンを使っています。
まだまだ勉強不足ですので、難しいことはサッパリわからないのですが、
自分のブログの画像はピクチャに保存してあるものを400px×300pxにリサイズしてアップしています。
これをもし800px×600pxにした場合、ブログにアップした画像は大きくなるのでしょうか。
画像だけ大きくなっても見にくいので400px×300pxくらいが丁度いいかなと思っています。

あなた様の文章の中の「容量の圧縮」ということが今の私の知識ではよくわかりません(笑)。
これからもいろいろ勉強させてもらいます。
よろしくお願いいたします。

2019/10/06 (Sun) 14:15 | 再編集 | 返信を書く |   
hige

hige  

To bodai_juさん

 bodai_juさんのブログはスマホでも適切に表示されていますよ。所謂レスポンシブなテンプレート(デザイン)になっています。又スマホ対応の設定にもされてますね。

 画像が表示される大きさは、 bodai_juさんのテンプレートでは記事内では横幅の最大が768px以上にならない様にテンプレート側ですでに設計されています。横幅はいくら大きくても記事内ではこれより大きくはなりません。私のブログでは820pxです。
 画像をクリックした時にはファイルアップロード(FC2記事を書く時に登録)した時の画像が表示されます。
 因みに私がこの何年かカメラで撮った画像は、殆どが長辺1200pxです。

 この記事の1枚目の画像をクリックしていただければ、私がアップロードした時の大きさの画像がみれます。別タブで表示された画像は多分画面に収まっていると思いますが、その時にはもう一度クリックしていただけると更に大きな画像が現われて画面に収まりきれないと思います。
 それでも記事内ではちゃんと記事幅に収まっています。
 次に https://blog-imgs-127.fc2.com/b/l/g/blgid1974/20190601902.gif の様にブラウザの右端からブログを表示させながらブラウザを狭めていって下さい。私のブログでも、bodai_juさんのブログでも記事の文字は狭められていく幅に応じて、文字が自動的に折り返されていくと思います。その時画像はどうなっていきますか?
 画像も自動的に縮小されていきませんか?
 これがレスポンシブというデザインの強みです。スマホだけではなくてあらゆるサイズのタブレットにも記事の内容が切れたり、隠れたりせずに全部が適切に表示されます。

 画像の容量とはある画像が、メモリの容量をどれだけ使っているかということを指します。画像のサイズを小さくすれば当然容量も小さくなりますが、このほかに一般に使用されている画像の殆どは、圧縮という技術を使って人間に気づきにくい範囲をごまかして表示をし、メモリの容量を減らしています。
 当記事の2枚目から後の画像はすべて1200px:800pxですが、それぞれ記事に書いている通り990KB、104KB、49KB の容量に細工したものです。その結果どうなるのか記事中の事をお試しください。

 あと画像の容量は記事に画像を張り付けるときのファイルアップロードの画面に出てます。
 https://blog-imgs-132.fc2.com/b/l/g/blgid1974/20191006901.jpg
 を、見ていただくと過去にアップロードした画像の容量とサイズは確認できます。この容量が変更できるという話です。
 
 宜しく。

2019/10/06 (Sun) 16:18 | 再編集 | 返信を書く |   

柴犬マイア  

画像の大きさ

今まで私はMicrosoft dffice Picture Managerで150~300KBにして写真を上げますが、それでよろしいですか?

2019/10/06 (Sun) 18:46 | 返信を書く |   
hige

hige  

To 柴犬マイアさん

 ご使用されるソフトはなんでもいいんですが300KBは大きいかもです。もっと圧縮して下さい。
 画像の品質を落とした方が!良いかもしれません。

 記事の載せた画像の品質に納得した上で掲載して下さい。

 いくら軽量でも自分が納得できなければ無意味です。

2019/10/06 (Sun) 19:28 | 再編集 | 返信を書く |   

-  

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2019/10/12 (Sat) 19:22 | 返信を書く |   

ひまわり  

画像について

~~~ヾ(^∇^)おはよー♪ございます。
画像の容量についてはあまり意識したことはなく、
サイズを小さくすれば容量も自ずと小さくなる
という程度で、庭の花を中心に撮ってきました。
最近、スマホで撮ったものをupするようになり
少し気になってきたところです。
二つの画像を並べて表示することは可能でしょうか?
あるいは、縦長の画像の横の空白部分に文字を
入れることは難しいのでしょうか?
FC2で見かけることはないのですが。

2019/10/14 (Mon) 09:49 | 再編集 | 返信を書く |   
hige

hige  

To ひまわりさん

 画像のテクニックの話ですね。二つの画像を横並びにするのは
 https://blgid1974.blog.fc2.com/blog-entry-1505.html
 こんな感じでいいでしょうか。

 画像の横に文字を入れるのはこんな記事で使ってます。
 https://blgid1974.blog.fc2.com/blog-entry-98.html

 何れも我流なので、細かい部分では正解なやり方ではないかも知れません。
 ググっていただくと色々適切な情報が得られると思います。Akira氏も幾つか記事を書かれておられます。私も過去記事で書いてるかも知れません。
 ここでは書き切れませんので記事にしてみますが、以上の点をお含み置き下さい。

 どちらにしろ記事編集は
 1.旧記事編集画面
 2.高機能テキストエディタOFF
 3.改行の扱いをHTMLタグのみ
 の設定でやって戴くことになります。この辺は使用されたことがありますか?

 あと、テンプレでCSSへの追加が必要になります(コピペするだけですが)。又記事もHTMLで書くことになります。その辺は大丈夫でしょうか。

2019/10/14 (Mon) 12:11 | 再編集 | 返信を書く |   

ひまわり  

難しそう!

いつになるか分かりませんが、
画像を並べることに挑戦したいと思います。
ヤフーで時々画像を左右に配置して楽しんで
いましたが、他のパソコンやスマホからは
どう見えていたのだろうかと気になる
ようになりました。有難うございました。

2019/10/14 (Mon) 14:42 | 再編集 | 返信を書く |   
hige

hige  

To ひまわりさん

ごめんなさい。
もうちょっと待って下さいね。
多分ひまわりさんにはすこしハードルをあげて戴けねばならないかもしれません。

どういう風に書けばいいのか試行錯誤中でなかなか記事にできません。

私の記事の前に同じようなことをAkira氏がブログに書かれてます。
https://vanillaice000.blog.fc2.com/blog-entry-952.html
こちらも参考にされて下さい。

2019/10/15 (Tue) 23:47 | 再編集 | 返信を書く |   
hige

hige  

To ひまわりさん

二つの画像を横並びにする方法を書いてみました。
ご参考に。

2019/10/17 (Thu) 17:53 | 再編集 | 返信を書く |   

-  

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2019/10/17 (Thu) 19:15 | 返信を書く |   

Leave a reply
コメントをどうぞ

 お名前とか
 ブログやホームページのURLをどうぞ

パスワードを入力すると投稿後、訂正・削除が出来ます