CSS Sprites化と画像減色でサイトを高速化 - エスカフラーチェLLC

開発裏話1、開発裏話2、と紆余曲折を経てリリースした Twister Alternative ですが、今回はgihyo.jp の連載記事にも関連し、デザイン面からみたサイトの高速化のお話をさせていただきます。 サイトの高速化というと、プログラムの最適化を行ったり、サーバのチューニングを行ったりというイメージがあるかと思います。 デザイン面でサイトの高速化というと不思議に思われる方もいらっしゃるのではないでしょうか。 Google App Engine のリクエスト制限 Twister では当初、Google App Engine で動いていました。Google App Engine ではリクエスト数に制限があるので、1回のページ読み込み時に発生するリクエストは最小限にしなければなりません。サイトの至るところで使われている一つ一つの画像はリクエストを増やしてしまう原因となります。 そこで

[tsutomura]

png/高速化

[ufomap]

膨らんだ画像サイズを最小限に抑える工夫

[HolyGrail]

↓国内外問わず可能な場合はSprite化するにこしたことはない。すでにhttp://www.yahoo.co.jp/では実施しているし、それよりも遥か以前にhttp://www.yahoo.com/が行っている。

[minimum_sho]

css spritesでサイトの高速化

[picnicgraphic]

注意：リストアイコンなどは余白も計算した画像配置/テキスト量による高さを考慮した画像配置/色数増→減色ツール/1つの修正ですべての画像座標に影響の可能性/余白とりすぎは容量増。#類似画像ごとならやりやすい？

[Quadrifogrio]

http://gihyo.jp/design/serial/01/ss-design/0010

[sigwyg]

一長一短を体現するFlashばりの一括読み込み。CSS Sprites

[crema]

すごいっす＞＜今度試してみます！！！

[kanouk]

CSS Spritesについて。かっこいい。

[mathatelle]

メガヒットサイトを構築予定の方は読んでおくべき！

[se-mi]

twisterを例に具体的に紹介