タグ

WebDesignとimgに関するCherenkovのブックマーク (2)

  • Applerの備忘録(仮): CSS Spriteの流派をまとめる

    Yahoo!ニュースがリニューアルしてレスポンスが速くなったそうですが、高速化手法の中に「CSS Sprite」というものがありました。 いくつかある画像を1つの画像に連結し、CSSにて連結画像の中にある目的部位を切り出して表示しようという技術です。サーバに対するリクエストの数を減らす効果があります。 (今日の大嘘 - by edvakf in hatenaもそうですが、Yahoo!ニュースの一部のCSS Sprite画像も余白が多く、「速くする技術使ったよ」というのは説得力に欠けるのですが) 最近よく見るこのヘンテコな技術について調べ、転送の速さだけでなく、利便性を損なわないような形でこの技術を使えないものだろうかと考えました。 ではその成果を生かしてあれこれしようと思いましても当備忘録程度ではサーバにリクエストする画像の数など高が知れています。 そういうわけで、使わない技術

    Cherenkov
    Cherenkov 2012/09/07
    css sprite スプライト background-image
  • 印刷にも対応!imgタグでCSSスプライトを使う方法 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    こんにちは、デザイナーの王です(●´⌓`●) 今回は「imgタグでCSSスプライトを使う方法」について説明します。 そもそもCSSスプライトって何ぞや?という方は、下記ページに詳しく説明されているので、見てみてください。 CSSスプライトで画像を円滑に表示させる – Webクリエイターボックス: https://www.webcreatorbox.com/tech/css-sprite/ どうしてわざわざimgでCSSスプライト? 一番の理由は、imgタグなら印刷したとき印刷物に反映されるからです。 対比画像の、フォーム下部のボタンに注目してください。通常のスプライトでは印刷に反映されないんです。 ユーザ側で印刷の設定をいじればbackground-imageでも印刷できるんですが、やはりデフォルトでできた方が親切ですよね。(●´⌓`●) 便利なテクニックなので、覚えておきましょう! CS

    印刷にも対応!imgタグでCSSスプライトを使う方法 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
    Cherenkov
    Cherenkov 2012/09/07
    css sprite スプライト background-image
  • 1