{"id":21601,"date":"2026-09-18T11:33:32","date_gmt":"2026-09-18T11:33:32","guid":{"rendered":"https:\/\/cmacademy.events\/knowledge-base\/groesse-ihrer-bilder-pruefen\/"},"modified":"2026-09-26T17:13:23","modified_gmt":"2026-09-26T17:13:23","slug":"groesse-ihrer-bilder-pruefen","status":"publish","type":"ht_kb","link":"https:\/\/cmacademy.events\/de\/knowledge-base\/groesse-ihrer-bilder-pruefen\/","title":{"rendered":"Gr\u00f6\u00dfe Ihrer Bilder pr\u00fcfen"},"content":{"rendered":"\n<style data-wp-block-html=\"css\">\n\/*\nCM Academy - Email image size checker v3 - CSS tab\nRadii: 14 for cards, 6 for everything inside. Borders carry the hierarchy, no shadows.\n*\/\n\n#cm-imgcheck,\n#cm-imgcheck *,\n#cm-imgcheck *:before,\n#cm-imgcheck *:after {\n  box-sizing: border-box;\n}\n\n#cm-imgcheck {\n  --cm-green: #9CCC3D;\n  --cm-blue: #185ABC;\n  --cm-navy: #1F354D;\n  --cm-text: #26384a;\n  --cm-muted: #667789;\n  --cm-line: #dfe6ed;\n  --cm-soft: #f7f9fb;\n  --cm-warning: #9a5c00;\n\n  width: 100%;\n  margin: 0;\n  color: var(--cm-text);\n  font-family: \"Titillium Web\", Arial, sans-serif;\n  line-height: 1.5;\n}\n\n#cm-imgcheck button,\n#cm-imgcheck input {\n  font: inherit;\n}\n\n#cm-imgcheck .cm-imgcheck__card {\n  padding: 24px;\n  border: 1px solid var(--cm-line);\n  border-radius: 14px;\n  background: #fff;\n}\n\n#cm-imgcheck .cm-imgcheck__results {\n  margin-top: 16px;\n}\n\n#cm-imgcheck .cm-imgcheck__kicker {\n  display: block;\n  margin: 0 0 6px;\n  color: var(--cm-blue);\n  font-size: 13px;\n  font-weight: 800;\n  letter-spacing: .09em;\n}\n\n#cm-imgcheck .cm-imgcheck__title {\n  margin: 0 0 6px;\n  color: var(--cm-navy);\n  font-size: 24px;\n  font-weight: 700;\n  line-height: 1.2;\n}\n\n#cm-imgcheck .cm-imgcheck__lead {\n  max-width: 62ch;\n  margin: 0 0 18px;\n  color: var(--cm-text);\n  font-size: 16px;\n  text-wrap: pretty;\n}\n\n\/* Drop zone *\/\n\n#cm-imgcheck .cm-imgcheck__drop {\n  position: relative;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 12px 16px;\n  padding: 18px 20px;\n  border: 1.5px dashed #aebdcb;\n  border-radius: 6px;\n  background: var(--cm-soft);\n  transition: border-color .15s ease, background .15s ease;\n}\n\n#cm-imgcheck .cm-imgcheck__drop:focus-within,\n#cm-imgcheck .cm-imgcheck__drop[data-dragging=\"1\"] {\n  border-color: var(--cm-green);\n  border-style: solid;\n  background: #fbfdf7;\n}\n\n\/* Hide native browser file input *\/\n\n#cm-imgcheck .cm-imgcheck__native-input {\n  position: absolute !important;\n  width: 1px !important;\n  height: 1px !important;\n  padding: 0 !important;\n  margin: -1px !important;\n  overflow: hidden !important;\n  clip: rect(0, 0, 0, 0) !important;\n  clip-path: inset(50%) !important;\n  white-space: nowrap !important;\n  border: 0 !important;\n  opacity: 0 !important;\n  pointer-events: none !important;\n}\n\n\/* Custom file button *\/\n\n#cm-imgcheck .cm-imgcheck__choose,\n#cm-imgcheck .cm-imgcheck__choose:visited,\n#cm-imgcheck .cm-imgcheck__choose:hover,\n#cm-imgcheck .cm-imgcheck__choose:focus,\n#cm-imgcheck .cm-imgcheck__choose:active {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 auto;\n\n  min-height: 40px;\n  padding: 9px 16px;\n\n  border: 0 !important;\n  border-radius: 6px;\n\n  appearance: none;\n  -webkit-appearance: none;\n\n  background: var(--cm-blue);\n  color: #fff !important;\n  -webkit-text-fill-color: #fff !important;\n\n  font-family: \"Titillium Web\", Arial, sans-serif;\n  font-size: 15px;\n  font-weight: 700;\n  line-height: 1.4;\n  text-decoration: none !important;\n\n  cursor: pointer;\n  transition: background .15s ease;\n}\n\n#cm-imgcheck .cm-imgcheck__choose:hover {\n  background: #12478f;\n  color: #fff !important;\n  -webkit-text-fill-color: #fff !important;\n}\n\n#cm-imgcheck .cm-imgcheck__choose:focus-visible {\n  outline: 3px solid rgba(24, 90, 188, .22);\n  outline-offset: 2px;\n  color: #fff !important;\n  -webkit-text-fill-color: #fff !important;\n}\n\n#cm-imgcheck .cm-imgcheck__choose:active {\n  color: #fff !important;\n  -webkit-text-fill-color: #fff !important;\n}\n\n\/* Selected-file text *\/\n\n#cm-imgcheck .cm-imgcheck__selection {\n  display: inline-block;\n  flex: 0 0 auto;\n  color: var(--cm-text);\n  font-size: 14px;\n  white-space: nowrap;\n}\n\n\/* Drag and drop help *\/\n\n#cm-imgcheck .cm-imgcheck__drop-note {\n  color: var(--cm-muted);\n  font-size: 14px;\n}\n\n\/* Privacy and status *\/\n\n#cm-imgcheck .cm-imgcheck__privacy,\n#cm-imgcheck .cm-imgcheck__status {\n  margin: 12px 0 0;\n  color: var(--cm-muted);\n  font-size: 13px;\n}\n\n#cm-imgcheck .cm-imgcheck__status {\n  margin-top: 3px;\n}\n\n\/* Results header *\/\n\n#cm-imgcheck .cm-imgcheck__results-top {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: 12px 20px;\n  margin-bottom: 16px;\n}\n\n#cm-imgcheck .cm-imgcheck__clear,\n#cm-imgcheck .cm-imgcheck__remove {\n  padding: 4px 0;\n  border: 0;\n  background: transparent;\n  color: var(--cm-blue);\n  font-weight: 700;\n  cursor: pointer;\n}\n\n#cm-imgcheck .cm-imgcheck__clear:hover,\n#cm-imgcheck .cm-imgcheck__remove:hover {\n  text-decoration: underline;\n}\n\n\/* Summary *\/\n\n#cm-imgcheck .cm-imgcheck__summary {\n  display: grid;\n  grid-template-columns: minmax(120px, auto) minmax(0, 1fr);\n  gap: 2px 22px;\n  align-items: baseline;\n  padding: 18px 20px;\n  border: 1px solid var(--cm-line);\n  border-left: 4px solid var(--cm-green);\n  border-radius: 6px;\n}\n\n#cm-imgcheck .cm-imgcheck__summary[data-status=\"good\"] {\n  border-left-color: #e8b923;\n}\n\n#cm-imgcheck .cm-imgcheck__summary[data-status=\"reduce\"] {\n  border-left-color: #e2711d;\n}\n\n#cm-imgcheck .cm-imgcheck__summary[data-status=\"heavy\"] {\n  border-left-color: #c62828;\n}\n\n#cm-imgcheck .cm-imgcheck__summary strong {\n  grid-row: 1 \/ 3;\n  color: var(--cm-navy);\n  font-size: 34px;\n  font-weight: 700;\n  line-height: 1.05;\n}\n\n#cm-imgcheck .cm-imgcheck__summary span {\n  color: var(--cm-muted);\n  font-size: 13px;\n  font-weight: 700;\n  letter-spacing: .06em;\n  text-transform: uppercase;\n}\n\n#cm-imgcheck .cm-imgcheck__summary p {\n  margin: 2px 0 0;\n  color: var(--cm-text);\n  font-size: 15px;\n  text-wrap: pretty;\n}\n\n#cm-imgcheck .cm-imgcheck__summary[data-status=\"reduce\"] p {\n  color: var(--cm-warning);\n}\n\n#cm-imgcheck .cm-imgcheck__summary[data-status=\"heavy\"] p {\n  color: #a11b1b;\n}\n\n\/* File list *\/\n\n#cm-imgcheck .cm-imgcheck__files {\n  margin-top: 14px;\n  overflow: hidden;\n  border: 1px solid var(--cm-line);\n  border-radius: 6px;\n}\n\n#cm-imgcheck .cm-imgcheck__file {\n  display: grid;\n  grid-template-columns:\n    minmax(0, 1.8fr)\n    minmax(90px, .5fr)\n    minmax(130px, .7fr)\n    auto;\n  gap: 18px;\n  align-items: center;\n  min-height: 64px;\n  padding: 12px 16px;\n  border-top: 1px solid var(--cm-line);\n}\n\n#cm-imgcheck .cm-imgcheck__file:first-child {\n  border-top: 0;\n}\n\n#cm-imgcheck .cm-imgcheck__file-name {\n  min-width: 0;\n}\n\n#cm-imgcheck .cm-imgcheck__file-name strong {\n  display: block;\n  overflow-wrap: anywhere;\n  color: var(--cm-navy);\n  font-size: 15px;\n  font-weight: 600;\n}\n\n#cm-imgcheck .cm-imgcheck__file-name small {\n  display: none;\n}\n\n#cm-imgcheck .cm-imgcheck__file-meta {\n  color: var(--cm-text);\n  font-size: 14px;\n  font-variant-numeric: tabular-nums;\n}\n\n#cm-imgcheck .cm-imgcheck__largest {\n  display: block;\n  margin-top: 3px;\n  color: var(--cm-warning);\n  font-size: 12px;\n  font-weight: 700;\n  text-wrap: pretty;\n}\n\n#cm-imgcheck .cm-imgcheck__remove {\n  justify-self: end;\n}\n\n\/* Tablet *\/\n\n@media (max-width: 760px) {\n  #cm-imgcheck .cm-imgcheck__drop {\n    align-items: flex-start;\n  }\n\n  #cm-imgcheck .cm-imgcheck__selection {\n    white-space: normal;\n  }\n\n  #cm-imgcheck .cm-imgcheck__file {\n    grid-template-columns: minmax(0, 1fr) auto;\n    gap: 4px 12px;\n  }\n\n  #cm-imgcheck .cm-imgcheck__file-name small {\n    display: block;\n    margin-top: 3px;\n    color: var(--cm-muted);\n    font-size: 13px;\n  }\n\n  #cm-imgcheck .cm-imgcheck__file-meta {\n    display: none;\n  }\n\n  #cm-imgcheck .cm-imgcheck__remove {\n    grid-row: 1;\n    grid-column: 2;\n    align-self: center;\n  }\n}\n\n\/* Mobile *\/\n\n@media (max-width: 520px) {\n  #cm-imgcheck .cm-imgcheck__card {\n    padding: 18px;\n  }\n\n  #cm-imgcheck .cm-imgcheck__drop {\n    display: grid;\n    grid-template-columns: 1fr;\n    gap: 10px;\n    padding: 16px;\n  }\n\n  #cm-imgcheck .cm-imgcheck__choose {\n    justify-self: start;\n    color: #fff !important;\n    -webkit-text-fill-color: #fff !important;\n  }\n\n  #cm-imgcheck .cm-imgcheck__selection {\n    white-space: normal;\n  }\n\n  #cm-imgcheck .cm-imgcheck__summary {\n    grid-template-columns: minmax(0, 1fr);\n  }\n\n  #cm-imgcheck .cm-imgcheck__summary strong {\n    grid-row: auto;\n  }\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\n(function () {\n  \"use strict\";\n\n  var ROOT_ID = \"cm-imgcheck\";\n  var INPUT_ID = \"cm-imgcheck-input\";\n  var CHOOSE_ID = \"cm-imgcheck-choose\";\n  var SELECTION_ID = \"cm-imgcheck-selection\";\n  var DROP_ID = \"cm-imgcheck-drop\";\n\n  var KB = 1024;\n  var MB = 1048576;\n  var LIMIT_EXCELLENT = 512000;\n  var LIMIT_HEAVY = 2097152;\n  var LIMIT_FILE = 307200;\n  var LIMIT_WIDTH = 1200;\n\n  var items = [];\n  var nextId = 1;\n\n  function lt(a, b) {\n    if (a === b) { return false; }\n    return Math.min(a, b) === a;\n  }\n\n  function gt(a, b) {\n    return lt(b, a);\n  }\n\n  function pick(id) {\n    return document.getElementById(id);\n  }\n\n  function root() {\n    return pick(ROOT_ID);\n  }\n\n  function note(text) {\n    var el = pick(\"cm-imgcheck-status\");\n    if (el) { el.textContent = text; }\n  }\n\n  function updateSelection() {\n    var el = pick(SELECTION_ID);\n\n    if (!el) { return; }\n\n    if (!items.length) {\n      el.textContent = \"Keine Dateien ausgew\u00e4hlt\";\n    } else if (items.length === 1) {\n      el.textContent = \"1 Datei ausgew\u00e4hlt\";\n    } else {\n      el.textContent = items.length + \" Dateien ausgew\u00e4hlt\";\n    }\n  }\n\n  function safe(fn) {\n    try {\n      fn();\n    } catch (err) {\n      note(\"Bei der Bildpr\u00fcfung ist ein Fehler aufgetreten: \" + err.message);\n\n      if (window.console) {\n        window.console.error(err);\n      }\n    }\n  }\n\n  document.addEventListener(\"click\", function (event) {\n    var choose = pick(CHOOSE_ID);\n\n    if (choose && event.target === choose) {\n      var input = pick(INPUT_ID);\n\n      if (input) {\n        input.click();\n      }\n\n      return;\n    }\n\n    var r = root();\n\n    if (!r || !event.target || !r.contains(event.target)) {\n      return;\n    }\n\n    if (!event.target.closest) {\n      return;\n    }\n\n    var removeButton =\n      event.target.closest(\"[data-cm-image-remove]\");\n\n    if (removeButton) {\n      safe(function () {\n        removeItem(\n          Number(\n            removeButton.getAttribute(\n              \"data-cm-image-remove\"\n            )\n          )\n        );\n      });\n\n      return;\n    }\n\n    if (\n      event.target.closest(\n        \"[data-cm-image-clear]\"\n      )\n    ) {\n      safe(clearItems);\n    }\n  }, false);\n\n  document.addEventListener(\"change\", function (event) {\n    var target = event.target;\n\n    if (\n      !target ||\n      target.id !== INPUT_ID ||\n      !target.files\n    ) {\n      return;\n    }\n\n    safe(function () {\n      addFiles(target.files);\n    });\n  }, false);\n\n  function dropZone(target) {\n    if (!target || !target.closest) {\n      return null;\n    }\n\n    return target.closest(\"#\" + DROP_ID);\n  }\n\n  document.addEventListener(\"dragover\", function (event) {\n    var zone = dropZone(event.target);\n\n    if (!zone) {\n      return;\n    }\n\n    event.preventDefault();\n    zone.setAttribute(\"data-dragging\", \"1\");\n  }, false);\n\n  document.addEventListener(\"dragleave\", function (event) {\n    var zone = dropZone(event.target);\n\n    if (!zone) {\n      return;\n    }\n\n    zone.removeAttribute(\"data-dragging\");\n  }, false);\n\n  document.addEventListener(\"drop\", function (event) {\n    var zone = dropZone(event.target);\n\n    if (!zone) {\n      return;\n    }\n\n    event.preventDefault();\n    zone.removeAttribute(\"data-dragging\");\n\n    if (!event.dataTransfer) {\n      return;\n    }\n\n    safe(function () {\n      addFiles(event.dataTransfer.files);\n    });\n  }, false);\n\n  window.addEventListener(\"pagehide\", function () {\n    items = [];\n  }, false);\n\n  function formatBytes(bytes) {\n    if (lt(bytes, KB)) {\n      return bytes + \" B\";\n    }\n\n    var kb = bytes \/ KB;\n\n    if (lt(kb, 1000)) {\n      if (lt(kb, 10)) {\n        return kb.toFixed(1) + \" KB\";\n      }\n\n      return Math.round(kb) + \" KB\";\n    }\n\n    var mb = bytes \/ MB;\n\n    if (lt(mb, 10)) {\n      return mb.toFixed(2) + \" MB\";\n    }\n\n    return mb.toFixed(1) + \" MB\";\n  }\n\n  function dimensionsText(item) {\n    if (item.dimensionState === \"ready\") {\n      if (item.width === 0) {\n        return \"Skalierbares Bild\";\n      }\n\n      return item.width + \" \\u00d7 \" + item.height + \" px\";\n    }\n\n    if (item.dimensionState === \"error\") {\n      return \"Abmessungen nicht verf\u00fcgbar\";\n    }\n\n    return \"Abmessungen werden gelesen\\u2026\";\n  }\n\n  function fileKey(file) {\n    return [\n      file.name,\n      file.size,\n      file.lastModified,\n      file.type\n    ].join(\"::\");\n  }\n\n  function totalBytes() {\n    return items.reduce(function (sum, item) {\n      return sum + item.file.size;\n    }, 0);\n  }\n\n  function largestItem() {\n    if (!items.length) {\n      return null;\n    }\n\n    return items.reduce(function (largest, item) {\n      if (gt(item.file.size, largest.file.size)) {\n        return item;\n      }\n\n      return largest;\n    });\n  }\n\n  function applyDimensions(item, width, height) {\n    item.width = width;\n    item.height = height;\n    item.dimensionState = \"ready\";\n\n    safe(render);\n  }\n\n  function failDimensions(item) {\n    item.dimensionState = \"error\";\n    safe(render);\n  }\n\n  function readViaImage(item, src, revoke, onFail) {\n    var image = new Image();\n\n    image.onload = function () {\n      var width = image.naturalWidth;\n      var height = image.naturalHeight;\n\n      if (revoke) {\n        URL.revokeObjectURL(src);\n      }\n\n      applyDimensions(item, width, height);\n    };\n\n    image.onerror = function () {\n      if (revoke) {\n        URL.revokeObjectURL(src);\n      }\n\n      onFail();\n    };\n\n    image.src = src;\n  }\n\n  function readViaDataUrl(item) {\n    try {\n      var reader = new FileReader();\n\n      reader.onload = function () {\n        readViaImage(\n          item,\n          reader.result,\n          false,\n          function () {\n            failDimensions(item);\n          }\n        );\n      };\n\n      reader.onerror = function () {\n        failDimensions(item);\n      };\n\n      reader.readAsDataURL(item.file);\n    } catch (err) {\n      failDimensions(item);\n    }\n  }\n\n  function readViaBlobUrl(item) {\n    try {\n      var url = URL.createObjectURL(item.file);\n\n      readViaImage(\n        item,\n        url,\n        true,\n        function () {\n          readViaDataUrl(item);\n        }\n      );\n    } catch (err) {\n      readViaDataUrl(item);\n    }\n  }\n\n  function readDimensions(item) {\n    if (window.createImageBitmap) {\n      try {\n        window.createImageBitmap(item.file).then(\n          function (bitmap) {\n            applyDimensions(\n              item,\n              bitmap.width,\n              bitmap.height\n            );\n\n            if (bitmap.close) {\n              bitmap.close();\n            }\n          },\n          function () {\n            readViaBlobUrl(item);\n          }\n        );\n\n        return;\n      } catch (err) {\n        readViaBlobUrl(item);\n        return;\n      }\n    }\n\n    readViaBlobUrl(item);\n  }\n\n  function addFiles(fileList) {\n    if (!fileList) {\n      return;\n    }\n\n    var existing = {};\n    var added = 0;\n    var skipped = 0;\n    var i;\n\n    items.forEach(function (item) {\n      existing[item.key] = true;\n    });\n\n    for (i = 0; i !== fileList.length; i += 1) {\n      var file = fileList[i];\n\n      if (!file) {\n        continue;\n      }\n\n      if (\n        file.type &&\n        file.type.indexOf(\"image\/\") !== 0\n      ) {\n        skipped += 1;\n        continue;\n      }\n\n      var key = fileKey(file);\n\n      if (existing[key]) {\n        continue;\n      }\n\n      existing[key] = true;\n\n      var item = {\n        id: nextId,\n        key: key,\n        file: file,\n        width: null,\n        height: null,\n        dimensionState: \"loading\"\n      };\n\n      nextId += 1;\n\n      items.push(item);\n      added += 1;\n\n      readDimensions(item);\n    }\n\n    render();\n\n    var input = pick(INPUT_ID);\n\n    if (input) {\n      input.value = \"\";\n    }\n\n    if (skipped) {\n      note(\n        \"Einige Dateien wurden \u00fcbersprungen, da es sich nicht um Bilder handelt.\"\n      );\n      return;\n    }\n\n    if (added) {\n      note(\"\");\n    }\n  }\n\n  function removeItem(id) {\n    items = items.filter(function (item) {\n      return item.id !== id;\n    });\n\n    render();\n  }\n\n  function clearItems() {\n    items = [];\n\n    var input = pick(INPUT_ID);\n\n    if (input) {\n      input.value = \"\";\n    }\n\n    render();\n  }\n\n  function ensure(id, className, parent, tagName) {\n    var el = pick(id);\n\n    if (el) {\n      return el;\n    }\n\n    el = document.createElement(\n      tagName || \"div\"\n    );\n\n    el.id = id;\n\n    if (className) {\n      el.className = className;\n    }\n\n    parent.appendChild(el);\n\n    return el;\n  }\n\n  function render() {\n    var r = root();\n\n    if (!r) {\n      return;\n    }\n\n    updateSelection();\n\n    var results = ensure(\n      \"cm-imgcheck-results\",\n      \"cm-imgcheck__card cm-imgcheck__results\",\n      r\n    );\n\n    var summary = ensure(\n      \"cm-imgcheck-summary\",\n      \"cm-imgcheck__summary\",\n      results\n    );\n\n    var total = ensure(\n      \"cm-imgcheck-total\",\n      null,\n      summary,\n      \"strong\"\n    );\n\n    var count = ensure(\n      \"cm-imgcheck-count\",\n      null,\n      summary,\n      \"span\"\n    );\n\n    var message = ensure(\n      \"cm-imgcheck-message\",\n      null,\n      summary,\n      \"p\"\n    );\n\n    var filesContainer = ensure(\n      \"cm-imgcheck-files\",\n      \"cm-imgcheck__files\",\n      results\n    );\n\n    results.hidden = items.length === 0;\n    filesContainer.innerHTML = \"\";\n\n    if (!items.length) {\n      count.textContent = \"0 Bilder\";\n      total.textContent = \"0 KB\";\n      return;\n    }\n\n    var combined = totalBytes();\n    var largest = largestItem();\n\n    total.textContent = formatBytes(combined);\n\n    if (items.length === 1) {\n      count.textContent = \"1 Bild\";\n    } else {\n      count.textContent =\n        items.length + \" Bilder\";\n    }\n\n    if (lt(combined, LIMIT_EXCELLENT)) {\n      summary.setAttribute(\n        \"data-status\",\n        \"excellent\"\n      );\n\n      message.textContent =\n        \"Ausgezeichnet. Die Gesamtgr\u00f6\u00dfe der Bilder ist gut f\u00fcr E-Mails optimiert.\";\n    } else if (!gt(combined, MB)) {\n      summary.setAttribute(\n        \"data-status\",\n        \"good\"\n      );\n\n      message.textContent =\n        \"Gut. Durch das Verkleinern der gr\u00f6\u00dften Dateien kann die Ladezeit weiter verbessert werden.\";\n    } else if (!gt(combined, LIMIT_HEAVY)) {\n      summary.setAttribute(\n        \"data-status\",\n        \"reduce\"\n      );\n\n      message.textContent =\n        \"Die Bildgr\u00f6\u00dfen sollten reduziert werden. Die ausgew\u00e4hlten Bilder \u00fcberschreiten insgesamt 1 MB. Die gr\u00f6\u00dften Dateien verkleinern oder komprimieren.\";\n    } else {\n      summary.setAttribute(\n        \"data-status\",\n        \"heavy\"\n      );\n\n      message.textContent =\n        \"Zu gro\u00df f\u00fcr E-Mails. Die ausgew\u00e4hlten Bilder \u00fcberschreiten insgesamt 2 MB. Vor dem Einf\u00fcgen in eine E-Mail verkleinern oder komprimieren.\";\n    }\n\n    items.forEach(function (item) {\n      var row = document.createElement(\"div\");\n      row.className = \"cm-imgcheck__file\";\n      row.setAttribute(\"role\", \"listitem\");\n\n      var name = document.createElement(\"div\");\n      name.className =\n        \"cm-imgcheck__file-name\";\n\n      var strong =\n        document.createElement(\"strong\");\n\n      strong.textContent = item.file.name;\n\n      name.appendChild(strong);\n\n      var noteText = null;\n\n      if (\n        item.dimensionState === \"ready\" &&\n        gt(item.width, LIMIT_WIDTH)\n      ) {\n        noteText =\n          \"Unn\u00f6tig gro\u00df: \" +\n          item.width +\n          \" px breit. 600 px reichen f\u00fcr ein Bild \u00fcber die gesamte Breite einer E-Mail aus.\";\n      }\n\n      if (\n        !noteText &&\n        gt(item.file.size, LIMIT_FILE)\n      ) {\n        noteText =\n          \"Gro\u00dfe Einzeldatei. Das Komprimieren dieses Bildes bringt die gr\u00f6\u00dfte Verbesserung.\";\n      }\n\n      if (\n        !noteText &&\n        gt(combined, MB) &&\n        largest &&\n        item.id === largest.id\n      ) {\n        noteText = \"Gr\u00f6\u00dftes Bild\";\n      }\n\n      if (noteText) {\n        var tag =\n          document.createElement(\"span\");\n\n        tag.className =\n          \"cm-imgcheck__largest\";\n\n        tag.textContent = noteText;\n\n        name.appendChild(tag);\n      }\n\n      var mobileMeta =\n        document.createElement(\"small\");\n\n      mobileMeta.textContent =\n        formatBytes(item.file.size) +\n        \" \\u00b7 \" +\n        dimensionsText(item);\n\n      name.appendChild(mobileMeta);\n\n      var size =\n        document.createElement(\"div\");\n\n      size.className =\n        \"cm-imgcheck__file-meta\";\n\n      size.textContent =\n        formatBytes(item.file.size);\n\n      var dimensions =\n        document.createElement(\"div\");\n\n      dimensions.className =\n        \"cm-imgcheck__file-meta\";\n\n      dimensions.textContent =\n        dimensionsText(item);\n\n      var remove =\n        document.createElement(\"button\");\n\n      remove.type = \"button\";\n\n      remove.className =\n        \"cm-imgcheck__remove\";\n\n      remove.setAttribute(\n        \"data-cm-image-remove\",\n        String(item.id)\n      );\n\n      remove.setAttribute(\n        \"aria-label\",\n        item.file.name + \" entfernen\"\n      );\n\n      remove.textContent = \"Entfernen\";\n\n      row.appendChild(name);\n      row.appendChild(size);\n      row.appendChild(dimensions);\n      row.appendChild(remove);\n\n      filesContainer.appendChild(row);\n    });\n  }\n\n  function init() {\n    if (root()) {\n      note(\"Bildpr\u00fcfung bereit.\");\n      safe(render);\n    }\n  }\n\n  safe(init);\n\n  document.addEventListener(\n    \"DOMContentLoaded\",\n    function () {\n      safe(init);\n    },\n    false\n  );\n\n  window.addEventListener(\n    \"load\",\n    function () {\n      safe(init);\n    },\n    false\n  );\n})();\n<\/script>\n\n<section class=\"cm-imgcheck\" id=\"cm-imgcheck\">\n  <div class=\"cm-imgcheck__card\">\n    <span class=\"cm-imgcheck__kicker\">BILDER HINZUF\u00dcGEN<\/span>\n\n    <div class=\"cm-imgcheck__title\" role=\"heading\" aria-level=\"2\">\n      Bilddateien ausw\u00e4hlen oder hier ablegen\n    <\/div>\n\n    <p class=\"cm-imgcheck__lead\">\n      Ein oder mehrere Bilder ausw\u00e4hlen, um die Dateigr\u00f6\u00dfe, die Abmessungen\n      und die Gesamtgr\u00f6\u00dfe anzuzeigen. Bilder \u00fcber die gesamte Breite einer\n      E-Mail sollten h\u00f6chstens 600 px breit sein. F\u00fcr Spalten und kleinere\n      Bereiche reichen in der Regel kleinere Bilder aus.\n    <\/p>\n\n    <div class=\"cm-imgcheck__drop\" id=\"cm-imgcheck-drop\">\n      <input\n        accept=\"image\/*\"\n        autocomplete=\"off\"\n        data-lpignore=\"true\"\n        id=\"cm-imgcheck-input\"\n        class=\"cm-imgcheck__native-input\"\n        multiple\n        type=\"file\"\n        aria-label=\"Bilddateien ausw\u00e4hlen\"\n      >\n\n      <button\n        class=\"cm-imgcheck__choose\"\n        id=\"cm-imgcheck-choose\"\n        type=\"button\">\n        Dateien ausw\u00e4hlen\n      <\/button>\n\n      <span\n        class=\"cm-imgcheck__selection\"\n        id=\"cm-imgcheck-selection\">\n        Keine Dateien ausgew\u00e4hlt\n      <\/span>\n\n      <span class=\"cm-imgcheck__drop-note\">\n        oder hierher ziehen. PNG, JPG, GIF, WebP und SVG.\n      <\/span>\n    <\/div>\n\n    <p class=\"cm-imgcheck__privacy\">\n      Die Bilder werden lokal im Browser verarbeitet. Es wird nichts hochgeladen, gesendet oder gespeichert.\n    <\/p>\n\n    <p\n      class=\"cm-imgcheck__status\"\n      id=\"cm-imgcheck-status\"\n      role=\"status\">\n      Bildpr\u00fcfung wird geladen\u2026\n    <\/p>\n  <\/div>\n\n  <div\n    class=\"cm-imgcheck__card cm-imgcheck__results\"\n    id=\"cm-imgcheck-results\"\n    hidden>\n\n    <div class=\"cm-imgcheck__results-top\">\n      <div>\n        <span class=\"cm-imgcheck__kicker\">AUSGEW\u00c4HLTE BILDER<\/span>\n\n        <div class=\"cm-imgcheck__title\" role=\"heading\" aria-level=\"2\">\n          Bilddateien\n        <\/div>\n      <\/div>\n\n      <button\n        class=\"cm-imgcheck__clear\"\n        data-cm-image-clear=\"true\"\n        type=\"button\">\n        Alle entfernen\n      <\/button>\n    <\/div>\n\n    <div\n      class=\"cm-imgcheck__summary\"\n      data-status=\"excellent\"\n      id=\"cm-imgcheck-summary\"\n      aria-live=\"polite\">\n\n      <strong id=\"cm-imgcheck-total\">0 KB<\/strong>\n      <span id=\"cm-imgcheck-count\">0 Bilder<\/span>\n\n      <p id=\"cm-imgcheck-message\">\n        Die Gesamtgr\u00f6\u00dfe der Bilder ist gut f\u00fcr E-Mails optimiert.\n      <\/p>\n    <\/div>\n\n    <div\n      class=\"cm-imgcheck__files\"\n      id=\"cm-imgcheck-files\"\n      role=\"list\">\n    <\/div>\n  <\/div>\n<\/section>\n","protected":false},"excerpt":{"rendered":"<p>BILDER HINZUF\u00dcGEN Bilddateien ausw\u00e4hlen oder hier ablegen Ein oder mehrere Bilder ausw\u00e4hlen, um die Dateigr\u00f6\u00dfe, die Abmessungen und die Gesamtgr\u00f6\u00dfe anzuzeigen. Bilder \u00fcber die gesamte Breite einer E-Mail sollten h\u00f6chstens 600 px breit sein. F\u00fcr Spalten und kleinere Bereiche reichen in der Regel kleinere Bilder aus. Dateien ausw\u00e4hlen Keine Dateien ausgew\u00e4hlt oder hierher ziehen. PNG, &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/cmacademy.events\/de\/knowledge-base\/groesse-ihrer-bilder-pruefen\/\" class=\"more-link\"><span class=\"screen-reader-text\">\u201eGr\u00f6\u00dfe Ihrer Bilder pr\u00fcfen\u201c<\/span> weiterlesen<\/a><\/p>\n","protected":false},"author":6,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[5915,226],"ht-kb-tag":[],"class_list":["post-21601","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-dateien-und-materialien","ht_kb_category-supportartikel","entry"],"_links":{"self":[{"href":"https:\/\/cmacademy.events\/de\/wp-json\/wp\/v2\/ht-kb\/21601","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cmacademy.events\/de\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/cmacademy.events\/de\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/cmacademy.events\/de\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/cmacademy.events\/de\/wp-json\/wp\/v2\/comments?post=21601"}],"version-history":[{"count":4,"href":"https:\/\/cmacademy.events\/de\/wp-json\/wp\/v2\/ht-kb\/21601\/revisions"}],"predecessor-version":[{"id":23000,"href":"https:\/\/cmacademy.events\/de\/wp-json\/wp\/v2\/ht-kb\/21601\/revisions\/23000"}],"wp:attachment":[{"href":"https:\/\/cmacademy.events\/de\/wp-json\/wp\/v2\/media?parent=21601"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/cmacademy.events\/de\/wp-json\/wp\/v2\/ht-kb-category?post=21601"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/cmacademy.events\/de\/wp-json\/wp\/v2\/ht-kb-tag?post=21601"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}