Responsive Images

Aug 26 2020- POSTED BY projecth 0 Comment

There’s an advantage of using HTML to deliver responsive images rather than a JavaScript library, because JavaScript tends to be more error prone than declarative languages like HTML. Additionally, HTML allows content parsers to pick up images.

Backgrounds vs Images Elements

The primary advantages of using HTML elements and attributes for responsive images instead of CSS background images are that many images are content, and not just for decoration (like a repeating background image). Including content images in the HTML markup is better for SEO, accessibility, and the general separation of structure and presentation.

1x and 2x Images

Why can 2x photographs have a higher amount of JPEG compression?
When 2x images are resized in the layout, the scale of JPEG artifacts tends to be reduced.

<img
    srcset="photo-@2x.jpg 2x, 
                photo-@1x.jpg 1x"
    src="photo-@1x.jpg"
    alt="Photograph of a flower."
    />

Polyfill vs Natively

A polyfill is a piece of JavaScript that will implement specific features in browsers that don’t support those features natively.

When using a polyfill, what happens to browsers that have native support for the polyfilled feature?
Browsers that support our HTML natively will work as intended, and browsers that don’t will use the polyfill.

How does the srcset attribute differ from the src attribute?
The srcset attribute allows us to specify multiple files for a single image.

<img
    srcset="banner-large.jpg 2048w,
                banner-medium.jpg 1400w,
                banner-small.jpg  800w"
    src="banner-medium.jpg"
    alt="Photograph of Nick Pettit in front of trees."
    class="banner-image"
    />

When using the srcset attribute, it’s up to browser vendors to make the most intelligent choice about which file to deliver. Why might this be desirable behavior when we could instead maintain full control over image source selection using the picture element?
If browser vendors come up with a better way to choose sources or new devices come along, this implementation will leave the hard thinking out of our code and in the hands of the browser.

Sizes Attribute

  • The sizes attribute tells the browser how much space an image should take up in the layout.
  • The sizes attribute takes one or more CSS media conditions and ending with a length unit.
  • If an image is 1000px wide and displayed @2x, it will be 500 CSS pixels wide in the layout.
<img
    sizes="50vw,
            (min-width: 1024px) 512px"
    srcset="banner-large.jpg 2048w,
                    banner-medium.jpg 1400w,
                    banner-small.jpg  800w"
    src="banner-medium.jpg"
    alt="Photograph of Nick Pettit in front of trees."
    class="banner-image"
    />

What’s the difference between the length values in the srcset attribute versus the media conditions and length values in the sizes attribute?
The source set attribute tells the browser the native width of the image in pixels. The sizes attribute tells the browser how much space that image will take up in the layout.

Picture Element

The <picture> element is a container used to specify multiple source files for a child image element.

<picture>
        <source  media="(orientation: landscape)"
                  srcset="img/banner-large.jpg  2048w,
                       img/banner-medium.jpg 1400w,
                       img/banner-small.jpg  800w" />

        <source srcset="img/banner-square-large.jpg  1000w,
           img/banner-square-medium.jpg 800w" />

        <img    src="img/banner-medium.jpg"
    alt="Photograph of Nick Pettit in front of trees."
    class="banner-image" />
</picture>

When it comes to media orientation, the second <source> element should not be modified.