HTML and CSS Reference
In-Depth Information
.figure img {
max-width: 100%;
}
.figure.floatleft, .figure.floatright {
margin: 3px auto;
float: none;
}
@media only screen and (min-width: 600px) {
.figure {
width: 61.5%
}
.figure.floatleft {
margin: 3px 10px 3px 40px;
float: left;
}
.figure.floatright {
margin-right: 3px 10px;
float: right;
}
}
Although you can use media queries to change the position and size of embedded images, one of the main
drawbacks is that you can't prevent the browser from downloading the image.
■
Caution
Setting an image's
display
property to
none
doesn't stop the browser from downloading it.
Providing Images for High-Resolution Displays
Continuous improvements in technology mean that devices are packing more physical pixels into the screen
to produce a sharper display. Thanks to the concept of CSS pixels (see “Physical and CSS Pixels” in Chapter 3),
elements should look roughly the same size onscreen regardless of the physical pixel density. The downside is
that high-resolution displays need to scale up images, which often results in them looking blurred.
To ensure your images remain sharp, you need to make them larger than normal, and then scale them down. For
example, an iPhone with retina (high-resolution) display is 320 CSS pixels wide, but the display is generated by 640
physical pixels. So, it's said to have a
device-pixel ratio
of 2. Some high-resolution Android devices have a device-pixel
ratio of 1.5. So, if you want an image to be displayed at
400px
wide, the image needs to be at least
600px
, or preferably
800px
wide. When scaled down on a high-resolution display, it should retain its original sharpness.
Does that mean every image should now be twice its normal size? It would work, but it would greatly
increase download sizes, placing an unnecessary burden on devices with standard displays and mobile
devices on a slow connection. Rather than apply a blanket rule, it's important to test background images on
a high-resolution device. If the degradation is noticeable, you can use media queries to provide a larger
image—at least for background images.
■
At the time of this writing, there is no reliable way of serving different versions of images embedded
in
<img>
tags depending on the browser's screen size or pixel density. The web Hypertext Application Technology
working group (wHATwg) proposes adding an optional
srcset
attribute to the
<img>
tag that will perform a similar
function to media queries, allowing the browser to download the most appropriate version of an image. See
Note
