東京の会社辞めて地方で生きるわ。

勢いで会社を辞めて縁のない地方で生きることはできるのか

srcsetの使い方

多分下記コードがベスト。タブレットはPC画像の方が表示される。

<img src="スマホ画像.jpg" srcset="スマホ画像.jpg 767w, PC&タブレット.jpg">

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

と思ったけど以下の方がよりベスト。

<picture>
  <source media="(max-width: 768px)" srcset="img/sp.jpg">
  <img src="img/pc.jpg" alt="*" srcset="img/pc.jpg 1x, img/pc@2x.jpg 2x">
</picture>

●最初のsourceタグにはスマホ用画像を置く。(完全にPCとスマホで違う画像ならスマホ用画像を置き、PCと同じなら下のsrcの1xで読んだ画像でもいいと思う。sourceをなくすと、2xの重い画像をスマホでよんじゃうことになる。)

●2xのところに画像を入れたら自動的にその画像の2/1のサイズにしてくれる。よってretina画像準備するときは、ちょうど倍の画像を用意しないといけない。、、と思ったけど、例えばPCで1200pxで表示させたい画像があった場合、retina用画像は2400pxで用意しないといけない。それはさすがにおもいので1800pxとかにしてcssで

picture img{
  width: 100%;
  height: auto;
}

とかにすればいい...のかな...


今度この記事読んでおく
http://kia-king.com/blog/tutorial/responsive-images-with-srcset/

ヒントのサイト
https://benchmark-inc.co.jp/



なお未対応ブラウザにはpicturefill.jsを使う。
/body直前にpicturefillをよびだす。

background-imageのretina場合

retina用のmixinを作る。これならwindows macどちらも一方の画像しか読まない。

scss

@mixin media-retina() {
  @media only screen and (-webkit-min-device-pixel-ratio: 2),only screen and (min--moz-device-pixel-ratio: 2),only screen and (-o-min-device-pixel-ratio: 2/1),only screen and (min-device-pixel-ratio: 2),only screen and (min-resolution: 192dpi),only screen and (min-resolution: 2dppx) {
    @content;
  }
}



.bg_tit{
  background-image:url(../img/about/bg_tit.jpg);
  background-size: cover;
  background-position: center;
  @include media-retina {
    background-image: url(../img/about/bg_tit@2x.jpg);
  }
  width: 100%;
  padding-top: 23.5%;
}

【参考URL】
https://webskillup.com/ety/20170301202123/