knowledge base

マークアップ/フロントエンドエンジニアのWEB制作における備忘録です。平日はWEB屋、休日は社会人劇団の主宰・劇作家をしています。

巨大なサイズの背景画像を使用したい

ブラウザごとに限界値がある

background-imageで巨大なサイズの画像を読み込ませるとき、ブラウザによっては表示できなかったり、イレギュラーな表示をする場合があります。

リピートさせずに表示させたいとき、Safari(iOS)とFirefoxは要注意。

特にSafariでは別名2メガバイト問題などと呼ばれるそうです。

Safari (iOS)

画像の高さ × 幅  <  2 × 1024 × 1024 (2M byte)

この基準を超えると、表示はされるものの、縮小かつリピートされた状態で表示されてしまいます。 background-sizeを指定しても効果なし。

f:id:ShinImae:20151209193901j:plain

Firefox

画像の高さ × 幅 = 700 × 25000 (約17M byte)

までなら表示されることを確認。 これを超えると(僕が経験したのは約39メガバイトですが)、完全に画像を読み込めなくなり、表示しません。

Firebugで対象の要素を検証すると「画像を読み込めませんでした」というメッセージ。

IE, Chrome, Opera, Safari (Windows)は、39メガバイトでも表示されましたが、一説によるとIEにも限界値があるとかないとか。

サイズが2メガバイトを超えないような画像を使用するのが、最も手っ取り早い解決策です。

ちなみにSafariにおける上記事例では、CSSスプライトアニメーションのため非常に長い画像を使用していたのですが、2メガバイトを超えないようにシーンごとに何枚も切り分けました。