軽量化の方法 例 3

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

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

マイクロボタンと言われる 88 * 31 で上部の角を透過した、中学生の言う「変形バナー」という部類です。 想像では各文字を入れてレイヤーを統合し、それから角の部分を透過色にし、それぞれのコマ画像を「gif」保存したものと見受けられます。

しかしそういう方法を採っていると、決して「軽い」アニメにはならないでしょう。 作者のものは 39,986 バイトもありました。

最後のコマに 9 コマ目と同じものを置いている理由も理解しにくいところですが ‥‥。

恐らくこのようなレイヤーで作っているものと考えられ、10 コマ目の画像として、 を得て、これを「gif」変換しているものと思います。

コマ画像をわざわざ「gif」変換する、色遣いによっては、これが軽量化を阻むことになったりします。

上の通りに作れば、 、27,299 バイトになりました。

PictBear SE などの場合、このように中国語フォントを直接入力しても文字化けしますから、画像を貼り付けて作っています。

軽量化

最も単純に考えると。このような発想になります。

しかしこれだと透過によって全ての「|」が表示されていまいます。 つまり 2 コマ目を作る時そうするように、「|」の付いていないコマでは、「|」の部分を写真の色にすることになります。 透過で文字部分は出てきますから、これも透過していいわけです。

例えば 2 コマ目を作ったりするときに、この状態で「不透明部分」を選択して、範囲を反転し、「背景レイヤー」をアクティブにし、削除する。「|」レイヤーを非表示にすることで 2 コマ目が得られるという寸法です。 同じように偶数コマ目のものをそういう風にゲットすればいいのです。

枠レイヤーは背景レイヤーと結合してあります。

「赤丸」を付けた「|」の部分が最初の画像の部分と変わっていますね。 これが「前のコマとの差」と言うことになるのです。

最後のコマだけウェイトを少し大きくしてみました。 ファイルサイズはナント! たったの 3,834 バイト! 結果的には「編集」 → 「各コマサイズの最適化」を実行したときと同じになりましたが、「各コマサイズの最適化」は必ずしも忠実なアニメになると言う保証はありません。

件の作者のものは原寸ではわからないのですが、500 〜 600% に拡大した時なぜか変わっている部分が 2 カ所見つかりましたが、この部分に意味があるとは思えないものでした。

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