べつになんでもないこと

新しいテクを使ってるかのように見えて、実はほとんどが古いテクだったと、ヤボを承知で突っ込んでみた。

「Yahoo!ニュース」の表示速度が3～5倍に、そのからくりは……：記事の芽

一つめのワザは複数枚の画像を1枚にまとめる「CSS Sprite」の採用です。

広まり始めたのが2007年9月28日なのでこれは古くはないですね。YouTubeが採用した時にも話題になりました。
使ってみたくて去年いろいろやってみたのですが、絵心ないもので（デザインセンスも）挫折しました。orz

参考
CSS Spriteを活用しよう | DesignWalker
独学で極める “Webデザイン”の技と心：第10回　CSS Spritesでサイトを高速化｜技術評論社
CSS Spritesのすべて - 技術解説、採用事例、ツールリンク | マイコミジャーナル
1枚の画像を切り出すテクニックCSS Sprite、便利ツール登場 | マイコミジャーナル

---

ワザの2つめが画像ファイルの形式の変更です。従来はGIF形式を採用していましたが、これをPNG形式にしました。

GIFは特許問題の件があったから、96年時点でよく知られていたと思うのですけど、国際標準化という話で見れば、古いというほどでもないかな。

---

PNG形式のファイルを生成する際に使うソフトも見直しました。これが3つめのワザです。
（中略）
当初PNG形式もPhotoshopで生成する計画でしたが、別の画像編集ソフトを使ったところ、ファイルサイズが小さくなることを発見。最終的に、ウェブテクノロジというソフトメーカーの「Optpix WebDesigner」を採用しました。128色ではなく64色にしても、グラデーションが不自然にならないことも分かりました。

発見とか茶吹いたｗｗｗ
少なくともPhotoshopの減色が糞でOptpixがイケてるのは99年時点でも常識だったと思いますよ。
証拠：Spec. List

私の記憶に間違いなければ、Photoshop買ったのが95年後半か96年前半で減色の糞さ加減にあきれてネットを探してたら「pag1teto」（当時の名前は違ったかも）とかが既にあって、Photoshopの減色の糞さ加減を叩いてたくらい古い話。

お暇ならどうぞ→画像を減色してファイルサイズを小さくする

---

最後のワザが、PNG形式の制御情報（チャンクと呼ぶ）の削除です。PNGファイルには、目には見えませんが本来の画像データ以外に制御情報が含まれています。「Smush.it」という専用ソフトを使うことで、表示上なくてもさしつかえないチャンクを削除。これでOptpix WebDesignerで作った4.67KBのPNGファイルは、4.44KBに。ここでは約4％の削減に成功しました。

Smush.it™を使わずとも、PNGOUT（圧縮最適化）、cPNGC（不要チャンク削除）があるじゃないかと……OptiPNGとか結構前からあった気がする……いつからだっけ？（少なくとも2005年にはBlastPNGとセットで使ってたからもっと前のはず）

お暇ならどうぞ→画像を劣化させずにファイルサイズを小さくする(PNG)
（最後のワザとやらはまだぬるいわけで……約27％削ってます）4.7％だわｗ
追記：間違えて悔しいｗのでYahoo!ニュースで実際にやってみた。
ranking.png　696→ pngrewrite + PNGOUT + cPNGC で 496　約28.7％減
ranking.png　696→ pngrewrite + PNGOUT で 509　約26.9％減
yn_gnavi_sprite.png　3,091→ pngrewrite + PNGOUT + cPNGC で 2,820　約8.8％減
yn_gnavi_sprite.png　3,091→ pngrewrite + PNGOUT で 2,833　約8.3％減
ついでにJpegも
20090529-00000003-vari-ent-thum-000-small.jpg　17,924 → Progressive Jpeg で 17,229　3.8％減
というわけで、最後のワザとやらは最適化がまだぬるいと。

他にもお暇なら「画像を劣化させずにファイルサイズを小さくする」シリーズ（笑）。
画像を劣化させずにファイルサイズを小さくする(Jpeg)
画像を劣化させずにファイルサイズを小さくする(Progressive Jpeg)

（アサブロの）テンプレートの画像が最適化されてなくて、転送量的にプロバイダとしてどうよ？と（それぞれの記事で）突っ込んでるのですが、今年3月から管理画面に表示されるようになったランキングのコメントに
「アクセスされ過ぎです。ああ、サーバへの負担がぁ・・・」
などと表示してる余裕があるなら、テンプレートの最適化くらいすればいいのにｗ

---

ちょっと補足（カッコ書き）を追加
計算対象を間違えてたので修正と追記
cPNGCのバグなのか？今回のPNG8で透明色が指定されている場合、透明色の情報を失うようなので処理から外して最適化したバイト数に変更しました。（cPNGCの仕様。未対応とデカデカとBlastPNGに書いてあるのになんで気が付かないんだか orz）
透明色の指定があるのにcPNGCで処理してたので、処理しないようにしたものに訂正。