2013年11月9日（土）、東札幌・ICC Cross×Gardenで開催したCSS Nite in SAPPORO, Vol.11「実践！ スマートフォン対応サイト制作」のフォローアップとして、松田 直樹（まぼろし）による「凝ったレスポンシブWebデザイン実装と画像の最適化」の資料を公開します。
スライド／音声
動画
※ デスクトップやタブレットでは、右下の「Vimeo」から、大きなサイズで見られます
フォローアップメッセージ
ご参加いただきましたみなさま、誠にありがとうございました。セッション3「凝ったレスポンシブWebデザイン実装と画像の最適化」を担当しました、まぼろしの松田でございます。
画像の最適化まわり、凝ったレスポンシブWebデザイン（RWD）について、と2本立ての内容で駆け足な説明になってしまい、それぞれ詳細までお伝えすることができませんでした。
真意としては、画像にしてもRWDにしても、今まではあまり使われてこなかったフォーマットや手法を知っておくことは有用である、という現状をご認識いただきたかったという点です。
実装の選択肢が増えていことを認識しておく、ということはセッション中でもお話しした「（凝ったRWDは）思いつけばできます」につながります。
このセッションが、みなさまの今後の「思いつき」のきっかけになれば幸いでございます。
スライド内で紹介しました参考サイトや、デモHTMLのソースのURLは以下よりご確認いただけるようにいたしました。ぜひご覧ください。
https://www.dropbox.com/s/93rj30gmca37myk/related_link.md
以下、アンケートでいただきました質問への回答です。
Q：ビットマップの書き出しはどのソフトが一番キレイなのでしょうか？
（Illustrator、Photoshop、Fireworksそれぞれからの書き出しに違いはありますか？）
フォーマットのよって得手不得手ありますので一概には言えませんが、Fireworksでの書き出しが軽めではあります。
ただ、どのソフトで書き出ししたものでも、最終的には以下のようなビットマップ最適化ツールでファイルサイズを落としておきましょう（画質は劣化しません）。
Mac OS Xの場合 - ImageOptim
http://imageoptim.com/
Windowsの場合 - PNGGauntlet
http://pnggauntlet.com/
Q：ウィンドウ幅の判定はメディアクエリとJavaScriptのどちらがよいのでしょうか？
やはり、まずはMedia Queriesで幅の判定を行うようにしたほうがよいでしょう。
JavaScriptでは、onresizeイベントやwindow.matchMediaを使えばデバイスの幅に応じた処理を追加できますが、あくまで「CSS（Media Queries）だけではできないことをサポートする」という観点で検討いただくのがよろしいかと思います。
改めまして、みなさまありがとうございました！