TECH
Vol.71
M.S.
Optimizing Images for Responsive Design and Retina Displays with srcset
INDEX
What you can do with srcset
srcset Sample Code and Explanation
Retina Display Support with background
Conclusion
What you can do with srcset
- Switch images based on window size
- Switch images based on screen resolution
The two functions above mainly support responsive design and high-resolution devices like Retina displays.
As of July 14, 2017, in terms of browser support, srcset works without issue on modern browsers like Firefox, Safari, and Chrome, but is not supported on any version of IE or Microsoft Edge.
If you specify only srcset, the image won't display in IE or Microsoft Edge.
To support browsers without srcset, always specify the image using the traditional src attribute as well.
srcset Sample Code and Explanation
Switching Images by Window (Display) Size
<img src="middle.jpg"
srcset="large.jpg 1280w,middle.jpg 640w,small.jpg 320w"
sizes="50vw" alt="test">
- w attribute
The width of the image (original), and the window size for switching images. If you specify the image display width with sizes,
failing to specify the original image width will cause the image size to change.
If you don't use sizes, using it as a display switching point should work fine. - Browser behavior
Safari: Switches display on window resize + reload
Firefox: Switches display on window resize
Chrome: If loaded initially with a small window size,
the display switches when resizing the window larger,
but if loaded with a large window initially, or after resizing to a larger window,
the smaller image won't reload even after resizing smaller or reloading.
Displaying itself works without issue, but resize behavior is inconsistent. - sizes
The image's display width (only vw can be used).
You can change display sizes using media queries like "(min-width:800px) 30vw,100vw".
Use this when changing the number of columns.
Unlike specifying with picture (described later) for window-size-based image switching,
specifying with the w attribute is a display-dependent attribute that determines image width in w units,
so it loads a double-sized image to match screen resolution on devices like Retina displays.
Example) If the image displayed on PC is 640px, the image loaded on Retina displays will be 1280px.
*Browser behavior is as of July 14, 2017.
Switching Images by Screen Resolution
<img src="lar.png" srcset="middle.jpg 1x,large.jpg 2x" alt="test">
- 1x, 2x
Retina display support; switches images based on screen resolution.
1x: 1×, 2x: 2×
You can also specify 1.5, 3, etc. as needed.
*1x/2x is an alternative to w and cannot be used together with w. If you mix them, the image won't display.
Switching Images by Window Size (with picture)
<picture>
<source media="(min-width:769px)" srcset="large.jpg">
<source media="(max-width:768px)" srcset="middle.jpg">
<source media="(max-width:320px)" srcset="small.jpg">
<img src="middle.jpg" alt="test">
</picture>
- picture, source
Can only be used in this combination.
The display switches based on window resizing. - media
Media query, specifying the screen width at which to switch images. - img
Specifies the image to display if srcset can't be used.
*Note: img must be written after source, or source won't be loaded. - alt
Provides a common alt text for the images specified in source.
Combining Window-Size and Screen-Resolution Switching
<picture>
<source media="(min-width:768px)" srcset="middle.jpg 1x,large.jpg 2x">
<source media="(max-width:767px)" srcset="small.jpg 1x,middle.jpg 2x">
<img src="middle.jpg" alt="test">
</picture>
- media="(min-width:768px)" srcset="middle.jpg 1x,large.jpg 2x"
Specifies two images for different screen resolutions when the window size is 768 or larger. - media="(max-width:767px)" srcset="small.jpg 1x,middle.jpg 2x"
Specifies two images for different screen resolutions when the window size is 767 or smaller.
Retina Display Support with background
The method of switching background-image display using CSS media queries is widely known,
but you can also use media queries to switch displays based on resolution.
@media only screen and (-webkit-min-device-pixel-ratio: 2){
body{background:url(large.jpg);}
}
Determines the screen resolution and switches the background.
This takes effect at 2× or higher.
The above works without issue in WebKit-based browsers like Chrome and Safari.
device-pixel-ratio was originally developed independently by WebKit when Retina displays were introduced,
so it's not supported in other browsers.
To support browsers like Firefox, use the following code together:
(min-resolution: 2dppx)
/* Example */
@media only screen and (-webkit-min-device-pixel-ratio: 2),(min-resolution: 2dppx){
body{background:url(large.jpg);}
}
Conclusion
How was that?
Functionally, the code is simple—just switching images based on window size or Retina displays—but we've briefly summarized the attributes used alongside srcset and the points to watch out for.
The best thing about srcset is that it loads only the image you actually need.
Even if you prepare many images for different window sizes and screen resolutions and specify them all, only the one image needed for that window or display is actually loaded—which is appealing.
Also, switching images means you have to prepare that many images.
While being able to display the optimal image for each device reduces the load on the user, the effort of preparing multiple images is unavoidable.
Plus, if you specify all those images, the HTML code can become more cluttered—so getting too granular just because switching is easy is something to think twice about.
In the future, it would be nice if HTML or CSS alone could handle various window sizes and screen resolutions with a single image, reducing the effort of preparing images and the complexity of code handling and notation.
RECENT POSTS
Vol.204
Brand experience: Reconnecting a company's current reality with society
Vol.203
What Is Design Management
Vol.202
Why Hiring No Longer Works— Redesigning Organizations and Decisions for an Uncertain Age
Vol.201
How to Choose a Branding Agency: 5 Criteria to Avoid Failure
Vol.200
Design Management: A Practical Guide for SMEs and Startups to Drive Real Results
Vol.199
How to Rebuild Brand Competitiveness: A Practical Guide to Brand Management for SMEs
