軽量化の方法 例 2

あちこちのページで極力軽くなるように書いてきています。 しかし、元画像に透過指定をする場合、また元画像がすでに透過してある場合などは、いくら透過が軽量化に役立つと言っても、更にもう一つの色を透過したいというようなことはできません。

こういうときには予めその組み立てを理解して元画像を作れば、軽くすることもできます。

ここでは画像自体 350 の幅しかありません。 つまり 118 は透過されていますが、恐らく作者は気づいていないでしょう。

しかも 1 と 4、2 と 5、3 と 6 は全く同じなのです。 それで 277 kb もありましたが、3 コマにするだけで半分の 139 kb になりました。

12,402
12,384
12,343

似た仕組みのものを作ってみました。 このような 3 枚の画像を使っています。 準備が少しメンドーですから、とりわけ変形が激しくなければ、ラフな手描きでも手描きの暖かみもあると思います。。

350 ピクセル四方に描いた塗りつぶし円です。

1,238

これは正方形に最大の内接円を描き、その後選択範囲を 20 ピクセルずつ縮小していって、色を塗り分けたものです。
そして色毎のレイヤーにして統合します。

1,194

後は色を統一すればカンタンにできます。 文字を描いたレイヤーで、不透明部分を選び、更に反転して、貼り付けた多重円のレイヤーでその反転部分を削除するだけです。

軽量化

重〜い! 59,258 軽〜〜〜い 24.662

左は上の画像をそのままアニメにしたもの。 59,258 バイト。 右は軽くなるように画像の作り方を変えたもの。 24,662 バイト。 プロパティを確認してみてください。

元画像の作り方・種明かし

1 コマ目は上の左の画像そのままです。

2,980

2、3 コマ目が工夫のしどころになります。

つまり、変化する文字部分だけにすると言うことです。

具体的には、貼り付けレイヤーの不透明部分を選択して、反転し、それを背景から削除することになります。

勿論貼り付けレイヤーを非表示にして、レイヤーを統合するのです。

偶数文字の場合

3,243

こういった4文字の場合は「吉」と「思」の間に中心が来るので、ピントはずれの感じになってしまいます。

3,023

字間を調整してみました。 中心はこれで「思」の左辺に来ます。 漢字の場合は上下位置に何もないと言うこともあり得るので、それも多少調整します。

13,768

赤っぽい部分にはグラデーションを使っているので、背景部分が「1」だけ違っていて透過されずに残ってしまうことがあります。 そのときには色を統一します。

メニュー提供 : DHTML Menu By Milonic JavaScript