Images are not loaded on smaller viewports

Certain images are not loaded on viewports below 1296px. Reproducible by setting browser viewport to ≤1295px and reloading the page. This behavior exists on multiple pages and as such is marked a global observation. The following example code is taken from the first missing image on page "IoT-Verteilerseite" in section "Die Kids Watch für die Sicherheit Ihres Kindes":

<div class="teaser__mainvisual teaser__mainvisual--left">
  <img
    class="lazy teaser__mainvisual-image"
    src="data:image/svg+xml;utf8,<svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;&quot; height=&quot;&quot; viewBox=&quot;0 0 1 1&quot;></svg>"
    data-src="https://www.telekom.de/resources/images/1226050/telekom-iot-doorpage-teaser-kidswatch-fruehling.webp"
    alt="Die Kids Watch für die Sicherheit Ihres Kindes"
    title="Die Kids Watch für die Sicherheit Ihres Kindes"
  >
  <noscript>
    <img
      class="teaser__mainvisual-image"
      src="https://www.telekom.de/resources/images/1226050/telekom-iot-doorpage-teaser-kidswatch-fruehling.webp"
      alt="Die Kids Watch für die Sicherheit Ihres Kindes"
      title="Die Kids Watch für die Sicherheit Ihres Kindes"
    />
  </noscript>
</div>

Observations about code markup:

• Image's src attribute not used to provide image source

• src attribute includes invalid character(s) (e.g. <)

• title attribute used and duplicate of alt attribute

• Unnecessary <noscript> used for image element that should not need javascript to be displayed

• Image tag missing / before closing >

• CSS class lazy used instead of image's built-in loading="lazy"

The reason for images not being loaded can be any combination of issues. See remediation notes for one recommendation to fix the issue by using clean, semantic HTML code.