本節書摘來自華章社群《響應式web設計：html5和css3實踐指南》一書中的第1章，第1.3節基于cookie及javascript的響應式圖像，作者（美） benjamin lagrone，更多章節内容可以通路雲栖社群“華章社群”公衆号檢視
1.3 基于cookie及javascript的響應式圖像
使用複雜的伺服器端邏輯也能實作響應式圖像。有時因為一些特殊的需求，開發者往往不能夠采取最簡單的方法來實作特定的目标。之前提到的基于寬度百分比的方法依賴于用戶端來實作對于大圖像檔案的縮放。而本方法則是在伺服器端依據客戶的請求，傳回恰當大小的圖像檔案。如果你正為網頁加載過慢導緻的網站性能問題而煩惱，也許該方法能夠給不堪重負的伺服器負載和網絡帶寬帶來一些改進。
1.3.1 準備工作
本條目所涉及的方法都需要在伺服器端實作相應的功能。首先，伺服器端需要提供php服務。其次，伺服器端需要實作根據用戶端的請求傳回3張不同大小的圖像的功能。
1.3.2 實作方式
下面的javascript代碼比較簡單，建立一個基于使用者裝置螢幕尺寸的cookie。當用戶端請求伺服器端的圖像時，運作在伺服器端的php服務便會依據該螢幕參數決定傳回何種大小的圖像。
現在通過你的圖像編輯軟體，打開一張尺寸較大的圖像，然後儲存兩份較小尺寸的新圖像。如果原始圖像為300px，那麼新圖像的大小可以分别儲存為200px和100px。然後分别命名為robot.png、robot-med.png及robot-low.png，并上傳到images檔案夾中。
最後很重要的一點，将下面的html檔案存放到伺服器端的文檔根目錄中：
雖然該方法隻能根據螢幕大小傳回特定的圖像，并不完全是自适應的，但是該方法在伺服器端提供與css媒介查詢一樣的功能。可以通過css給這些圖檔加上樣式，或者使用javascript實作動畫效果。将不同的方法結合在一起使用，能夠更好地提供響應式内容。
1.3.3 工作原理
首先html檔案中建立cookie用以記錄裝置螢幕的尺寸。當向服務端發起擷取圖檔的請求時，就如同php中的include聲明一樣。首先檢查聲明的檔案是否存在，然後讀取cookie中的螢幕尺寸，最後傳回與之适配的圖像資源。