新しいiPad, iPhone4, MacBook Proなどに採用されているRetinaディスプレイを考慮したCSSスプライトの実装方法を紹介します。 Using CSS Sprites to optimize your website for Retina Displays CSSスプライトとは複数のアイテムを一枚の画像に配置し、background-imageで表示する範囲を指定するテクニックです。複数の画像を一枚にまとめることで、トラフィックの軽減につながり、Googleをはじめ多くのサイトで利用されています。 Retinaディスプレイは通常のディスプレイの倍の解像度があり、最適化するためには倍の解像度をもった画像を使用する必要があります。 使用する画像をJavaScriptで記述するのも一つの手ですが、ここではスタイルシートのみで実装する方法を紹介します。 実装例は、4つのそれぞ
Back when video games were still fun (we’re talking about the 8-bit glory days here), graphics were a much simpler matter by necessity. Bitmapped 2-dimensional character data and background scenery was individually drawn, much like today’s resurgent pixel art. Hundreds and later thousands of small graphics called sprites were the building blocks for all things visual in a game. As game complexity
That adds up to a total of 14.38KB to load the three images. Putting the three images into a single file weighs in at 16.1KB. The sprite ends up being 1.72KB larger than the three separate images. This isn’t a big difference, but there needs to be a good reason to accept this larger file… and there is! While the total image size (sometimes) goes up with sprites, several images are loaded with a si
７月下旬くらいから徐々に進めてきた作業ですが概ね形になりました。 このチューニング作業で当ブログの表示を約２倍に高速化することができました！ ∩(≧ο≦)∩ 高速化と行っても得意分野の動的コンテンツ（プログラムやＤＢのチューニング）ではなく静的コンテンツのチューニングです。チューニングの観点は文末の二冊の参考書を読むと理解が深まると思いますが、大きく分類するとサーバのチューニングとコンテンツのチューニングに分けられます。そして個人運営のサーバではちょっとチューニングの余地がなさそうな項目は除外すると次のような項目がチューニングポイントとなります。 コンテンツの構成によるチューニング HTTP リクエストを減らす → CSS スプライト導入、JavaScript/CSS ファイルを１つに統合 スタイルシートのロードを head 内に記述 可能な限りスクリプトのロードを /body タグ直前に
Applerの備忘録（仮）: CSS Spriteの流派をまとめる
Yahoo!ニュースがリニューアルしてレスポンスが速くなったそうですが、高速化手法の中に「CSS Sprite」というものがありました。 いくつかある画像を1つの画像に連結し、CSSにて連結画像の中にある目的部位を切り出して表示しようという技術です。サーバに対するリクエストの数を減らす効果があります。 （今日の大嘘 - by edvakf in hatenaもそうですが、Yahoo!ニュースの一部のCSS Sprite画像も余白が多く、「速くする技術使ったよ」というのは説得力に欠けるのですが） 最近よく見るこのヘンテコな技術について調べ、転送の速さだけでなく、利便性を損なわないような形でこの技術を使えないものだろうかと考えました。 ではその成果を生かしてあれこれしようと思いましても当備忘録程度ではサーバにリクエストする画像の数など高が知れています。 そういうわけで、使わない技術は
一番簡単なCSS Spriteのやり方 【CSSスプライト】投稿 : 2011-09-17更新 : 2015-08-28 表示の高速化の手法としてCSS Spriteというものがあります。 今回、これを使ってみたのですがいろいろつまずいたので一番簡単なやり方をまとめてみました。 CSS Spriteが使える場所 背景とイメージタグに使えます。ただし、背景でリピート指定などをしている場合は使えません。 CSS Sprite用の画像を作成する 「CSS Sprite Generator | Project Fondue」を使うと簡単です。 まとめたい画像をZIP圧縮して１ファイルにしてこのサイトにアップロードすると１つの画像にまとめてくれます。 ファイル名を仮にsample_pac0.pngとして説明をつづけます。 背景にCSS Spriteを適用する方法 適用前 <style> cite{
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
