画像サイズの仕組みを知ろう(第2回)

ブログに挿入する画像のお話し
下の7枚の画像はお助けマンの愛猫「ミルク姫」。
800万画素のデジタルカメラで撮影した1枚の写真、条件を変えて表示しています。
画像をクリックすると別画面にミルク姫が表示されます。
出てくるミルク姫の大きさに注目してください。
今回の投稿テーマは「画像サイズの仕組みを知ろう」です。画像サイズを自由自在に操るための基本テクニックを一緒に勉強しましょう。ブログ初心者は必見です。
使うブログはエキサイトブログです。画面を100%表示にすると実寸で確認できます。

【画像の挿入】
ミルク姫の画像は次の手順で挿入しました。
①マイピクチャーに新しいフォルダを作成して、デジカメから撮影したミルク姫の画像ファイルをこのフォルダに取り込む。
②像加工ソフト(Picture Manager等)で画像サイズを加工してフォルダに保存する。
③ブログの投稿ページを開いて、記事を入力する。
④画像の挿入位置を指定して画像ファイルを[アップロード]する。
⑤[プレビュー]にて確認する。
⑥必要に応じて画像サイズをソースコードで手直しする。
(②と⑥以外は皆さん日頃実行している手順です)

次にそれぞれの画像について説明します。

【画像①】
オリジナル画像ファイル(横幅3456ピクセル、ファイルサイズ2700KB)をアップロード
d0181824_14202321.jpg


【説明】
私のデジカメは800万画素です。
オリジナルの画像サイズは横3456ピクセル×縦2304ピクセル。
3456×2304=7962624個の点、すなはち約800万画素の画像です。
そして、ファイルサイズは2700KB(2.7MB)です。ファイルサイズは画素数によって変わりますし。写真の絵柄によっても変わります。
さて、画像をクリックして出てきたミルク姫の大きさは変わりましたでしょうか?
全く同じ大きさの画像が出ると思います。
その理由はオリジナル画像のファイルサイズが500KBを超えているため、自動的に縮小されますが、ブログの最大横幅が500ピクセルに設定されているので、横幅500ピクセル、縦333ピクセルに縮小されてアップロードされているからです。
クリックして出てくる画像はアップロードされた画像が表示される仕組みになっているので、納得いくと思います。
皆さんは意識せずにアップロードしていると思いますが、ほとんどの場合、オリジナル画像のファイルサイズが500KBを超えているので、画像①と同じ理屈でアップロードされていると理解してください。ファイルサイズは85KBです。
(画像のサイズを調べる方法は次回説明します)

【画像②】
ファイルサイズを491KBに縮小した画像ファイルをアップロード
d0181824_14205522.jpg

【説明】
画像加工ソフト(Picture Manager等)でオリジナル画像をアップロード可能なサイズに予め縮小してフォルダに保存し、アップロードしたものです。
アップロードした画像の大きさは横1660ピクセル、縦1107ピクセルになっています。
ブログの最大横幅が500ピクセルであるため、表示は横500ピクセル、縦333ピクセルになっています。
画像をクリックするとアップロードされた画像が表示されます。その大きさは横1660ピクセル、縦1107ピクセルです。パソコンのディスプレイの横幅は1024ピクセル~1366ピクセルですから画面からはみ出す大きさになります。
サーバーに鮮明な写真を保存するときはこのテクニックを使うとよいでしょう。
この画面の画素数は1660×1107=1837620・・約180万画素です。L版サイズの写真には、十分だと思います。
なお、ブログを閲覧するだけであれば、データーが重くなるので無用なテクニックです。

【画像③】
横幅1024ピクセル(ドキュメント大サイズ)に加工した画像ファイルをアップロード
d0181824_14212633.jpg

【説明】
ディスプレイに表示できる画像サイズに加工してアップロードしたものです。
画像の大きさは横1024ピクセル、縦683ピクセル、ファイルサイズは208KBの画像がアップロードされています。
表示は当然、横500ピクセル、縦333ピクセルの大きさになります。
画像をクリックすると横1024ピクセル、縦683ピクセルの画像になります。
小さい画像をブログに掲載し、詳細はクリックして見て貰うにはこのテクニックを使うとよいでしょう。
相談室の説明用画像はこのテクニックを使っています。

【画像④】
横幅500ピクセルに加工した画像ファイルをアップロード
d0181824_14215221.jpg

【説明】
予め画像加工ソフトで横幅500ピクセルに加工して、その画像ファイルをアップロードしたものです。
横幅500ピクセル、縦333ピクセル、ファイルサイズは69KBです。
結果的には画像①と同じ表示になります。ただし、ファイルサイズは縮小方法が違うので変わってきます。予め加工してからアップロードした方がファイルサイズが小さいようです。データー量を少しでも減らしたいときは予め画像を加工した方が良いようです。

【画像⑤】
横幅300ピクセルに加工した画像ファイルをアップロード
d0181824_14222161.jpg

【説明】
小さい画像を挿入するときは予め加工してアップロードするとよいでしょう。
横幅300ピクセル、縦199ピクセル、ファイルサイズ36KB。

【画像⑥】
横幅100ピクセルに加工した画像ファイルをアップロード
d0181824_14231026.jpg

【説明】
横幅100ピクセル、縦66ピクセル、ファイルサイズ20KB。
この大きさは写真には小さすぎますね。

【画像⑦】
画像②の表示サイズを横幅100ピクセル、縦66ピクセルにソースコードを変更
d0181824_14205522.jpg

【説明】
表示画像は横幅100ピクセル、縦66ピクセルと小さいですが、クリックすると180万画素の画像が現われます。
昔のネガフィルムのように小さな画面を沢山並べるには良い方法だと思います。
この例では画像②でアップロードした画像ファイルを表示サイズを変更したものです。
その方法は簡単です。画像のタグの表示寸法の部分を書き換えるだけです。
手順は次の通りです。
画像②のタグ([#IMAGE|d0181824_14205522.jpg|201104/09/24/|mid|1660|1107#])をコピーして貼り付けて、1660を100に、1107を66にそれぞれ書き換えるだけです。
このテクニックを使うと画像の大きさは自由自在に変えることができます。
ただし、ファイルサイズは変わりませんので、多用すると重いブログになってしまいますので注意してください。

【ソースコード】
ミルク姫の画像部分のソースコードを参考に示しておきます。
d0181824_13243489.jpg
d0181824_1744168.jpg


今日はここ迄、
次回は画像の加工や画像サイズの調べ方など勉強します。

by pc-otasukeman | 2011-04-12 13:52 | Comments(2)

Commented by banban0501 at 2011-04-12 17:48
画像のついて いろいろ教えていただけて感謝です

そこで 普段から疑問におもっていることがあります

①エキサイトにアップロードされた写真の
プロパティをみると
プロトコルという部分があるのですが
これは どういう意味ですか?

②形式が違うというので アップロードできない
 GIFやJPGでない形式というのは どんなものですか?
 また そういうものを JPEGにする方法も
 よかったら 教えてください
Commented by パソコンお助けマン at 2011-04-12 22:29 x
★ banban0501 さん
プロtコルとは通信手順という意味です。パソコンとサーバーの間でどのような手順でやり取りを行うかということを規定するものです。
画像ファイルのやり取りはHTTP(HyperText Transfer Protocol)という手順を使っているということです。

ビットマップ、PNG、TIFF等があります。
形式を変換するソフトがあります。
ペイントでも変換できますよ。私はペイントソフトで画像を加工した後、保存するときにファイルの種類をJPEGに指定しています。
名前
URL
削除用パスワード

<< 画像サイズの仕組みを知ろう(第...    画像サイズの仕組みを知ろう >>