<img lowsrc="">
- Attribute of
- HTML Tags Guide To Adding Images To Your Web Documents
- What does
<img lowsrc="">do? - Specified a smaller or lower-quality version of an image.
Contents
Code Example
<!-- DEPRECATED. This won't work in most browsers. -->
<img src="/wp-content/uploads/flamingo.jpg" lowsrc="/wp-content/uploads/small-flamingo.jpg">
Early Attempt at Responsive Image Handling
Ever since the World Wide Web became public, web developers and designers have understood that not everyone has the same quality of access to the internet. Connection speeds vary widely, as do screen sizes, and client processing power. One attempt to provide alternative, lower quality resources to those who need them was the lowsrc attribute. The idea was to specify the high-quality “default” in the src attribute, and the provide a smaller file with lowsrc. While this was an admirable attempt to address the problem, it proved not to be flexible enough for the wide variety of user circumstances, and has now been deprecated and replaced in HTML5.
The HTML5 Way to Provide Responsive Images
There are now two different ways of providing responsive images, depending on your use case.
Responsive Image Sizes
New in the HTML5 Specification is the image attribute srcset. This attribute allows you to provide an arbitrary number of optional image source files, along with information about their size.
<img src="/flamingo.jpg" srcset=" flamingo2x.jpg 2x, flamingo3x.jpg 3x, flamingo.4x.jpg 4x" alt="flamingo" > You can specify the size in multiples (1x, 2x, 3x), or in CSS-pixel width (100w, 200w, 400x). The srcset attribute lets the browser select the best option based on its own circumstance — screen size, screen resolution, bandwidth speed. As browsers get smarter, they will include better decision-making about which file to use — and you will never have to worry about it. You just provide several options and let the browser pick. Additionally, browsers that don’t support the feature can simply fall back to the src attribute. You can learn more about the srcset attribute here.
Responsive Image Design
The other approach to responsive images is to change the actual design of the image based on the circumstances of the browser. This is largely done to provide different orientations (portrait vs. landscape), for use depending on the shape and size of the browser window. (Portrait-oriented images usually look better on mobile devices than landscape-oriented ones.) Changing the actual image design itself is properly done with the new-in-HTML5 <picture> element. The picture element allows you to specify an arbitrary number of <source> elements, each one defining a different design of the same image. The markup is a little complicated, so here is a non-working “explanatory” version:
<picture> <!-- One or more source elements. --> <!-- The browser will select the first one where the media query returns TRUE. --> <source media="{ media query }" srcset="{ one or more source files for this design }" src=" { default source file for this design } " > <source media="{ media query }" srcset="{ one or more source files for this design }" src=" { default source file for this design } " > <!-- Default source, if above media queries are all FALSE --> <!-- No media query on this one. --> <source srcset="{ one or more source files for this design }" src=" { default source file for this design } " > <!-- Fallback img for browsers that don't support picture --> <img src="{ default design }"> </picture> For working examples and more information, see our page on the <picture> element, as well as this in-depth tutorial on responsive images.
