現状
状態:調査中
閲覧数:2,560
投稿日:2015-08-05
更新日:2015-08-19
ディレクトリ単位で、画像サイズ毎に保存
・「通常サイズ画像ファイル」も「サムネイルサイズ画像ファイル」もファイル名は同一
▼HTML
画像ファイルパス
▼/images/spot/101/
サムネイル画像パス
▼/images-thumbnail/spot/101/
案1.Media Queries
案2.幅に合わせた寸法での表示(Viewport-based Selection)
案3.picture を使用したレスポンシブ画像のアート ディレクション(Art Direction-based Selection)
案4.デバイスピクセル比(Device-pixel-ratio-based Selection)
案5.JavaScript
案6.jQuery
・「通常サイズ画像ファイル」も「サムネイルサイズ画像ファイル」もファイル名は同一
▼HTML
<img src="/images/spot/<?php echo $this->escape($user['id']); ?>/<?php echo $this->escape($imgFileName[0]); ?>.<?php echo $this->escape($imgExt[0]); ?>">
画像ファイルパス
▼/images/spot/101/
サムネイル画像パス
▼/images-thumbnail/spot/101/
実装案一覧
案1.Media Queries
案2.幅に合わせた寸法での表示(Viewport-based Selection)
案3.picture を使用したレスポンシブ画像のアート ディレクション(Art Direction-based Selection)
案4.デバイスピクセル比(Device-pixel-ratio-based Selection)
案5.JavaScript
案6.jQuery
実装案機能比較一覧
表
実装案毎の機能比較一覧表
- | 方式 | CSS | JS | 依存ライブラリ | キーワード |
---|---|---|---|---|---|
案1-1 | Media Queries | 〇 | - | - | @media、min-width、max-width、display: none;、display: block; |
案1-2 | Media Queries | 〇 | - | - | @media、min-width |
案2-A-1 | Viewport幅 | - | - | picturefill.js | sizes="100vw"、srcset属性、w記述子 |
案2-A-2 | Viewport幅 | - | - | picturefill.js | sizes="★★vw"、srcset属性、w記述子 |
案2-A-3 | Viewport幅 | - | - | picturefill.js | sizes="(min-width: ☆☆px) ★★vw"、srcset属性、w記述子 |
案3-B | pictureタグ | - | - | picturefill.js | picture、source media="(min-width: ☆☆px)" srcset="■■.jpg" |
案5-1 | window.innerWidth | - | 〇 | - | window.innerWidth |
案5-2 | window.matchMedia | - | 〇 | - | window.matchMedia |
案1.Media Queries
案1-1.Media Queries
@media で切り替え
・min-width、max-width を併用しているため、「display: none;」「display: block;」で表示を制御
▼HTML
<img src="./img/normal/1/1.jpg" alt="" class="normalsize">
<img src="./img/thumbnail/1/1.jpg" alt="" class="thumbnailsize">
▼CSS
/* ▼表示領域が400px以上の場合 */
@media screen and (min-width: 400px) {
p.target img.thumbnailsize { display: none; } /* thumbnailsizeを非表示 */
p.target img.normalsize { display: block; } /* normalsizeを表示 */
}
/* ▼表示領域が400px未満の場合 */
@media screen and (max-width: 399px) {
p.target img.thumbnailsize { display: block; } /* thumbnailsizeを表示 */
p.target img.normalsize { display: none; } /* normalsizeを非表示 */
}
・ウインドウ幅に合わせて画像サイズを変化させる方法
案1-2.Media Queries
@media で切り替え
・min-widthのみ使用
▼HTML
<div class="target"></div>
▼CSS
.target {
height: 400px;
background-image: url(small.png); /* スマホ画像 */
background-repeat: no-repeat;
background-size: contain;
background-position-x: center;
}
@media (min-width: 500px) { /* 500px以上 */
body {
background-image: url(body.png);
}
.target {
background-image: url(large.png); /* タブレット画像 */
}
}
・CSS 内での画像
案2.幅に合わせた寸法での表示(Viewport-based Selection)
案2-A-1.Viewport幅
srcset属性 に w記述子 を使用
・sizes属性は未指定、あるいは、"100vw"を指定
▼HTML
<img
sizes="100vw"
srcset="img/400w.png 400w, img/600w.png 600w, img/800w.png 800w, img/1000w.png 1000w, img/1200w.png 1200w"
alt="画像の説明">
・1.A-1. srcset属性、w記述子 / 幅に合わせた寸法での表示(Viewport-based Selection)
案2-A-2.Viewport幅
srcset属性 に w記述子 を使用
・sizes属性 … "★★vw"を指定
▼HTML
<img src="img-200.jpg" sizes="50vw" srcset="img-100.jpg 100w, img-200.jpg 200w, img-400.jpg 400w, img-800.jpg 800w, img-1000.jpg 1000w, img-1400.jpg 1400w, img-1800.jpg 1800w">
・A-2. srcset属性、w記述子 / 画像サイズを相対値で指定
案2-A-3.Viewport幅
srcset属性 に w記述子 を使用
・sizes属性 … "(min-width: ☆☆px) ★★vw"を指定
800px以上 … 50vw、それ以外 … 100vw
▼HTML
<img
sizes="(min-width: 800px) 50vw, 100vw"
srcset="./images/200w.png 200w, ./images/375-500.jpg 375w, ./images/400w.png 400w, ./images/480-640.jpg 480w, ./images/600w.png 600w, ./images/768-1024.jpg 768w, ./images/800w.png 800w, ./images/1000w.png 1000w, ./images/1200w.png 1200w" alt="画像の説明">
・A-3.sizes属性、min-width属性、vw / レスポンシブ画像におけるブレークポイントの効果
600px以上 … 25vw、500px以上 … 50vw、それ以外 … 100vw
▼HTML
<img src="400.png"
sizes="(min-width: 600px) 25vw, (min-width: 500px) 50vw, 100vw"
srcset="100.png 100w, 200.png 200w, 400.png 400w,
800.png 800w, 1600.png 1600w, 2000.png 2000w">
・A-3.sizes属性、min-width属性、vw / レスポンシブ画像におけるブレークポイントの効果
1140px以上 … 570px、640px以上 … 50vw、それ以外 … 100vw
▼HTML
<img
sizes="(min-width: 1140px) 570px, (min-width: 640px) 50vw, 100vw"
srcset="img/400w.png 400w, img/600w.png 600w, img/800w.png 800w, img/1000w.png 1000w, img/1200w.png 1200w"
alt="画像の説明">
・1.A-3.sizes属性、min-width属性、vw / 幅に合わせた寸法での表示(Viewport-based Selection)
案3.picture を使用したレスポンシブ画像のアート ディレクション(Art Direction-based Selection)
案3-B.pictureタグ
source タグの media属性で、min-widthを設定
1000px 以上 … 画像指定、800px以上 … 画像指定、800px未満 … 画像指定
▼HTML
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="./images/768-1024.jpg" media="(min-width: 1000px)">
<source srcset="./images/480-640.jpg" media="(min-width: 800px)">
<!--[if IE 9]></video><![endif]-->
<img srcset="./images/375-500.jpg" alt="画像の説明">
</picture>
・B.picture要素、source要素、media属性 / picture を使用したレスポンシブ画像のアート ディレクション
1200px 以上 … 画像指定、1000px以上 … 画像指定、800px以上 … 画像指定、600px以上 … 画像指定、400px以上 … 画像指定、200px以上 … 画像指定、200px未満 … 画像指定
▼HTML
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="./img/1200w.png" media="(min-width: 1200px)">
<source srcset="./img/1000w.png" media="(min-width: 1000px)">
<source srcset="./img/800w.png" media="(min-width: 800px)">
<source srcset="./img/600w.png" media="(min-width: 600px)">
<source srcset="./img/400w.png" media="(min-width: 400px)">
<source srcset="./img/200w.png" media="(min-width: 200px)">
<!--[if IE 9]></video><![endif]-->
<img srcset="./img/800w.png" alt="画像の説明">
</picture>
・2.B.picture要素、source要素、media属性 / 画像のアートディレクション(Art Direction-based Selection)
800px 以上 … 画像指定、450px以上 … 画像指定、450px未満 … 画像指定
・Retinaディスプレイについても別途指定
▼HTML
<picture>
<source media="(min-width: 800px)" srcset="300.jpg, img-2x.jpg 2x">
<source media="(min-width: 450px)" srcset="200.jpg, img-small-2x.jpg 2x">
<img src="150.jpg" srcset="img-fb-2x.jpg 2x">
</picture>
・B.picture要素、source要素、media属性 / picture を使用したレスポンシブ画像のアート ディレクション
案5.JavaScript
案5-1.window.innerWidth
▼HTML
<img id="target">
▼JS
function changeImgSrc(width) {
if (width > 768) {
document.getElementById('target').src = "img/768.jpg";
} else {
document.getElementById('target').src = "img/640.jpg";
}
}
var width = window.innerWidth;
changeImgSrc(width); // 初回
console.log(width); //1024
window.onresize = function resize() {
var currentWidth = window.innerWidth;
if ( (width < 768 && 768 <= currentWidth) || ( width > 768 && 768 >= currentWidth) ) {
// 画面幅が 768px を堺に変わった時だけ呼ばれる
changeImgSrc(currentWidth);
}
width = currentWidth;
};
画面幅に応じて画像を出し分ける方法
案5-2.window.matchMedia
▼HTML
<img id="target">
▼JS
function changeImgSrc() {
if (window.matchMedia( "(min-width: 768px)" ).matches) {
/* ビューポートの幅が 768 ピクセル以上の場合のコードをここに */
document.getElementById('target').src = "img/768.jpg";
} else {
/* ビューポートの幅は 768 ピクセル未満の場合のコードをここに */
document.getElementById('target').src = "img/640.jpg";
}
}
window.addEventListener('resize', changeImgSrc, false);
window.addEventListener('load', changeImgSrc, false);
・window.matchMedia / スクリーンサイズに応じて JavaScript コードを処理分岐
現時点の採用案
案3.picture を使用したレスポンシブ画像のアート ディレクション(Art Direction-based Selection)
VWはCSSフレームワークで対応
・最低限実装したい内容は、この方式で対応可能
整理中
JavaScript
・設定されていないと取得できない?
document.querySelectorAll('.thumbnail')[0].style.width;
jQuery
Chrome表示205
$(".thumbnail").width(); //195
IE未対応
デモを試すも、IE未対応
・最小widthで指定した画像を、(どのwidthでも)常に表示
現時点の結論
まとめ
残念ながら、picture要素やsrcset属性を使ったレスポンシブ・イメージはまだ使わないのが得策のようです。
残念ながら、picture要素やsrcset属性を使ったレスポンシブ・イメージはまだ使わないのが得策のようです。
ブラウザがビジー状態だったためおかしかっただけ?
・要再調査
・なんでもかんでも<picture>要素を使えばいいわけじゃない!レスポンシブ・イメージ実装の際の注意点
Picturefill 2.xデモ①: 幅に合わせた寸法での表示
・IE正常
・Chrome下記不具合
・最大widthで指定した画像を、(どのwidthでも)常に表示
sizes属性
・IE正常
・Chrome下記不具合
・最大widthで指定した画像を、(どのwidthでも)常に表示
Retina対応(Device-pixel-ratio-based Selection)
・IE下記不具合
・最小widthで指定した画像を、(どのwidthでも)常に表示
・Chrome下記不具合
・最大widthで指定した画像を、(どのwidthでも)常に表示
Next
勘違いしていたかも
・viewportは、50vwなら50%幅の画像を読み込むのではなくて、50%で表示するってこと?
・sizes="80vw"だから、800×80%で640.jpg を読み込みのではなくて、単に「lighthouse-800.jpg 800w,」がないから、未満の640.jpgを読み込むってこと?
左のビューポート幅は約 800px。デバイスピクセル比が 2x でない限りブラウザは lighthouse-640.jpg を読み込み、2x である場合は lighthouse-1280.jpg を読み込む
<img src="lighthouse-160.jpg" alt="灯台"
sizes="80vw"
srcset="lighthouse-160.jpg 160w,
lighthouse-320.jpg 320w,
lighthouse-640.jpg 640w,
lighthouse-1280.jpg 1280w">
レスポンシブイメージのネイティブサポート - HTML5 Rocks
確認すること
・320px画面1列表示。1列@320
・800px画面4列表示。1列@200
・この場合の画像選択読込をviewportで処理可能?
・出来ないんじゃないの?
「css3-mediaqueries-js」と「Respond.js」の違い
レスポンシブ / 「size属性にブレークポイント設定 × vw指定」の複数組み合わせ表示確認は、嫌になるぐらい分かりづらい