Edited at

img画像を自動的にretina等の高DPIに対応させるjQueryプラグイン

More than 3 years have passed since last update.


plugin.js

( function ( $ ) {

// image の 高 dpi 置換
// 対象の img タグに対し、data-multi-dpi="true" の場合に高dpi画像への置換を行う

$.fn.autoHighDPI = function ( options ) {

if ( window.devicePixelRatio > 1 && $(this).data("multi-dpi") ) {
var imgSrc = $(this).attr("src");
var imgDPI;

if ( window.devicePixelRatio >= 3 ) {
imgDPI = "3";
} else if ( window.devicePixelRatio >=2 ){
imgDPI = "2";
} else if ( window.devicePixelRatio >= 1.5 ) {
imgDPI = "1.5";
} else {
imgDPI = false;
}

if ( imgDPI ) {
$(this).attr('src', imgSrc.replace(/(.jpg|.png|.gif)/gi, '@' + imgDPI + 'x$1' ) );
}
}
}
} ( jQuery ) );



index.html

<!doctype html>

<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>autoHighDPI</title>

<!-- CSS -->
<link rel="stylesheet" href="css/styles.css">

<!-- JS -->
<script src="js/jquery-2.1.3.min.js" async></script>
<script src="js/plugin.js" async></script>
<script async>
$( function () {
$("img").autoHighDPI();
} );
</script>

</head>
<body>

<h1 id="site-logo"><img src="img/site-logo.png" alt="site-logo" data-multi-dpi="true"></h1>

</body>
</html>



styles.css

h1 {

width : 500px;
height : 45px;
}
h1 img {
max-width : 100%;
max-height : 100%;
}


参考