“Responsive design” is not a single technology but a set of techniques* that allow web pages to serve the needs of both mobile and desktop users. The core components are:
Web page text is fluid by default: as the browser window narrows, text reflows to occupy the remaining space. Images are not naturally fluid: they remain the same size and orientation at all configurations of the viewport, and will be cropped if they become too large for their container. This creates a conundrum when displaying images in a mobile browser: because they remain at their native size, images may be cut off or displayed out-of-scale compared to the surrounding text content as the browser narrows.
- CSS @media queries
- Fluid images and video
- JavaScript, often triggered by
window.matchMedia
- Server-side solutions
- SVG to create resolution-free images
Web page text is fluid by default: as the browser window narrows, text reflows to occupy the remaining space. Images are not naturally fluid: they remain the same size and orientation at all configurations of the viewport, and will be cropped if they become too large for their container. This creates a conundrum when displaying images in a mobile browser: because they remain at their native size, images may be cut off or displayed out-of-scale compared to the surrounding text content as the browser narrows.
Simple Fluid Images
One way around this is to size images in relative units, rather than absolute pixel dimensions. The most common relative solution is to set themax-width
of the image at 100%
:
<img src="royal-enfield-motorcycle.jpg" style="max-width:100%;height:auto;">
Images with this CSS will display at their native dimension so long as there is enough room in the HTML container to do so; as the browser window narrows, the images will scale to fit, as you can see in the illustration above.
This works well, as with a few limitations:
- A large image (over ~ 420 pixels wide) will increasingly dominate the document as the view-port shrinks down, as its native size is greater than the width of most smartphones. Scaling means that the image won’t be cut off, but it may be large relative to text at small view-port sizes.
- The initial layout and setup of the document is affected: because you are not setting the image’s height and width explicitly in the CSS, the browser cannot reserve any space for the image in the page. This will often cause the layout to “pop” when the user visits the page for the first time, as fluid images are loaded and forced to fit into their newly determined size.
- Unless the image is already the full width of its container, this approach does not work well for HiDPI/Retina images: the image’s “actual size” will be shown as twice the width that you want it to be.
max-width
fluid image
approach is a very good approach for article header and “hero” images,
but for illustrations in body text, a more subtle approach is often
required.
A Better Fluid Image Solution
A better, albeit more complex approach to fluid images is to measure thewidth
of the image as a percentage of the overall width of the page.
For example, let’s say you had an image that had a natural size of 500px × 300px in a 1200px wide document. Below 1200px, the document will be fluid. The calculation of how much width the image takes up as a percentage of the document is easy: (500 / 1200 ) × 100 = 41.66%
We can plug this number in as the
width
for the image; typically, this would be done inline, as each image will often be a different dimension:
<img src="
emample.jpg
" style="float: right; width:41.66%;margin-left:2rem">
This accommodates Retina pixel-doubled images, but can run into
issues at extremes of large or small viewport sizes, when the image
might appear too big or small relative to the text. To get around this,
we can place a max and/or min width on the image in pixels as upper and
lower limits:
<img src="emample.jpg"style="float: right; width:41.66%;margin-left:2rem;max-width:500px;">
The type of approach you use will depend on both the kind of image
and the overall design of the site; there is also the possibility of
transitioning the flexible images between breakpoints with a hybrid
technique that utilizes media queries: we’ll look at that in the next
article.
Improving Browser Performance
Specifying only thewidth
of images may cause a doubling or tripling of the cycles that many
browsers must process to layout the new, resized page. While each of
these cycles typically take less than a millisecond, they stack up,
especially if there are multiple scalable elements on the page.
Addressing height
in the same declaration can reduce this issue:
<img src="
emample.jpg
" style="max-width:100%;height:auto;">
No comments:
Post a Comment