ブログに貼り付ける画像を小さくして、表示スピード早くする方法(1)。 - Webのるて

スポンサーサイト

スポンサーリンク
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ブログに貼り付ける画像を小さくして、表示スピード早くする方法(1)。

スポンサーリンク

Googleさんから、ページの読み込み時間の改善を勧められた



L1070201
Copyright © 2009;L1070201 by bettinacat, on Flickr


これまで何気なく記事の中に画像を貼り付けていたが、ある日Google Adsenseの
スコアカードを見ていたら、【サイトの状況】欄の【ページの読み込み時間のパフォーマンス 】
に黄色いビックリマークガ付いていた。

adsense1.png

詳しく見ると、

サイトのパフォーマンスを改善すると、ユーザーにとっての利便性の向上や
トラフィックの増加につながります。

ということで、分析したページが表示されてある。
さらに、分析したページを追いかけていくと、

【Optimize images】(画像の最適化)
Properly formatting and compressing images can save many bytes of data.
(画像形式と圧縮を適切に行うことで、データ容量を節約できる。)

にたどりついた。

これは、記事の中で使っているスクリーンショットや、写真などのサイズを調整して
容量を小さくした方が良いというアドバイスであろうと解釈した。

文字の多いスクリーンショットのサイズを調整してみる


例えば、次のようなスクリーンショットを筆者は良く使う。
test.png

これを表示するときには、

<img src="xxxxxxx.png" alt="image-name" border="0" width="500" height="334" />


という具合に記述するが、元の画像は(横:729pixel×縦:486pixel)なので
表示するときにブラウザ上で(500×334)に縮小することになり、それに要する時間だけ
表示速度が遅くなる可能性があるだろう。(どれだけ遅くなるかは不明だが)。

であれば、最初から画像の縦横サイズはページに合わせて縮小しておいたほうが
よいだろう。

そう考えた。
とてもシンプルな発想であり、すぐに対応できるはずだったが、筆者は見事に
画像縮小の落とし穴にはまってしまった。

画像を、品質を落とさず、きれいに縮小する方法1


FC2ブログには便利な機能が付いている。
ブログの管理画面→ツールを選ぶと、画像縮小というメニューがあるのだ。

FC2.png

これを選ぶと、FC2画像縮小というメニューが出てきて

fc2-2.png

ファイルを選び、横幅を指定し実行すると

FC2-3.png

縮小が完了し、ダウンロードメニューが出てくる。
ここで、赤枠で囲ったファイル情報を見て驚いた。
画像の幅と高さは確かに小さくなっているが、ファイルサイズは逆に大きく
なっているではないか。しかも3倍以上。

これでは意味が無い。ファイルサイズも当然小さくなると思い込んでしまったのが
誤りであった。

しかも、出来上がった画像をダウンロードして見てみると、文字がぼけている。
拡大してみると、こんな感じ。

FC2-4.png

ちなみに、元の画像はこう。

FC2-5.png

これは明らかに元の画像のほうが良い。ファイル容量的にも、品質的にもである。
どうして、こんなことになるのだ。FC2さんには申し訳ないが、性能が悪いのではないか?
と思い、Windows標準のペイントツールや他のフリーソフト(縮小専科、縮小専用、Winshot、
SnapCrabなど)評判のよさそうな縮小ソフトを片っ端から調べ、Photoshopでも頑張ってみたが
結果は変わらなかった。

冷静に考えてみれば、当然のことなのだ。
画像サイズを縮小するということは、文字を構成しているピクセルの欠落が生じるということだ。
→その欠落を補完するために、変換ソフトは欠落部分に中間色を配置して補う。
→それが色情報を増やす結果になる。
→その結果、ファイルサイズが大きくなる。

画像を縮小すると、品質が悪い上にファイルサイズが大きくなるという
望んでいない結果を得て、筆者は丸一日悩んだ。

画像を、品質を落とさず、きれいに縮小する方法2


画像の縦横サイズを小さくする方法は、文字を画像としてではなくfontあるいは
ベクトルとして扱わない限り、品質の劣化と容量の増加は避けられないという結論
に達したので、次にちょっと考えたのがOCR機能つきの画像変換ソフトなどという
ものだった。

要するに、文字をfont化してくれれば問題はないのだ。例えばWebページをスクリーン
ショットする場合なら、Adobe Reader Xのスナップショット機能を使えば、文字を
フォント化してPDFファイルに落としてくれる。

同じようなことがWebではなくWindows画面のスクリーンショットで実現できないかと
期待したのだがOCR機能つきスクリーンショットのようなものは、見つからなかった。

逡巡すること、ややしばらく。
昨日ネットを徘徊していたら、 TinyPng.org というサイトに出会った。

ここは、PNGファイルを圧縮してくれるサイトである。
サイトを開くと、このような画面が現れる。
tinypng1.png

ここに、圧縮したいPNGファイルをドラッグ&ドロップすると圧縮が始まって
tinypng2.png

のような画面になる。

試したのは、最初に縮小テストした【プログラムの追加と削除】画面だが
圧縮率58%で、ファイル容量は、37.3Kから15.5kに圧縮されている。

しかも画質は全く落ちておらず、文字も鮮明である。
そこで、こちらの方法を採用して、画像の最適化を図ることにした。

次回は、JPEGファイルの縮小について報告しよう。

関連記事:ブログに貼り付ける画像を小さくして、表示スピード早くする方法(2)。

スポンサーリンク

スポンサーリンク

Related Posts Plugin for WordPress, Blogger...
コメント
非公開コメント

トラックバック

http://nemurusyura.blog46.fc2.com/tb.php/187-81e5b0a8

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。