まず、JPEGというものについて、e-wordから。
静止画像データの圧縮方式の一つ。ISOにより設置された専門家組織の名称がそのまま使われている。圧縮の 際に、若干の画質劣化を許容する(一部のデータを切り捨てる)方式と、まったく劣化のない方式を選ぶことができ、許容する場合はどの程度劣化させるかを指 定することができる。方式によりばらつきはあるが、圧縮率はおおむね1/10～1/100程度。写真などの自然画の圧縮には効果的だが、コンピュータグラフィックスには向かない。JPEG画像をつなぎ合わせて動画にした方式をMotion-JPEGという。なお、JPEGはGIFと異なり、どこの会社にも特許などの使用料を払う必要がない画像形式だとされていたが、2002年7月にForgent社が突然特許権の保持を宣言し(いわゆるサブマリン特許)、使用料の請求を開始して論議を呼んだ。
とまあ、小難しいハナシではあるんですが、画質を若干劣化させて圧縮する静止画像フォーマットという事で、写真なんかに利用されます。
Webデザインでグラデーションなんかを使うときは、JPEGかPNGを使いますが、このJPEGって8ピクセルごとにブロックわけされて圧縮されるので、8の倍数のサイズにすると良いんです。
※本当はもうちょっと細かい話なんですが、ザックリとね。
というわけで実例です。
こちらは8の倍数で切り出したグラデーションの画像（80 x 320）
そして、8の倍数から1ピクセル大きくした画像（81 x 321）
微妙ですけど、後者のほうがグラデーションが荒いんですねー。
また、圧縮を8pixel正方で行うので、81×321のJPEG画像の容量は、88x328と同じです。
単体ではさほど差は出ませんが、たとえば大量の画像をタイル状に並べるときなんかは、8の倍数を意識すると良いかもしれないですね。
CSSでbackgroundをリピートして設定するときも、8の倍数で切り出すと軽くて綺麗です。
という小難しいお話でした。
