3 ms·
An alternative, completely server-side implementation: http://adaptive-images.com/ http://adaptive-images.com/ It takes the approach of setting a cookie when t
by fiznool 14y ago
An alternative, completely server-side implementation: http://adaptive-images.com/ http://adaptive-images.com/
It takes the approach of setting a cookie when the page first loads with the viewport size, determined through media queries. Every request to the server then includes this cookie.
When an img is requested (as an <img> tag or through CSS background-image) the cookie is read to determine the viewport size of the client. The PHP script then serves up the most appropriate image size to the client.
The only thing you really need to do is add the .htaccess rule (to intercept image requests and route them through the PHP script), the php script itself and the highest resolution you need for each image. The script takes care of scaling down the image for smaller screens, caching them for later use.
I like the way this requires nothing on the client side, other than a cookie being set. All the heavy lifting is done on the server.