ダウンロード

「breakpoints.js」は下記URLからダウンロードできます。

xoxco/breakpoints · GitHub

画像の準備

今回は単純にPCとスマホの２種類の画像を切り替えたいと思います。
PC用に「image-pc.png」と、スマホ用に「image-sp.png」を作成しました。

ベースのimgを置き換える方法

htmlではPC用の画像を配置して、クラスを「sp-img」としておきます。

html

	<img src="img/image-pc.png" class="sp-img">

「640」をブレークポイントにしますので「breakpoints」オプションに[ 1, 640 ]と指定します。
また、ブレークポイントの数だけ「$(window).bind」の部分を追加します。

javascript

	<script src="js/jquery.js"></script>
    <script src="js/breakpoints.js"></script>
    <script type="text/javascript">
    $(function() {
        $(window).setBreakpoints({
            distinct: true,
            breakpoints: [ 1, 640 ]
        });
        $(window).bind('enterBreakpoint640',function() {
            $('.sp-img').each(function() {
                $(this).attr('src', $(this).attr('src').replace('-sp', '-pc'));
            });
        });
        $(window).bind('enterBreakpoint1',function() {
            $('.sp-img').each(function() {
                $(this).attr('src', $(this).attr('src').replace('-pc', '-sp'));
            });
        });
    });
    </script>

ウィンドウが640px以下の場合は画像のファイル名を「-pc」から「-sp」に置き換えるということをしています。
ただ、jsで切り替えているので、スマホサイズの場合はPC用の画像とスマホ用の画像で二重で読み込まれます。

二重で読み込ませない方法

二重に読み込ませないようにするには「src」を空にしておいて、data属性などで指定するということもできます。

html

	<img class="sp-img" data-img="img/image-pc.png">

javascript

	$(function() {
        $(window).setBreakpoints({
            distinct: true,
            breakpoints: [ 1, 640 ]
        });
        $(window).bind('enterBreakpoint640',function() {
            $('.sp-img').each(function() {
                $(this).attr('src', $(this).data('img'));
            });
        });
        $(window).bind('enterBreakpoint1',function() {
            $('.sp-img').each(function() {
                $(this).attr('src', $(this).data('img').replace('-pc', '-sp'));
            });
        });
    });

「src」を指定しないことのデメリットも色々とあったりすると思いますが、サーバーの負荷とか3G回線とか考えるのこちらでも。