縮小時に写真のクオリティを保持させたい

category-icon

 こんにちは。この頃のエントリーは、アップデート情報ばかりなので、たまには別の話題でも。コメントで画質のことに触れられていたので。

 ppBlogでは、ひとつの記事にいくらでも画像を貼り付けることが出来ます。その際に、サイズの大きな画像(デジカメで撮った写真など)は、アップロード時のオプション指定にもよりますが、そのままの大きさでアップロードして保存された後(これはPIXディレクトリへ)、この大きさでは表示するのに大きすぎる場合には、予め指定された大きさ(初期値は350ピクセル)に縮小され、これはPIX/s2ディレクトリへ保存されます。

 記事中に表示されるデジカメの写真などは、最初はこのPIX/s2ディレクトリにある縮小された写真が表示されている場合が多いかと思います。そして、それをクリックすると、PIXディレクトリにある元の大きさの画像を表示するという流れになっています。

 一昔前は、(コンパクト)デジカメの写真一枚のファイルサイズは、せいぜい1MB(メガバイト)程度だったんですが、この頃は、画素数の増大に伴い、3-4MBを超えることも珍しくありません。ppBlogでは、3-4MB程度のファイルサイズでもアップロード可能な処置を入れていますが、これを頻発させるとサーバーに負担をかけうるので、予めお使いのパソコンで写真のファイルサイズを小さくしてアップロードすべきでしょう。個人的には、フリーのソフトである「縮小専用。Link 」を使っています。一括処理も出来て重宝しています。Vistaであれば、標準でついているWindowsフォトギャラリーにある「修正」で、適当に修正を施した後、それを閉じれば自動的に修正されたもので上書き保存されますが、これでもそれなりにファイルサイズが小さくなります(縦横サイズはそのままで、例えば3.49MBが1.2MBになったりとか。まぁ、これでもまだアップロードするには大きいんですが)。

 さて、ここからが本題ですが、もともとファイルサイズが大きい写真をリサイズなどをしてファイルサイズを落とすと、当然ながら写真のクオリティーは低下します。更に、それをppBlogを介してサーバーにアップロードすると、そこで更にリサイズされて、画質が低下することになります。気になる方には気になる部分でしょう。

 ppBlogでは、画像のリサイズは、utils_admin.phpにあるcreate_thumbnail()関数(462行目あたり)が担っています。その中に、

  case 2 : ImageJPEG($img_out, $output); break;
という行(500行目あたり)がありますが、これはJPEG画像を出力する関数です。実は、この関数の第三引数(ひきすう)に、出力する画像の品質を指定できます。

quality はオプションであり、0(品質は最低 ですが、ファイルはより小さい)から100(品質は最高ですが、ファイルは 最大)の範囲で指定します。デフォルトは IJG 品質値(75)です。

引用元: PHP: imagejpeg - ManualLink

 現状、ppBlogでは、この部分の指定はしていないので、初期値である75というクオリティーで保存されていることになります。じゃ、他の値ではどうなるのかな?という疑問が出てきます。なので、簡単に調べてみました。Vistaに初めから付いているサンプルピクチャー(「フランジパニのクローズアップ。」by Kevin Forest氏)を元画像として、Qualityオプションを小さい方から順に10, 30, 75, 80, 85, 90, 100と指定していって、それぞれの画像を保存、そのままのファイルサイズでアップロードしたのが以下です。

 まずは元の画像です。350ピクセルにリサイズされていて(品質75)、クリックするとオリジナルのサイズで表示されます。

test0
元の画像のファイルサイズは105KBで大きさは1024x768です。

 以下、色んな品質でリサイズしていった画像を載せます。低い品質から。

test10
品質10。4.75KB。ブロックノイズが目立ち明らかに劣化している。
test30
品質30。8.4KB。ブロックノイズはだいぶ減ってはいるがモスキートノイズが。
test75
品質75。15.6KB。デフォルト値。まぁまぁ綺麗だが、目を凝らすと・・・。
test80
品質80。17.6KB。うーん。
test85
品質85。20.4KB。品質80よりノイズが減っている。
test90
品質90。25.2KB。85との違いは大きくない。
 
test100
最高品質100。ファイルサイズ70.9KB!その割りには90との違いは微妙。

 これから言えることは、JPEGの性質上、元の写真による部分もあると思うけれど、デフォルト値の75では、ノイズが少し目立ち、品質85だと明らかな改善が見られる。ファイルサイズは、15.6KBが20.4KBと約1.3倍。品質90-100は、見た目のクオリティーはほぼ変わらないにも拘わらず、品質100でのファイルサイズ増大が顕著(90で25.2KBなのが100だと70.9KB。ちなみにオリジナルは105KB)。

 なので、結論としては、初期値の75での品質が気になる方は、85-90あたりの値を指定すると、リサイズしても満足した画質が得られるんじゃないでしょうか。たった一枚のサンプル画像からの帰結ではあるけれど、まぁ妥当なところであると思います。

 というわけで縮小された写真の画質が気になる方は、utils_admin.phpの500行目あたりを、

  case 2 : ImageJPEG($img_out, $output, 85); break; // あるいは90

としてみては如何でしょうか。

 将来的には、画像アップロード時に、指定できるようにしても良いですね。

— posted by martin at 12:29 am   commentComment [9]  pingTrackBack [0]

この記事に対するコメント・トラックバック [9件]

scrollUp1. にこにこ Website — 2009/09/16@19:51:18

クオリティーって75%が標準って何気なく受け入れていましたが、実際比較してみると違いが分かりますね。自分では実際に比較して見るってのは思いつきませんでした。(TT)

ところで、いつも質問とお願いばかりで申し訳なんですが...?;w) 写真つながりで2、3教えて下さい

PIX/s1ディレクトリの中にある画像は携帯用だと思うのですが、ここの写真の大きさって変更できますか?

メール投稿の添付写真を強制的に縮小することは出来るでしょうか?

最後にお時間が有るときにご検討いただきたいのですが、メール投稿で「同じ日」に「同じタイトル」でメール投稿すると同一記事の続きにアップすることが出来れば良いと思うのですが?

Owner Comment martin Website  2009/09/18@20:32:11

こんにちは。s1ディレクトリの写真は、画像ギャラリー用と、携帯での閲覧用です(携帯用は、ファイルサイズによってs2ディレクトリのを使うかs1のを使うか判断しています)。で、この大きさは初期値は100ですが、これは、管理画面→環境設定の「テーマ・色・画像表示関連」で変更できます。あと、この上に「表示する画像の大きさ(幅)上限。」というのがありますが、メール投稿の添付写真であっても、それをどの大きさにリサイズするかは、ここの数字設定によります(初期値は350、s2ディレクトリに保存される)。

 次のは、mob.phpをいじれば可能です。流れとしては、モブログ投稿時に、その日のエントリーをチェック、もしあって、タイトルが同じであれば、追記という形にするという感じになるかと思います。

3. にこにこ Website — 2009/09/16@20:22:21

連続投稿、すいません。
教えて頂いた、画像のスライドショーですがまだ実装できていません。貴重な時間を使っていただいたのに申し訳ありません。

Owner Comment martin Website  2009/09/18@20:39:55

グーグルのAJAX Feed APIを利用したスライドショーですが、実はGFslideshow.jsの記述にバグがあって、そのせいで、ppBlogのJavaScriptがエラーになるんですよね。1箇所、修正が必要なんですが、このgfslideshow.jsのライセンスは、Apacheライセンスのようなので、修正して再配布も可能かなとは思います。1箇所だけなので、ご自分で修正されても良いかと思います。具体的には、gfslideshow.jsの135行目の

for (o in this.options) {


for (var o in this.options) {

にする必要があります。"var" を追加しただけです。この修正を施した上で、このファイルは、自分のjsディレクトリにアップしてそこから呼び込めばOKかなと思います。こちら(martin's weblog)ではそうしています。

5. にこにこ Website — 2009/09/18@21:29:13

こんばんわ:) 早速のご返事恐れ入ります。
s1ディレクトリは100(初期値)で修正可能はコメント送信後に気がつきました。(TT)
s2ディレクトリは350(初期値)でPCでの閲覧時表示用で、これをクリックすると表示される画像(PIXディレクトリ直下)を強制縮小出来ればと思います。PCからの画像アップ時は、大きさをを指定しPIXディレクトリ直下にアップされるんですよね。
メールでの投稿時はオリジナルの大きさがPIXにアップされると思っています。このPIXにアップされる画像を強制的に縮小できますか?
私事ですが、「にこにこ通信」では個人情報の関係で名前が特定出来るのは避けたいのであまり大きな画像は問題があります。また、投稿者は子どもの面倒を見ながら携帯で写真を撮ってメールしてブログの更新をしています。最近の携帯は大きな写真をメール添付できてしまいます。ですのでPIX画像の強制縮小、メール投稿の記事の処理方法をお願いしました。お時間が許す時、ご検討をお願いします。

ところで、フランスと日本の時差って何時間ですか?

scrollUpOwner Comment martin Website  2009/09/19@01:38:56

こんばんは。理解しました。確かに、現状では、モブログ投稿では、投稿した大きさそのままで、PIXディレクトリに行きますね。なので、mob.phpに数行追記してみました。最初の部分で

define('MOBLOG_MAX_ISIZE', 350); // 携帯投稿時の写真の大きさ指定(ピクセル)

という定数を設けました。この数字より大きな画像は、リサイズされてPIXディレクトリに保存されるかと思います。こちらでは、動作確認できないので、ご報告いただけたら幸いです。以下に置いておきます(拡張子はphpに変更)
 →http://p2b.jp/demo/mob.txtLink

 ちなみに、フランスと日本との時差は7時間で、日本が進んでます。冬時間になるとこちらは1時間遅くなるので、時差は8時間になるんだったけな、確か・・・。

7. にこにこ Website — 2009/09/25@11:34:42

携帯投稿時の写真の大きさ指定機能は正常に作動しております。:)
ありがとうございました。:)

こっちが午前11:41分って事は、一番気持ち良く寝ている時間ですね。:P

8. ちらみ — 2009/10/02@11:24:32

本記事と直接関係はないんですが、一つ不具合?を見つけました。
画像アップロード時に指定するALT属性が反映されません。
それから、ドラフト投稿についてですが、ドラフトで保存して後で再度編集後公開した場合、実際のURL(UNIXタイムの数字だと思いますが)とRSSのURLが違っていると思います。
ドラフト保存時のURLと公開時のURLの数字が変わっている?

あと要望なのですが、アップロード時の画像の最大pxを指定する時に、横幅での指定なのか縦幅での指定なのを設定できるようにして欲しいです。
例えば、環境設定で最大サムネイルサイズ480px表示にしており、リサイズ後も縦長写真の横幅が480pxを超えてしまう場合は、枠からはみ出てしまいます。
最大幅の指定だけなので縦幅が最大だった場合は縦がリサイズされますが、それに対応した横幅を計算してサイズを入力しなくてはなりません。

長文で意味が分かりづらいかもしれませんが、分かってもらえるでしょうか。

Owner Comment martin Website  2009/10/13@01:17:44

こんばんは。
1. ALT属性ですが、こちらでは反映されているようです。これはソースを見た際の、IMGタグ内にあるALT属性ですよね。IE8でも反映されていました。

2. 実際のURL(UNIXタイムの数字だと思いますが)とRSSのURLとが違っているとのことですが、こちらで確認したところ、特に不具合はないようでした。

3. 画像の最大pxですが、「枠からはみ出てしまいます」という状況が、ちょっと再現できませんでした。例えば、533x800という縦長の画像を用意して、最大ピクセルを480pxに指定。画像アップロード画面で、「0」を指定すると元のサイズのままアップロードされてs2ディレクトリには、320x480のリサイズされた画像が保存されます。ブログでは、最初このs2ディレクトリの画像が表示されるので、480pxという枠からはみ出るということはないように思えますが如何でしょうか。

 なんだか、再現が取れなくて申し訳ないのです。もうちょっと追ってみようと思います。

この記事に対する TrackBack URL:

設定によりTB元のページに、こちらの記事への言及(この記事へのリンク)がなければ、TB受付不可となりますのであらかじめご了承下さい。

コメントをどうぞ。 名前(ペンネーム)と画像認証のひらがな4文字は必須で、ウェブサイトURLはオプションです。

ウェブサイト (U):

タグは使えません。http://・・・ は自動的にリンク表示となります

:) :D 8-) ;-) :P :E :o :( (TT) ):T (--) (++!) ?;w) (-o-) (**!) ;v) f(--; :B l_P~

     
T: Y: ALL: Online:
Created in 0.0205 sec.
prev
2017.7
next
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31