【画像最適化】スマートフォン(ウェブアプリ)開発時における画像の最適な扱い方 – T2
読了: 約 4 分 こんにちわ。少しずつ夏の足音を感じる今日この頃皆さんはいかがお過ごしでしょうか。 絶賛スマホのウェブアプリを開発中の私ですが、開発・運用している中で学んだ事があったので、メモしておきます。 はじめに 皆さんはどのようなスマートフォンサイト、スマホのウェブアプリを作成しているでしょうか。 スマートフォンサイトといえば、あの忌まわしきIEから解放され、CSS3で角丸やbox-shadowなどを使ってデザインされている事だと思います。 なるべく画像を使わないように、写真とピクトグラム、CSSでグラデーション。というようなサイトをよく見かけます。 ウェブアプリといっても様々な形がありますが、今回は今私が開発しているアプリを作成している中で得たノウハウ？を メモしておきます。 CSSスプライトという神話 PCでの制作の時から画像はHTTPRequest数を減らすために極力まとめて
[CSS]Retinaディスプレイを考慮したCSSスプライトの実装方法
新しいiPad, iPhone4, MacBook Proなどに採用されているRetinaディスプレイを考慮したCSSスプライトの実装方法を紹介します。 Using CSS Sprites to optimize your website for Retina Displays CSSスプライトとは複数のアイテムを一枚の画像に配置し、background-imageで表示する範囲を指定するテクニックです。複数の画像を一枚にまとめることで、トラフィックの軽減につながり、Googleをはじめ多くのサイトで利用されています。 Retinaディスプレイは通常のディスプレイの倍の解像度があり、最適化するためには倍の解像度をもった画像を使用する必要があります。 使用する画像をJavaScriptで記述するのも一つの手ですが、ここではスタイルシートのみで実装する方法を紹介します。 実装例は、4つのそれぞ
Retina時代のWeb制作
Retinaディスプレイを搭載したiPhone 4が発売されて一年半。 巷では高解像度のiPadやMacBookの発売が噂され、Mac OS XではiPhoneのRetinaディスプレイに相当するHiDPIモードがほぼ完成に近付いています。 これら高解像度ディスプレイを搭載した環境では、互換性を維持するため、低解像度の環境に合わせて作られたコンテンツは基本的に低解像度のまま表示されます。 それはウェブブラウザにおいても例外ではありません。従来のウェブページは何の問題も無く表示されますが、新しい高解像度のデバイスには、新しい高解像度のコンテンツを提供したいものです。 Retinaディスプレイを搭載したiPad、そしてパソコンが普及した時、ウェブ制作の手法も変化を求められます。来るべき時代に備え、今のうちにRetinaディスプレイへの対応方法を確認しておきましょう。 ※ 以下に記した手法はMa
アイコン画像などをCSSスプライトにまとめる方法
現在作業中のサイトでは「CSSスプライト」という手法を使って、アイコンやロゴなどの画像表示の最適化を試みようと思っています。アイコンなどの小さな画像が数多くあると、その分ダウンロードする際にサーバへの接続回数（HTTPリクエスト）が多くなってしまい、ページ表示速度を遅くさせてしまう可能性があります。そこで、CSSスプライトを使った方法では、それら複数の画像を一つにまとめて必要な部分のみをCSSで表示させます。 CSSスプライトの方法にもいろいろあるようですが、ここではGoogleやFacebookが採用しているアイコン画像を縦と横に並べた、よりコンパクトなスプライト画像を使う方法についてまとめてみます。※現段階ではIE6、IE7未対応 CSSスプライトのしくみ たとえば、Googleのスプライトの「+」アイコンを表示させる場合、以下のような方法をとります： アイコンを表示したい部分に<sp
CSSスプライトで画像を円滑に表示させる
2014年8月13日 CSS, Webサイト制作 CSSスプライトとは、複数の画像をひとつにまとめて、CSSでポジションを指定することにより表示させるCSSの技のひとつです。画像の数を減らすことにより、サイトの表示を速めることができます。以前よりYoutubeなどに使用されているので、その名前を一度は聞いたことがあるかもしれません。ここではCSSスプライトを使用したメニュー画像の作り方を紹介します。 ↑私が10年以上利用している会計ソフト！ CSSスプライトを使うデメリット メリットは上記にあるとおり、サイトの高速化が期待できます。ではデメリットとは？ alt属性が使えない 背景画像のリピート表示ができない 更新する時に手間がかかる（サイズを変えるとCSSも変えなければいけないため） 以上をふまえて、私はいつもメニューの背景やボタンなど、マウスオーバー時に変化する画像のみCSSスプライトを
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
