17 - CSS(Image Sprite)

CSS Sprite技術

画像を編集する場合は、オンラインエディタを使用するか、editingアプリケーション(photoshop、pigma、スケッチなど)を直接使用して開発者が編集することができます.

CSS Sprites Generator

https://www.toptal.com/developers/css/sprite-generator/
利点:画像ラベルの数を減らすためにhtmlファイル自体がよりきれいになり、スクリーンリーダーを使用してナビゲーションすると、閲覧速度が速くなります.画像ラベルが多ければ多いほど、Webページのロード速度が遅くなります.
欠点:メンテナンスが難しい(修復が難しい)
-参考講座-
https://www.youtube.com/watch?v=fKyLCIqWjIY
-参照-
http://www.tcpschool.com/examples/tryit/tryhtml.php?filename=css_basic_imageSprites_01

応答の表示

レティナって何?

アップルの液晶パネルのブランド名は、特定の視野範囲内で、人の目では見分けられない画素密度(300 PPIを超える)を持っている.
*PPI?画素密度または画素密度または画素値は、様々な環境のデバイス解像度の測定単位である.一般に、コンピュータ表示、画像スキャナ、デジタルカメラ固体撮像素子に用いられる.
レティナ(高解像度スクリーン)に入るにつれて、論理画素(cssで表される画素の基本単位)と物理画素(デバイスが実際に処理できる画素の基本単位)との差が生じる.
ただし、ブラウザはcssで定義されたピクセルに従って画像をレンダリングする必要があるため、物理ピクセルにレンダリングされた画像は論理ピクセルと同じ大きさになります.

今日の問題と解決策

質問!

このように表現されています...
2 xサイズの画像をダウンロードして、画像sprateを作成します.

.sprite {
    background-image: url(spritesheet.png);
    background-repeat: no-repeat;
    display: block;
}

.sprite-icon_facebook {
    width: 56px;
    height: 56px;
    background-position: -10px -10px;
}

.sprite-icon_google {
    width: 56px;
    height: 56px;
    background-position: -86px -10px;
}

.sprite-icon_kakao {
    width: 56px;
    height: 56px;
    background-position: -162px -10px;
}

.sprite-icon_naver {
    width: 56px;
    height: 56px;
    background-position: -238px -10px;
}

そのまま値を書いておけば、このように表現されます!

どんな家族が制止しますか?
画像サイズは2倍なので、デフォルト画面ではwidth、height、backgbrood-positionの値を1/2で割って記入します.
この部分を見逃していたのでかなり黒くなっていました.

また、画像ランプの仕様を確認後、仕様も1/2とし、background-size: 152px 38px;を追加します.

[class^="icon"]::before {
  float: left;
  display: block;
  content: "";
  width: 28px;
  height: 28px;
  background-image: url(images_login/css_sprites.png);
  background-size: 152px 38px;
}

.link-sns-login.icon-facebook {
  border: 1px solid #2d9cdb;
}

.link-sns-login.icon-naver {
  border: 1px solid #00bf18;
}

.link-sns-login.icon-kakao {
  border: 1px solid #f2c94c;
}

.icon-google::before {
  background-position: -43px -5px;
}

.icon-naver::before {
  background-position: -119px -5px;
}

.icon-kakao::before {
  background-position: -81px -5px;
}

.icon-facebook::before {
  background-position: -5px -5px;
}

解決!

RetinaのためにPigmaから2倍のファイルをダウンロードし、それを->画像splight形式にマージし、->ファイルサイズを半減し、->各サイズを半減して

のタスクを完了します.
ファイルサイズ(

2倍)を半分に減らすには
(1倍のダウンジャケット値は2倍のダウンジャケット値の2倍だと思います)

背景-size属性を使って大きな画像を作る感じ!