美しい画像の作成方法/データ単位と画像の重さについて | Bygones/ 顔に泥がついている育児ブログ+css*

美しい画像の作成方法/データ単位と画像の重さについて

「妊婦の最適な服装は全裸」 という記事を書きかけで用意してあるのですが、思い立ってこちらを先に書きます。


Richard won30歳のブログ 新しいテーマです ブログ画像について 

興味のある方お付き合い願います。




 


あああ今日は仕事なんですが・・・別にやることないけどここには居ないとだめなんですが・・・(会社内のPCのメンテとかやってるくらい暇)

りんを幼稚園夏期特別保育に預けてきました。パパも休みだったんだけど、パパもちょっと用事があって。


はなれたくないのに・・・はなれたくないのに・・・とまだまだ思う自分。

幼稚園前の保育園でアレだけはなれていたっていうのに、全然慣れない。


すっごくりんが嫌そうだったのが気になって気になってしかたありません。







さて、解説系の記事は他にもいくつかあるわけですがこれまでにしていなかった画像の話です。

CSS編集等についてはこちらからどうぞ。


例えばですね、私が画像をここにアップする時、次のようにやります。


①画像をデスクトップに置く(大抵それらは1M~2Mという重いデータ)

②何らかのソフトで画像を小さくする

③(素人ながらそれなりに画像編集する)

④画像フォルダにアップロードし、記事編集画面に呼び出す


この、①と②についての解説です。



これは、下手なソフトを使わなくても、元々PCに入っているような簡単なソフトで可能です。

windowsの場合、スタート>全てのプログラム>アクセサリ>ペイント で開けるペイントというソフトで十分。


私はこれに加えて影を入れたり、文字をもう少しいじくったり、光の加減を変えたりドット数を減らしたりしているので、

photoshop 7.0 というソフトを使っています。神が私にくださったものです(ので、買ってない。買うと恐ろしいお値段となります)。



でも、本当に最初はペイントだけでいろいろやっていました。結構できちゃうんです。


一番簡単に画像を小さくする方法をお教えします。まず、ペイントを立ち上げて【ファイル】から使いたい画像を呼び出してください。









かなりでかいまま表示されますので、適当に見計らって縮尺のパーセンテージを変更します。






【変形】>【縮尺と傾き】を選択。






元々の大きさを100として考え、【伸縮】欄に適当な数字を入れます。なんどか数字を入れてみて、だめだと思ったら

【編集】>【元に戻す】で元通りに戻ります。これでいいやと思うものを保存すればいいのです。

私はでかめに設定して、その後好きなところだけ切り取るのが好きです。結果的に、一部が拡大されるのね。




そして保存するのですが、ここからです。


大抵の写真ファイルは JPG というファイル形式で保存されます。ご自身の写真を左クリックして「プロパティ」を見ると、

拡張子が .jpg になっていると思います。





JPG はお勧めできません。





世界で一番どこにでも通用する画像ファイル形式と言ってもいいのですが、やはりそれだけあってそれだけのもの。

とても軽く画像を保存することはできますが、軽いということは軽くされているだけあるのです。


必ず画像は荒れます。



私がお勧めするのは PNG という画像ファイル形式で、これでもアメブロ画像フォルダに保存できます。

ただし、JPG のように軽くはありません。でもね、アメブロのフォルダの許容量って相当なものですから

(あたし2年やっててPNGばっかりでまだ15%未満の使用率だもん。使ってない画像消してもいないのに)

フォルダについて心配するのは6~10年後でいいと思います。


画像を見れば一発でどちらがいいかわかるからです。特に文字入れをすると顕著です。


見てみてください。



JPG





特に文字まわりご確認ください。後ね、輪郭が弱いから、花びらのまわり。点々になっちゃってます。

これはイラストだともっとよくわかるもので、「画像の汚れ」等の表現をされることがあります。



次、PNG。




線がくっきり出ていると思うのですが、いかがでしょうか。


もっとはっきりわかるのがね、文字だけとか。これ↓は JPG です。(この記事にあるほかの説明用画像はPNG)





ね、汚れるべ。





このくらいどおってことねえ、と思われる方も多いかもしれない。であれば、以下の保存の仕方はスルーで結構です。

結構いろんなブログで画像をアップされているのですが、特に表情とか、遠くの景色の線とかつぶれちゃってるのが

なんかあたしもったいなくかんじちゃって。あと、イラスト。

(既に書いたように、イラストには特に黒い点々が発生します。)


画像編集 というワードで検索されてここにたどり着く方々もいらっしゃるので、一応・・・。





たしかに大きく表示はできなくなります。アメブロは500KB以上の画像をアップできないからです。

(これもとっとと改善してほしいよね。いつかはなると思います。前はもっとちっちゃかったような気もする)


どっちを取るかはあなた次第。




【データの重さについて】


このデータ単位ですが、mとkmの関係と同じです。

1GB(ギガバイト)=1,000MB(メガバイト)=1,000,000KB(キロバイト)=1,000,000,000B(バイト)


1MB=1,000KB ということになります。

大抵、最近の・・・ここ3年あたりということになりますが、デジカメは1枚の写真が1MB~2MBとなっています。

もちろん設定でいくらでも変更できるのですが、一般のサーヴィス・サイズに現像する場合にはやはり1MBは欲しいと思う。

で、やはりそうなるとそれをそのままアメブロにはアップできないわけです。しかもjpgで1Mって、そのままPNGにすると

もっと重くなってしまう。

ですので、大体メインコラム欄(記事欄)にオリジナルサイズで入るサイズに変更するための作業がこれなわけです。

それがどのくらいの大きさなのかは、みなさんがブログを2カラムにしているか3カラムにしているかによります。

私は2カラムにしている上に、ブログの横幅自体を画像を大きく貼りたいが為に広げています。(そうなのよ)


 【CSS編集】ブログ横幅を変更する


でも、とりあえず元のデータが丁度1Mであるならば、その40%以下程度を考えてください。2Mなら20%。

小さくなってしまってちょっと残念だなあと思うのならば、この下のほうに書きましたが、拡大して見せたいところを残して他は切って

しまうべきです。せっかくちょっとでもデータで写真を触っているのだから、是非やってみてほしいな~





PNGでの保存の仕方はこうです。



【ファイル】>【名前をつけて保存】




【ファイルの種類】でプルダウンさせてPNGを選択します。ここで強いてJPGにすることもできるんですけどね。





これで完了です。


私はこれまで作ってきたバナーは全てPNGで作成しています。途中で一度でもJPGで保存してしまうと、その後PNGに変更しても

その「荒れ」も美しく残ってしまうので、最初からPNGで保存する必要があります。


ファイルの大きさはファイルを開く前にアイコンを左クリックし、【プロパティ】で見ることができます。



500KBより大きくなってしまったら、私は画像の縮尺を変更するよりは周りを削って画像を小さくするとか

好きな部分だけを切り取るとか、そういうほうをお勧めします。


簡単な説明になりますが、


 画像範囲選択ボタンをクリック  → 画像範囲選択 → 右クリックで「切り取り」+「貼り付け」

 ペイントの「画像編集範囲」は(貼り付けた画像の端ではなく、編集可能範囲です。白くなってるところね。)

 画像の端にカーソルを当ててその⇔を動かすことで自由に変更できるので、縦と横を好きなところで調整

 →PNG保存 


とか。


文字入れはどうしても雑になりますが、それを以ってしても私は一番やりやすいソフトだと思っています。

携帯の画像とかもね、PCに送ってそのままアップロードすると汚れるんですよ。だから、編集画面に一度呼び出し、

PNGに保存しなおして(できれば80パーセントとかに圧縮して)アップロードすると、PCネット画面でも随分綺麗に

見ることができます。




また、JPGでも、フォトショの場合は「最高画質」あるいは「画質選択>100%」(80%以下ではあまり変わらない)

で綺麗な画像を保存することができます。もちろん、多少、場合によってはかなり重くはなります。

その分綺麗ってことなんだけど。


・・・ので、お手元のデジカメにくっついてくる「画像編集ソフト」に、そういう「画質選択」系のことが可能であるならば、

十分JPGでも綺麗です。ペイントはその画質数値で言うとほんと60%くらいなんですよ。


一旦気になると気になって仕方がない。







以上でしたv




おまけ


画像編集ソフトには無料でダウンロードできるものもあります。


Picasa


視覚効果も追加できたりしますよ。