Fixed width Image - Component

View full screen
Code

Source (Nunjucks)

<img src="https://source.unsplash.com/RTfqNYKbqE4/800x500" width="400" alt="" class="fixed-width-img" />

Output

<img
  src="https://source.unsplash.com/RTfqNYKbqE4/800x500"
  width="400"
  alt=""
  class="fixed-width-img"
/>

Information

This ensures images are scaled to the exact size specified by the width attribute, preventing HiDPI screenshots from being blurry: <img src="800x500.png" width="400" class="fixed-width-img" alt="" />

Key links

Variants

In prose context

View full screen
Code

Source (Nunjucks)

<article class="prose">
  <p>On form submission, browsers automatically set focus on fields with problematic or missing required values. No JavaScript required!</p>
  <figure>
    <img class="fixed-width-img" width="500" height="483" alt="Screenshot of a sign-in form in Chrome on desktop showing browser prompt and focus for an invalid email value." height="483" src="/images/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png"token punctuation">" decoding="async" sizes="(min-width: 500px) 500px, calc(100vw - 48px)" srcset="/images/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png"token entity named-entity" title="&">&amp;w=200 200w, /images/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png"token entity named-entity" title="&">&amp;w=228 228w, /images/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png"token entity named-entity" title="&">&amp;w=260 260w, /images/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png"token entity named-entity" title="&">&amp;w=296 296w, /images/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png"token entity named-entity" title="&">&amp;w=338 338w, /images/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png"token entity named-entity" title="&">&amp;w=385 385w, /images/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png"token entity named-entity" title="&">&amp;w=439 439w, /images/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png"token entity named-entity" title="&">&amp;w=500 500w, /images/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png"token entity named-entity" title="&">&amp;w=571 571w, /images/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png"token entity named-entity" title="&">&amp;w=650 650w, /images/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png"token entity named-entity" title="&">&amp;w=741 741w, /images/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png"token entity named-entity" title="&">&amp;w=845 845w, /images/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png"token entity named-entity" title="&">&amp;w=964 964w, /images/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png"token entity named-entity" title="&">&amp;w=1000 1000w" loading="lazy">
    <figcaption>Basic built-in validation by the browser.</figcaption>
  </figure>
  <p>Validate inline and provide feedback to the user as they enter data, rather than providing a list of errors when they click the submit button. If you need to validate data on your server after form submission, list all problems that are found and clearly highlight all form fields with invalid values, as well as displaying a message inline next to each problematic field explaining what needs to be fixed. Check server logs and analytics data for common errors—you may need to redesign your form.</p>
  <p>You should also use JavaScript to do more robust validation while users are entering data and on form submission. Use the <a href="https://html.spec.whatwg.org/multipage/forms.html#constraints" rel="noopener">Constraint Validation API</a> (which is <a href="https://caniuse.com/#feat=constraint-validation" rel="noopener">widely supported</a>) to add custom validation using built-in browser UI to set focus and display prompts.</p>
</article>

Output

<article class="prose">
  <p>
    On form submission, browsers automatically set focus on fields with
    problematic or missing required values. No JavaScript required!
  </p>
  <figure>
    <img
      class="fixed-width-img"
      width="500"
      height="483"
      alt="Screenshot of a sign-in form in Chrome on desktop showing browser prompt and focus for an invalid email value."
      height="483"
      src="/images/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png"token punctuation">"
      decoding="async"
      sizes="(min-width: 500px) 500px, calc(100vw - 48px)"
      srcset="
        /images/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png"token entity named-entity" title="&">&amp;w=200   200w,
        /images/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png"token entity named-entity" title="&">&amp;w=228   228w,
        /images/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png"token entity named-entity" title="&">&amp;w=260   260w,
        /images/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png"token entity named-entity" title="&">&amp;w=296   296w,
        /images/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png"token entity named-entity" title="&">&amp;w=338   338w,
        /images/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png"token entity named-entity" title="&">&amp;w=385   385w,
        /images/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png"token entity named-entity" title="&">&amp;w=439   439w,
        /images/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png"token entity named-entity" title="&">&amp;w=500   500w,
        /images/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png"token entity named-entity" title="&">&amp;w=571   571w,
        /images/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png"token entity named-entity" title="&">&amp;w=650   650w,
        /images/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png"token entity named-entity" title="&">&amp;w=741   741w,
        /images/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png"token entity named-entity" title="&">&amp;w=845   845w,
        /images/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png"token entity named-entity" title="&">&amp;w=964   964w,
        /images/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png"token entity named-entity" title="&">&amp;w=1000 1000w
      "
      loading="lazy"
    />
    <figcaption>Basic built-in validation by the browser.</figcaption>
  </figure>
  <p>
    Validate inline and provide feedback to the user as they enter data, rather
    than providing a list of errors when they click the submit button. If you
    need to validate data on your server after form submission, list all
    problems that are found and clearly highlight all form fields with invalid
    values, as well as displaying a message inline next to each problematic
    field explaining what needs to be fixed. Check server logs and analytics
    data for common errors—you may need to redesign your form.
  </p>
  <p>
    You should also use JavaScript to do more robust validation while users are
    entering data and on form submission. Use the
    <a
      href="https://html.spec.whatwg.org/multipage/forms.html#constraints"
      rel="noopener"
      >Constraint Validation API</a
    >
    (which is
    <a href="https://caniuse.com/#feat=constraint-validation" rel="noopener"
      >widely supported</a
    >) to add custom validation using built-in browser UI to set focus and
    display prompts.
  </p>
</article>