HTML and CSS Reference
In-Depth Information
Therefore, narrow-screen browsers get a much smaller image. The full-size
image is then served up in a media query like so:
@media all and (min-width: 481px) {
r {
: ) ;
Devices that have a browser window width of 480px or less will only load the
small image, and devices with a browser window width of over 480px will load
the larger image.
Of course, the preceding technique doesn't work for images put on the page
using <img>. Often, you'll want to serve smaller content images to smaller devices
too. This is a much harder problem to solve. Fortunately, intelligent people have
been thinking about this problem. For a robust solution that relies on some server-
side magic, check out Matt Wilcox's excellent Adaptive Images technique. All you'll
need is at
Search WWH ::

Custom Search