軽量化の方法 例 1

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

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

これは早い話が「チカチカ」の変形と言えます。 8 コマ目はややもすると気付かないようなものでした。

左の表よりもサイズやウェイトを変えて下に同じような仕組みのものを作ってみました。

このような 3 枚の画像を使っています。

6,880 7,508 7,020

軽量化

重〜い! 53,834 軽〜〜〜い 19,583

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

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

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

2,411

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

つまり、貼り付けた部分を元の画像の部分にすると言うことです。

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

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

1,956

3 コマ目は貼り付け部分だけのものです。 これはわかりますね。

こうして 4、5、6、7 コマまでできます。

1,021

8 コマ目も 2 コマ目と同じようにすることになります。

勿論青をすべて「透過」しているので、下地である最初の画像がずっと表示されているのです。

このような場合には消去手段は「何もしない」でかまいません。
こうして 19,583 バイトまで小さくなったのです。
さらに、各画像をトリミングして、「位置合わせ」をすれば、17,709 バイトまで下げることができます。

ちなみに「giam」の「コマ画像の最適化」機能を使っても、24,772 バイトまでしか下がりませんでした。 手を掛けた報酬がいかに大きいかを実感してください。

上の表にした作品は実に 179 kb も有ったのですが、このように作れば恐らく、100 kb ほどで収まるでしょう。

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