- Attribute of
- What does
- Defines multiple sizes of the same image, allowing the browser to select the appropriate image source.
- 1 The Problem: Different Resolutions and Screen Sizes
- 2 A Terrible Solution: Giant Images for Everyone
- 3 A Better Solution: Serve Different Images to Different Visitors
- 4 Using srcset
- 5 Values of the srcset Attribute
- 6 All Attributes of img Element
- 7 Browser Support for srcset
The Problem: Different Resolutions and Screen Sizes
This is probably obvious to you (we hope), but not everyone browses the internet with the same size screen. We use everything from oversized desktop monitors to tiny screens we keep in our pockets. This presents some challenges around how we deal with page design, including images.
And it isn't just size — resolution is an issue as well. 4K HD monitors and Apple's Retina display are packing more pixels than ever into a smaller space, and that trend is likely to continue. to make images look good on these screens, the source files need to be much larger — two, three, or even four times the size of images intended for conventional displays.
A Terrible Solution: Giant Images for Everyone
One way to handle support for high-resolutions screens is to simply serve the biggest image you can all the time.
This almost a good idea. Low-rez and small-size screens can display the giant, high-def image with no problem. They just won't see any benefit.IT will look basically the same to them as if you had given them an image half the size. So, the user experience improves for the high-end viewers and every one else is unaffected. Great, right?
Hopefully, you can see the problem here. Providing much larger images does not leave everyone else unaffected. They still have to download them. This costs them bandwidth, and it costs you bandwidth. It also slows down their page load times and uses up more of their computer's memory.
A Better Solution: Serve Different Images to Different Visitors
What you really want to be able to do is serve the largest image that actually makes a difference to each user. If someone can see you high-quality, high-resolution, gigantic image, then you want to serve it to them. But to someone visiting you on a 5-year-old smart phone, you want to give them a smaller image.
The Old Way(s)
But, thanks to HTML5, we can do all this pretty easily.
The New Way:
srcset attribute has made responsive image sizing much simpler. It allows you to define a list of differently-sized versions of the same image, and provide information about the size of each one. Then, the client (browser) gets to make the decision.
This last part is particularly worth noting, because the client device actually knows what it is capable of, whereas your website code has to make queries and guesses to figure it out. Moreover, browser technology continues to improve, whereas most website designs are on the "set it and forget it" development cycle.
There are two parts to using
srcset — creating the individual files, and then the markup.
Individual File Sizes
First, you need to create several different sized versions of the same image. This is slightly different depending on whether you are using photographs and existing artwork or creating new artwork from scratch.
In either case, you'll usually want to create at least four versions of each image: a "normal" sized one, and then one at twice the size (2x), three times (3x), and four times (4x). When you create your images, it is helpful to append a size specification to each files:
This doesn't make any difference to the browser, but it will your life easier. Also, note that you could create more versions at different size (larger, smaller) and there is no limit to the number of source files specified in the
srcset attribute. However, general practice seems to have settled on four sizes (at least for now).
With new artwork, the job is easy. You are probably using something like Adobe Illustrator or Inkscape to create your images. When you export them, simply export them at different sizes. (The naming example above uses
.jpg. Don't forget that most non-photographic artwork looks better with a PNG.)
(As a side note, if you are creating purely vector graphics, and you can export to SVG, you should do that instead and ignore this entire thing. SVG files are infinitely scalable, look great on all screens regardless of resolution, and are now supported in all current browser versions.)
Existing Artwork and Photography
The trick here is to start with the biggest possible image, or — at least — the biggest image you plan to serve up. Then scale it down to each individual version.
- Largest or original — image-4x.jpg
- Scaled down to 75% — image-3x.jpg
- Scaled down to 50% — image-2x.jpg
- Scaled down to 25% — image-1x.jpg
srcset attribute allows you to specify a list of image file URLs, along with size descriptions. Yo ualso need to still use the
src attribute to identify a "default" image source, to be used in browsers that don't support
The markup looks likes this:
<img srcset=" url size, url size, url size " src="default url" >
(We know, it seems weird to have an HTML tag take up multiple lines, but it makes it much easier to keep track of.)
In the live examples below, we'll use the following images:
- flamingo4x.jpg — 4025 × 2672 — 3.8 MB
- flamingo3x.jpg — 3019 × 2005 — 3.7 MB
- flamingo2x.jpg — 2013 × 1337 — 1.9 MB
- flamingo1x.jpg — 1006 × 668 — 338 KB
- flamingo-fallback.jpg — 1006 × 668 — 108 KB
Notice the file size difference between 1x and 4x. The 4x version is over 11 times larger. This is why you should not serve the high-quality images to low-resolution screens.
Specifying Image Density
The more common way to to set include size information in the
srcset attribute is to label each file by image density. You do this by putting
3x and so forth after the URL. This works if you have made the different images in proportion to each other (which we did).
<img srcset=" /wp-content/uploads/flamingo4x.jpg 4x, /wp-content/uploads/flamingo3x.jpg 3x, /wp-content/uploads/flamingo2x.jpg 2x, /wp-content/uploads/flamingo1x.jpg 1x " src="/wp-content/uploads/flamingo-fallback.jpg" >
If you open the contextual menu (right-click or two-finger-tap) on the image above and open the image ina new tab, you can see which version your browser selected.
Specifying Image Width
The other way to inform the browser about the different sizes is to actually specify the image width in pixels. This has some advantages, it seems, because it gives the browser more information about the images, so it can make a better decision about which one to select. This is also good if your image versions aren't in exact proportion to each other. (That might be the case if they were auto-resized by your Content Management System or if you downloaded them as different sizes from a site like WikiMedia Commons or Flikr.)
For image width, you use a
w instead of an
<img srcset=" /wp-content/uploads/flamingo4x.jpg 4025w, /wp-content/uploads/flamingo3x.jpg 3019w, /wp-content/uploads/flamingo2x.jpg 2013w, /wp-content/uploads/flamingo1x.jpg 1006w " src="/wp-content/uploads/flamingo-fallback.jpg" >
Speed Up Rendering with
If you are using a
srcset to specify width, the browser has to make some decisions about which image to download. Unfortunately, it can't figure that out until it knows the rendered size of the image — how large it will actually appear on the screen.
You can let the browser wait to figure this out (once it has parsed all the CSS), or you can give it enough information ahead of time so that it can start loading the correct image right away. This information can be provided with the
Image Density vs. Width. Which one to choose?
Based on non-scientific surveys (i.e. looking around), it seems that image density (
2x, 3x, 4x) is more common. However, there are some good reasons for preferring to specify pixel width:
- more flexible — You can create more size variations, at non-regular multiples.
- easier — Many CMS, website builders and image-sharing sites already create or provide multiple image sizes. You can simply use them without making sure they are exactly proportionate to each other.
- smarter — Specifying actual width in pixels provides more information to the client browser, which means it is more likely to be able to select the most appropriate image for the context.
While either way should work, it is probably the case that specifying exact image widths is the best way to go.
Values of the
|list of sources||A list of image source URLs and their respective sizes.|
All Attributes of
|height||Identifies the intrinsic height of an image file, in CSS pixels.|
|srcset||list of sources||Defines multiple sizes of the same image, allowing the browser to select the appropriate image source.|
|Was previously used to specify the alignment and placement of an image relative to the surrounding text. It has been deprecated and should not be used.|
|alt||text||Defines alternate text, which may be presented in place of the image.|
|border||pixels||Previously used to define a border on an image element. It has been deprecated and should no longer be used.|
|controls||Toggled media player controls when used in conjunction with the <code>dynsrc</code> attribute. Both attributes are now deprecated.|
|hspace||Previously used to add horizontal space on both side of an image. It is now deprecated.|
|ismap||Identifies an image as a server-side image map. When the containing anchor link is clicked, the coordinates of the mouse will be included in the request.|
|longdesc||Defines a URL at which can be found more information about the image. It was written out of the HTML5 specification, but its status is not quite so clear as other deprecated features.|
|loop||Previously used to specify the number of times a video should play, when used in conjunction with the dynsource attribute. Both attributes have been deprecated.|
|lowsrc||Specified a smaller or lower-quality version of an image.|
|name||Identified the image or provided additional information about it. Deprecated in HTML 4.0 in favor of other attributes.|
|naturalsizeflag||This attribute does nothing. It was once used by a proprietary software system.|
|nosave||Was intended to prevent users from downloading an image. Was never a part of the HTML specification, and not widely implemented.|
|suppress||Used by the now-defunct Netscape browser to suppress the display of image prior to image download completion.|
|usemap||Specifies a client-side image map to be used with the image.|
|width||Indicates the intrinsic width of the image, in CSS pixels.|
|src||Specifies the URL of an image to be displayed.|
Browser Support for srcset