FED Challenge #62

FED-Challenge-#62.markdown

FED Challenge #62

Six months ago apticknor posed a challenge to spot the problems in five different implementations of the picture element. He never received any solutions. So he brought it back up with hopes that several of the FEDs had an opportunity to try picture / srcset at this point and will be able to find the problems in these samples.

A Pen by chbymnky on CodePen.

License.

index.html

<!-- =================================
PROBLEM 1
================================== -->

<picture>
    <!--
        Redundant
        - <source> attributes sizes & srcset are mirroring the same attributes on <img> and are not needed in both places
    -->
    <source sizes="100vw"
         srcset="pic100.jpg 100w, pic200.jpg 200w">
    <img src="otherpic.jpg" sizes="100vw"
         alt="The president giving an award."
         srcset="pic100.jpg 100w, pic200.jpg 200w">
</picture>

<!-- =================================
PROBLEM 2
================================== -->

<picture>
     <!--
          <source> tags are in the wrong order
          - Within the <picture> child source tags need to be in descending order according to size.
            The browser will walk through the <source children of the <picture> and choose that first
            that matches so order does matter.
     -->
     <source media="(min-width: 18em)" srcset="medium.jpg">
     <source media="(min-width: 45em)" srcset="large.jpg">
     <img src="small.jpg" alt="The president.">
</picture>

<!-- =================================
PROBLEM 3
================================== -->

<picture>
     <!--
          <source> should not be using src attribute
          - when <source> is a child of <picture> the src attribute is ignored
          - should use srcset attribute
     -->
     <source media="(min-width: 45em)" src="large.jpg">
     <source media="(min-width: 18em)" src="medium.jpg">
     <img src="small.jpg" alt="The president.">
</picture>

<!-- =================================
PROBLEM 4
================================== -->

<!--
     Width for the images set on the srcset strings do not match the size of the actual images.
     - the browser will display the images at the size defined in the srcset attribute not the original size of the image
-->
<img src="small.jpg" alt="The president."
     srcset="400x200.jpg 600w, 800x400.jpg 1200w">

<!-- =================================
PROBLEM 5
================================== -->

<!--
  there is no default src attribute for a fallback image
-->
<img alt="The president." srcset="small.jpg 600w, large.jpg 1200w">