TOP ブログの基本 アフィリエイト アクセスアップ カスタマイズ ブログ・HTML ブログ・CSS




ハイサイ(ようこそ)利爺のブログへ


●ブログの基本、アフィリエイト、HTML・CSSまで
初めての方にも分かり易いように下記のシリーズで纏めています。

・・・・・・・・・・・・・・・・ 各章の項目(目次) ・・・・・・・・・・・・・・・
= 現在、シリーズ記事を書いているブロックです。

エントリー順に確認できるように【目次】を作ってありますので
上段のコンテンツバー(menu)または上記の項目から各ブロックに入れます。


●本文中に表示しているアイコンは
= 参照記事  = 頁中の章  = 注釈  = 記事ブロック
を表します。

2010年01月02日

画像を加工・圧縮して上手に使う

■ 5-13 画像をうまく使う基本


●ネット上の数多くのサイトは、画像を使って構成しているのが大方ですね。

●画像の使い方が上手なサイトや、少し工夫したら、素晴らしいレイアウトになるのにと思うブログ、
またページが重たく、表示するまでの時間がかかるサイトもあります。

訪問した方に、画像を上手く使って、興味を持続させることも大切ですが
データを軽くして、表示するまでの時間を短くすることも重要な課題です。

■サイトで使用する画像容量を軽くすることの意義。

現在は光ケーブルやADSLなど通信環境が整って、大容量のデータも瞬時に送れる時代ですが、そのような時代でもブログやホームページなどのサイトの課題はデータを軽くすることが重要な案件となっています。

ブログの容量を大きく使うのは、記事より画像類ですので、
その画像の使い方が「ブログの良し悪し」を決めると言っても良いでしょう。

データを軽くすることは

●ブログサービスにアップロードする画像類が軽いため、多くの画像を保存することが可能。
●データが軽いためサイトのビジュアル化のための画像が十分に使える。
●画像を多く使ったサイトでも、データが軽い分読み込みの速度が速い。
●訪問した方(ユーザー)にとっても、快適なウエブ操作になる。

が基本的で一般的な考え方です。


このブログでは加工・修正用として
画像ソフト(グラフィックソフト)としてadobeの「Photoshop」(フォトショップ)を使用しています。
「Photoshop」は画像処理に特化し、デザイン会社や印刷業界では無くてはならない業務上での、必要なソフトの一つです。

最近ではこのソフトに匹敵するくらい、機能が充実した「無料で使える」ソフトが数多くあります。

ブログやホームページで使う画像は
それら無料ソフトで十分に対応が出来ますので、手元にない方は取得して手持ちにして下さい。



■圧縮ファイルを作り、ブログで使用するまでの具体的な流れ
  
●画像の説明で分かりやすいように、使う用語を決めておきます。


【用語】

親画像  
子画像  
圧縮画像
横サイズ

保存形式






= デジカメやスキャニングで取り込んだ原画。
= 親画像をトリミングした画像(圧縮なし)。
= 子画像を圧縮形式で保存した画像。
= このブログは横700pxの3カラムの設定です。
   記事表示領域幅は横400px。 
= 写真類の保存を得意としたjpeg形式。
  イラスト類のgif形式がありますが、
  写真画像ですのでjpeg形式を使います。
 

次の順番で確認していきましょう。

@画像加工用ソフトの立ち上げ。
 ↓
A使用する親画像を読み込む。
 ↓
Bブログに掲載する理想的なトリミングを行う。


【例1:無加工の親画像】
oya001.jpg

デジカメ画像やスキャニングした画像をPCに取り込み、その中から
ブログで使用する「親画像」を専用ソフトに読み込みます。

どの大きさの画像を使うかは、レイアウトによって決めますが、
毎回異なったサイズで表示することは、基本レイアウトを崩してしまいますので、
使用サイズには一定の基準を設けておきましょう。


画像の必要な部分を切り取り
読者に注目させるように加工して、画像を作り上げることを「トリミング」と言いますね。

トリミングを行い、使用する画像を作成します。

【例2:トリミングした子画像】
moto-a.jpg

【子画像の容量】
motoga01.jpg

【子画像の画素数】           【jpeg圧縮】
motopx02.jpgasyuku01.JPG

Cトリミングした画像を、jpeg形式で圧縮する。
  ↓
D親画像や子画像とは「別名」で保存する。

この例での「子画像」は、切り取り後の画素数が(1000×339px)になっています。

一旦、その子画像を「jpeg」高圧縮(1〜2)をして
親画像や子画像とは「別のファイル名」で保存します。

「Photoshop」の圧縮率は

1,2
3,4,5
6,7   
8,9,10
 
= 低画質(高圧縮率)
= 標準
= 高画質
= 最高画質(低圧縮率)

の10段階から選択できます。ほかのソフトも同じだと思います。

jpegの圧縮保存は、
「不可逆圧縮方式」
の保存になっていますので、圧縮化した画像は元に戻せません。

作成や使用に失敗したとき、別の目的で親画像を再び使用する場合があります。
その保守のため親画像や子画像は残しておきます。

子画像や圧縮画像は、全て上書き保存をしないで別のファイル名で保存します。

それだけは必ず守って下さい。

圧縮画像の実例を確認しましょう。

【例3:圧縮した画像】
chen-a.jpg

【圧縮した画像の容量】
chen-apr.JPG

「例2」の圧縮前の子画像は1.04MB(1,096,500バイト)

「例3」の圧縮後のサイズは1.75KB(20,480バイト)

圧縮画像は
子画像の「 0.019(1.9%) 」に減っています。
 
この様に、
一般的には、圧縮前の画像の2〜10%位の容量に減ります。

子画像を1枚使うデータ容量分で、
圧縮した画像を50枚くらい使えるということですね。

圧縮して使うということはブログサービスの「Seesaaブログ」の

●保存画像容量として認めている「100MB」内に十分に画像類がアップロードでき、使用できる。
●データが軽い分、ページの読み込みが速い。

という利点があります。

しかし、そのような利点の逆方向には

●「密で細かな」表示は出来ないという欠点があります。

圧縮とは
上下左右から画像を押し潰すのではなく
画像を構成している画素(px)を圧縮の比率で抜いて、軽くすることです。

画素を抜かれてスカスカになった画像は、
抜く前の画素密度の濃い画像に比べたら、データ容量は軽くなりますが、画像そのものの切れ(シャープ)や色味の鮮やかさが失われます。

 ●画像を軽くしたら、画質が悪くなり、
    画質を上げれば、データが重くなる。


ネットやPCでの画像を取り扱う時の相反する問題点です。


子画像と圧縮画像を比較してみます。

左が子画像、右がjpeg 圧縮画像です。

【例4:子画像】          【例5:圧縮画像】
motoa01.jpgchena01.jpg

子画像(例4)が、
「花びら」の色味や「おしべ」などの明暗を細かく表示しているのに対して

圧縮画像(例5)は
全体的にぼやけた表示になっています。

芸術作品・画像を中心としたブログでなければ
例のような圧縮画像は、気にするほどに劣化している画像ではないと思いますので
アフィリエイトの商品案内やブログのポイント画像には十分に対応できます。

この「例5」の画像は、最高圧縮率(圧縮率1)で作成していますので、
もう少し明瞭にそしてシャープに表示したい場合には

圧縮率を変えた画像にして使用します。


Eブログサービスのサーバーにアップロード。

圧縮した画像を
ブログサービスのサーバーにアップロードです。



F記事の中に画像url(imgタグ)を貼り付ける。

画像のurl(imgタグ)を記事欄に貼り込みます。

更新する毎に、表示する画像のサイズが異なると、統一性に欠けたレイアウトなってしまいます。
ブログのページ、ブログの全体的なレイアウトを考えた、自分なりの基準サイズを設け見栄えを高める工夫をしましょう。

該当する画像のurl(imgタグ)をクリックで入力します。

仮にアップロードした画像が
「横サイズ 500px × 縦サイズ 400px」
の画像でしたら

<img src="http://…画像url… width="500" height="400" border="0" />

のようなHTMLの形式になりますね。

前述したように
この利爺のブログでの記事表示枠の「横幅は400px」ですので
画像サイズの500pxは大きくて記事枠からはみ出しますね。

「横幅400px」の記事表示枠一杯の画像をフルに使うとしても

アップロードした画像を

 「アップロード画像」 ⇒  横500px × 縦400px 
    ↓
 「ブログ・表示画像」 ⇒  横400px × 縦「?」px 

の横400pxのサイズに変更する必要があります。

縦「?」pxの大きさは

「横500px」から「横400px」に縮小する比率(縮小率)が分かれば
相似形の縮小ですから簡単に計算できますね。


画像相似形の計算
  @横サイズ相似比率  400 /(割る)500=0.8
   ⇒ 表示サイズ400pxは、画像サイズ500pxの80%(0.8)
 
  Aこの相似比率で 
   縦のサイズ「?」を計算します。

   ⇒ 縦の400px ×(かける)80%=320px

    ?=320px


この数字を、画像表示の< img >タグに

<img src="http://…画像url… width="400" height="320" border="0" />

入力して img タグ修正します。

ブログには 横400px 縦320px の画像が表示されます。

    注
   ●説明のため横幅「400px」一杯の画像にしていますが、
    一般的にブログの記事表示幅は左右の内側に半角または
    全角(1文字)分くらいの余白が出来るように設定され
    ています。
   
   ●左右から1文字くらいの余白が取れる大きさで、表示する
    画像の大きさを計算したほうが表示した時の見栄えもいい
    でしょう。表示エラーにもなりません。
    ■ 横400px → 388px位

   ●フルサイズあるいは表示域を超えるサイズで表示した時
    ブログの横サイドが下段に追い出される「カラム落ち」の
    原因になる恐れもありますので注意しましょう。


上記した画像のサイズ確認では
「縮小サイズ」しか確認していませんが「拡大」も同じ方法ですね。

しかし、小さいサイズから大きいサイズにしてしまうと

画素の理屈どおり
ボケてしまいますので、画像の使い方としては「間違った使い方」になります。


画像の理想的な使い方としては

●アップロードする画像は表示するサイズより大きく。
●表示する時に縮小して用いる。


が基本になります。

大きいサイズと言っても、モニター一杯の大きいサイズの画像をアップロードすることは無いでしょう。
大きくて表示サイズの1.5〜2倍のサイズですね。




▲HTMLの関連記事
   holder01.gif ブログで使うHTML-目次ー
    http://tosiji-dreamafi.seesaa.net/article/133635358.html

★ご協力お願いいたします★   
      kame.jpg
    banner_01.gif
……人気ブログランキング……



>
この記事へのコメント
ハイサイ!
利爺さん
また遊びにきました。
撮影した画像はトリミングして
工夫するんですね^^
勉強になりました。
応援です。

コメレス
応援、コメントいただき
ありがとうございました。
Posted by hebaseijin at 2010年01月02日 16:12
今晩は。文三です!

明けましておめでとうございます☆
今年もよろしくお願い致します !

利爺さん!
張り切ってますネー☆

毎回ホントに
頭が下がります。

ここまで丁寧な解説記事。
相当時間がかかるんでしょうネ。

今年も
利爺さんにとって
明るい実りある年となりますように。

役に立つ
貴重な情報をいつもありがとうございます!

気合いをこめて本気の応援!
Posted by やるんです!幸福を呼ぶ☆本気のブログ・アフィリエイト at 2010年01月03日 19:53
初めまして。キャプテン★と申します。

僕も職業柄「PhotoShop」使います。
最近は、デザインを直接やらなくなったので、触らなくなりましたが。。。

丁寧な説明で、とても親切な
ブログですね。

サイトが重いと訪問者が逃げてしまいますから、軽くする工夫は、大事ですよね。

応援♪
Posted by 速収講座だよ★キャプテン at 2010年01月06日 03:05
利さん、
倭人です。

ご丁寧で心温まる
お誕生日メッセージ、
ホント、いつも励みになります。


とうとう知らないうちに
還暦になっちまいました(泣


年金受給手続きもそろそろですが
昨年の前半なんて
まだひとごとだったんですよーw


まあ、老骨に鞭打ってw
(何て言うと利さんに叱られそうw)
これからも頑張りまっすので
応援、よろしくです。


圧縮画像と子画像、
確かに見た目での違いはありますね。

でも、比較して掲載ではないので、
使えるってことですね。
重いサイトはイライラしますよね。

いつも、勉強になります。

応援!
Posted by 倭人 中高年ブログで稼ぐアフィリ大百科 at 2010年01月08日 12:02
ハイサイ、利爺さん!

こんばんは、ありすです。
いつも応援ありがとうございます☆

私もphotoshopで写真のデータいじりをやっているのですが、普段何気なくやっている作業も文章にするとこんな感じになるんですね。

しかも、利爺さんの説明はとても分かりやすく、その文章力・表現力欲しいと思ってしまいました(笑)

これからもどんどん写真のアップを行おうと思います♪


今年の冬は雪が吹雪いて鳥取砂丘はエライ(大変な)ことになっていたようですが、魚やカニは最高に美味しいです!是非、機会があれば訪れてみてくださいね。あと、温泉もいい感じです。

ブログ文字が、すごく読みやすい大きさになっているということで、すごく安心しました。
次は、時間を作ってサイドの文字を調整しようと思います。

利爺さんの「文字の大きさ、小ささの話」ブログ楽しみにしてます♪
応援ぽち☆
Posted by 超初心者ありすの稼ぐアフィリエイト戦略 at 2010年01月09日 04:24
ハイサイ、利爺さん。
ありすです。

いつも温かいお言葉を本当にありがとうございます。

サイドバーの文字の大きさについて、解決致しました☆しかし、文字を大きくすると、見栄えのバランスが悪くなってしまうので、サイドバーの幅を加工できる程、腕を磨きましたらチャレンジしたいと思います♪

そして、サイドバーに利爺さんオススメの「メールフォーム」設置しました。アドバイスを本当にありがとうございました!!
応援ぽちです☆
Posted by 超初心者ありすの稼ぐアフィリエイト戦略 at 2010年01月13日 00:17
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。