アナログ
RSS  

画像を減色してファイルサイズを小さくする2008/10/02 06:08

画像のファイルサイズにこだわると、減色が有効な手段になってきます。
Photoshop 4?5?を使ってた頃(CS3も持ってるけどインストールすらしてない)、減色処理のあまりのひどさに減色機能スペック一覧(まだ残ってたのか!)を見て、OPTPiX買ったのはいい思い出w

前回、BlastPNGを薦めた理由の一つは、ユーカリにFLAXC.exeという減色プログラムが同梱されてたからです。この減色ソフトはフリーながらかなり優秀で、OPTPiXを持ってなかったらこれを使ってると思います(ユーカリにはリサイズもグレースケールもあるのでblog用途で困ることはないでしょう)。

普通ならここで、減色した絵をずらっと並べるのでしょうが、自分で実際にやるか、専門にやってるサイトをググって見てくださいってことで。目安として256色に減色なら、写真でもそれ程違和感ありません。

サンプルは、またしてもアサブロのテンプレからw
9月1日、デビューしました!
クリックで拡大します。 オリジナルは、77,237色、249,413バイト

FLAXCOPTPiX
webDesigner
ver 2.72
256色134,148129,319
128色110,282107,342
64色91,26886,555
32色74,55871,450
16色65,40260,121

FLAXCはBlastPNGで一括処理、OPTPiXは減色処理後、BlastPNGで最適化。OPTPiXの方がファイルサイズは小さくなりますが、一端ファイルに書き出して最適化するので面倒です。
この例では妥協して128色まででしょうか。ペンギンなら16色でも違和感ないのですけど(笑)。

サンプルとして128色に減色したものを貼っておきます。

FLAXC
FLAXCサンプル。クリックで拡大します。

OPTPiX
OPTPiXサンプル。クリックで拡大します。

絵としては、FLAXCが元の色合い重視、OPTPiXが階調を重視しているように見えます。
印象でいえば、元絵の雰囲気に近いのがFLAXC、単体で見たとき綺麗なのがOPTPiXのように思います。

ちなみに、次のマウスの写真ですが、64色に減色したものです。
Logicool MX1100
サムネイル程度なら、結構少ない色数でも違和感ないものです。

Firefox:ちょっと変わった広告画像カット2008/10/03 06:07

画像を表示していいサイトを登録する
モバイルPCで電話回線を使ってるとき、広告が大量に貼ってあるサイトって正直困る。
しかも、モバイルPCは非力なので、Adblockのような重いアドオンは避けたいし、たまに使うPCのそれもAdblockのメンテなんてしたくもない。
そんなあなた私に、ぴったりの方法があります。

Fx2より古いのを使ってた人なら知ってるのですが、オプションの画像読み込みは次の3通りありました。

1:全ての画像を読み込む
2:全ての画像を読み込まない
3:元の同じサーバーからのみ読み込む

今は、1か2しか設定できないように見えますが、GUIにないだけで機能は生きています。

URLにabout:configを入力したら、permissions.default.image に「3」を入力するだけです。
再起動は必要ありません。

次にアサブロのTOPのように、「新着画像一覧」が別サーバ(asahi-net.jpにasablo.jpを表示しようとしている)のために見えなくなる場合は

ツール→オプション→コンテンツ「画像を自動的に読み込む」の横の「例外サイト」ボタンをクリックして、「asablo.jp」を「許可」で追加します。

表示されなくて困る場合だけ設定※1すればいいので、殆どメンテナンスは不要だと思います。

これに加えて、NoScript※2のオプションのプラグインで次のものにチェックする

Javaの禁止
Adobe Flashの禁止
Microsoft Silverlightの禁止
その他のプラグインの禁止
<IFRAME>の禁止
信頼できないと記録されたサイトからの全てのオブジェクトをブロックする
オブジェクトを一時的に許可する前に確認する
プレースフォルダーとアイコンを表示する

これで見たくないものの殆どがブロック可能だと思います。


Firefox Add-ons:Custom Buttons²で「画像読み込み 全て/同一サーバのみ 切り替えボタン」の作り方の説明をしてます。興味があればどうぞ。
Custom Buttons²


※1:amazonで画像が表示されないからといって「images-amazon.com」を許可したら広告カットの意味ないからね(笑)。

そんなときは以前説明した、user.jsに指定すれば再起動で元に戻されるのを利用します。
user_pref("permissions.default.image", 3);
をuser.jsに追記しておいて、一時的に許可したい場合、オプションで「画像を自動的に読み込む」のチェックを外したあともう一度チェックして「OK」ボタンを押せば、全ての画像を読み込むようになります。
元の「同じサーバーからのみ読み込むようにする」にはFxを再起動します。
素直にabout:configを触ればいいのですが、設定名を忘れたときの保険になりますので。

※2:私にはNoScript抜きのFx運用は考えられないのでこのアドオンは重くても例外

Firefox Add-ons:Make Link2008/10/04 08:33

Make Link - Firefox Add-ons
今はCopyUrlLitePlus.uc.jsをカスタマイズして使ってるので、Make Linkについてたずねられても確認しようがありません。m(_ _)m

ブログなどでリンクを書くのに重宝するMake Link というアドオンがあります。
html形式では改行することもないのでいいのですが、テキスト形式で、タイトルとリンクを次のように改行して出力するように設定しても
べつになんでもないこと
http://puppet.asablo.jp/blog/
実際にメモ帳に貼り付けると
べつになんでもないことhttp://puppet.asablo.jp/blog/
となってしまいます。

対応方法は、prefs.jsでnet.soylentred.makelink.types.0.formatを探して(無ければ次の行を貼り付けます)
user_pref("net.soylentred.makelink.types.0.format", "%text%\r\n%url%");
のように%text%と%url%の間を¥r¥nにします。
理由はUnixなどで使われてる改行コード(¥n)になっていたためで、メモ帳で改行させるには「¥r」が不足してたと。


-追記-
prefs.jsよりuser.jsが無難という話もあります。至極ごもっともです。私もこんなかんじにuser.jsに設定してます。
// Make Link
user_pref("net.soylentred.makelink.types.0.format", "%text%\r\n%url%\r\n");
user_pref("net.soylentred.makelink.types.2.format", "<a href=\"%url%\" target=\"_blank\">%text%</a>");
が、user.jsに記述したままだと設定を変更しても、再起動するたび元に戻ってしまいますので、その点だけお忘れなく。でないとハマリの元です(笑)。

一度user.jsに設定して再起動後、user.jsから消すというのもありかもしれません。

-追記3-
user.jsで上手く設定できないという話を見かけましたので捕捉しておきます。
上の方法はMake Linkの設定をいじって、prefs.jsに変更内容が書き込まれたのをuser.jsで上書きする場合の方法です。
私がuser.jsに設定(Make Link未設定の状態から上書き)しているのは次の通りです。
// Make Link
user_pref("net.soylentred.makelink.order", "0,1,2,3,4");
user_pref("net.soylentred.makelink.types.0.format", "<a href=\"%url%\" target=\"_blank\">%text%</a>");
user_pref("net.soylentred.makelink.types.0.title", "Anchor");
user_pref("net.soylentred.makelink.types.0.useentities", true);
user_pref("net.soylentred.makelink.types.1.format", "<a href=\"%url%\" target=\"_blank\">%title%</a>\n<blockquote>\n%text_br%\n</blockquote>");
user_pref("net.soylentred.makelink.types.1.title", "Cite Quote");
user_pref("net.soylentred.makelink.types.1.useentities", true);
user_pref("net.soylentred.makelink.types.2.format", "<blockquote>\n%text_br%\n</blockquote>");
user_pref("net.soylentred.makelink.types.2.title", "Quote");
user_pref("net.soylentred.makelink.types.2.useentities", true);
user_pref("net.soylentred.makelink.types.3.format", "%text%\r\n%url%\r\n");
user_pref("net.soylentred.makelink.types.3.title", "Text");
user_pref("net.soylentred.makelink.types.3.useentities", false);
user_pref("net.soylentred.makelink.types.4.format", " - %text%");
user_pref("net.soylentred.makelink.types.4.title", "Title");
user_pref("net.soylentred.makelink.types.4.useentities", false);

~.types.3までしか設定しないなら、~.orderは必要なかったと思います。

-追記2-
Make LinkよりCopy URL+がいいと思う! - yukiex
「Copy URL+」はそんな問題起きないし、下のようにコンテキストメニューは最初から日本語対応で
揚げ足とりみたいですいませんけど(言いたい事も分かるけど)、表現があまりよくないと思いますよ。
Make Linkのコンテキストメニューの一番下に「設定」と表示されていることで分かりますが最初から日本語対応で、単に自由に設定できる部分が日本語で入力されてないってだけです。
コメントですまそうとしたらはてなユーザしかコメントできなかったもので……と書いて気が付いた、トラックバックもなかったのね。orz

それだけの更新もアレなんで、便利に使うトピックとかw
私はブログを書くようになってから、Copy URL+からアンカータグ形式でコピーしたくて乗り換えた人で、上のuser.jsの2行目のようにHTML形式に target="_blank"を追加してます。

それと、知らないユーザもいるかもしれませんので(まさかとは思うけど)、%text%には標準でタイトルが入りますが、テキストを選択した状態だと、選択されたテキストが入ります。
たまにタイトルにサイト名だけで、タイトルの入ってないサイトとかではこの機能が重宝します。

他に、私がよく使う引用の形式だと、「引用」というタイトルで次のようなのを作っておくと
<a href="%url%" target="_blank">%title%</a>
<blockquote>
%text%
</blockquote>
引用したい部分を選択→右クリック→Make Link→「引用」でできあがりという便利さがたまりません。
Make Link : CopyURL+ よりも使いやすい Firefox 拡張機能 : PamGauのように簡単に自分好みにできるのがMake Linkの魅力です。

最後に、拡張というのは自分にあったのを使えはいい訳で、Copy URL+よりMake Linkが使いやすいとか言うつもりはありませんから(笑)。