{"id":785,"date":"2026-07-20T21:16:35","date_gmt":"2026-07-20T21:16:35","guid":{"rendered":"https:\/\/aizonic.site\/?page_id=785"},"modified":"2026-07-21T07:50:33","modified_gmt":"2026-07-21T07:50:33","slug":"image-converter","status":"publish","type":"page","link":"https:\/\/aizonic.site\/image-converter\/","title":{"rendered":"Image Converter"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"785\" class=\"elementor elementor-785\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-44420e6 e-con-full e-flex e-con e-child\" data-id=\"44420e6\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-23d6288 e-con-full e-flex e-con e-child\" data-id=\"23d6288\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-76110f6 elementor-widget__width-initial elementor-widget elementor-widget-image\" data-id=\"76110f6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/aizonic.site\/wp-content\/uploads\/2026\/07\/icon-image-converter.png\" title=\"icon-image-converter\" alt=\"icon-image-converter\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-07b645b e-con-full e-flex e-con e-child\" data-id=\"07b645b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-4a956ef e-con-full e-flex e-con e-child\" data-id=\"4a956ef\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-108c181 elementor-widget elementor-widget-heading\" data-id=\"108c181\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Image Converter<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-29eb6c9 elementor-widget elementor-widget-heading\" data-id=\"29eb6c9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h6 class=\"elementor-heading-title elementor-size-default\">Convert your image into jpg, png, avif, webp.<\/h6>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1b6ecdc e-flex e-con-boxed e-con e-parent\" data-id=\"1b6ecdc\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f040217 elementor-widget elementor-widget-html\" data-id=\"f040217\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"ic-image-converter\" class=\"ic-wrap\">\n  <style>\n    #ic-image-converter {\n      --ic-bg: #14161a;\n      --ic-panel: #1c1f25;\n      --ic-border: #2c303a;\n      --ic-text: #e9ebf0;\n      --ic-muted: #9aa0ac;\n      --ic-accent: #5eead4;\n      --ic-accent-dim: #1f4b45;\n      --ic-danger: #f97066;\n      font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n      color: var(--ic-text);\n      max-width: 720px;\n      margin: 0 auto;\n      box-sizing: border-box;\n    }\n    #ic-image-converter *, #ic-image-converter *::before, #ic-image-converter *::after {\n      box-sizing: border-box;\n    }\n    .ic-card {\n      background: var(--ic-panel);\n      border: 1px solid var(--ic-border);\n      border-radius: 16px;\n      padding: 28px;\n    }\n    .ic-title {\n      font-size: 20px;\n      font-weight: 700;\n      margin: 0 0 4px;\n      letter-spacing: -0.01em;\n    }\n    .ic-subtitle {\n      font-size: 14px;\n      color: var(--ic-muted);\n      margin: 0 0 20px;\n    }\n    .ic-drop {\n      border: 2px dashed var(--ic-border);\n      border-radius: 12px;\n      padding: 32px 20px;\n      text-align: center;\n      cursor: pointer;\n      transition: border-color .15s ease, background .15s ease;\n    }\n    .ic-drop:hover, .ic-drop.ic-drag {\n      border-color: var(--ic-accent);\n      background: rgba(94, 234, 212, 0.05);\n    }\n    .ic-drop input { display: none; }\n    .ic-drop-icon { font-size: 28px; margin-bottom: 8px; }\n    .ic-drop-text { font-size: 14px; color: var(--ic-text); }\n    .ic-drop-hint { font-size: 12px; color: var(--ic-muted); margin-top: 4px; }\n\n    .ic-controls {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 16px;\n      margin-top: 20px;\n      align-items: flex-end;\n    }\n    .ic-field { flex: 1; min-width: 140px; }\n    .ic-label {\n      display: block;\n      font-size: 12px;\n      color: var(--ic-muted);\n      margin-bottom: 6px;\n      text-transform: uppercase;\n      letter-spacing: 0.04em;\n    }\n    .ic-select, .ic-range {\n      width: 100%;\n    }\n    .ic-select {\n      background: var(--ic-bg);\n      border: 1px solid var(--ic-border);\n      color: var(--ic-text);\n      border-radius: 8px;\n      padding: 9px 10px;\n      font-size: 14px;\n    }\n    .ic-range { accent-color: var(--ic-accent); }\n    .ic-quality-val { font-size: 12px; color: var(--ic-muted); margin-left: 6px; }\n\n    .ic-btn {\n      background: var(--ic-accent);\n      color: #05201c;\n      border: none;\n      border-radius: 8px;\n      padding: 10px 18px;\n      font-size: 14px;\n      font-weight: 600;\n      cursor: pointer;\n      transition: opacity .15s ease;\n    }\n    .ic-btn:hover { opacity: 0.9; }\n    .ic-btn:disabled { opacity: 0.4; cursor: not-allowed; }\n    .ic-btn-ghost {\n      background: transparent;\n      border: 1px solid var(--ic-border);\n      color: var(--ic-text);\n    }\n\n    .ic-list { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }\n    .ic-item {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      background: var(--ic-bg);\n      border: 1px solid var(--ic-border);\n      border-radius: 10px;\n      padding: 10px 12px;\n    }\n    .ic-item img {\n      width: 44px;\n      height: 44px;\n      object-fit: cover;\n      border-radius: 6px;\n      flex-shrink: 0;\n      background: #000;\n    }\n    .ic-item-info { flex: 1; min-width: 0; }\n    .ic-item-name {\n      font-size: 13px;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n    .ic-item-meta { font-size: 12px; color: var(--ic-muted); margin-top: 2px; }\n    .ic-item-status { font-size: 12px; color: var(--ic-accent); white-space: nowrap; }\n    .ic-item-status.ic-error { color: var(--ic-danger); }\n    .ic-item-dl {\n      font-size: 12px;\n      color: var(--ic-accent);\n      text-decoration: none;\n      border: 1px solid var(--ic-accent-dim);\n      padding: 5px 10px;\n      border-radius: 6px;\n      white-space: nowrap;\n    }\n    .ic-item-dl:hover { background: var(--ic-accent-dim); }\n\n    .ic-footer {\n      margin-top: 20px;\n      display: flex;\n      gap: 10px;\n      flex-wrap: wrap;\n    }\n    .ic-note {\n      font-size: 12px;\n      color: var(--ic-muted);\n      margin-top: 14px;\n      line-height: 1.5;\n    }\n  <\/style>\n\n  <div class=\"ic-card\">\n    <p class=\"ic-title\">Image Converter<\/p>\n    <p class=\"ic-subtitle\">Convert images to PNG, JPG, WebP or AVIF \u2014 right in your browser. Nothing is uploaded anywhere.<\/p>\n\n    <label class=\"ic-drop\" id=\"icDrop\">\n      <div class=\"ic-drop-icon\">\u2b06<\/div>\n      <div class=\"ic-drop-text\">Click to choose images, or drag & drop them here<\/div>\n      <div class=\"ic-drop-hint\">Supports PNG, JPG, WebP, GIF, BMP as input<\/div>\n      <input type=\"file\" id=\"icFileInput\" accept=\"image\/*\" multiple>\n    <\/label>\n\n    <div class=\"ic-controls\">\n      <div class=\"ic-field\">\n        <label class=\"ic-label\" for=\"icFormat\">Convert to<\/label>\n        <select class=\"ic-select\" id=\"icFormat\">\n          <option value=\"image\/png\">PNG<\/option>\n          <option value=\"image\/jpeg\" selected>JPG<\/option>\n          <option value=\"image\/webp\">WebP<\/option>\n          <option value=\"image\/avif\">AVIF<\/option>\n        <\/select>\n      <\/div>\n      <div class=\"ic-field\" id=\"icQualityField\">\n        <label class=\"ic-label\" for=\"icQuality\">Quality <span class=\"ic-quality-val\" id=\"icQualityVal\">80%<\/span><\/label>\n        <input class=\"ic-range\" type=\"range\" id=\"icQuality\" min=\"10\" max=\"100\" value=\"80\">\n      <\/div>\n    <\/div>\n\n    <div class=\"ic-footer\">\n      <button class=\"ic-btn\" id=\"icConvertBtn\" disabled>Convert all<\/button>\n      <button class=\"ic-btn ic-btn-ghost\" id=\"icClearBtn\" disabled>Clear<\/button>\n      <button class=\"ic-btn ic-btn-ghost\" id=\"icZipBtn\" disabled>Download all (.zip)<\/button>\n    <\/div>\n\n    <div class=\"ic-list\" id=\"icList\"><\/div>\n\n    <p class=\"ic-note\" id=\"icNote\">\n      AVIF export depends on your visitor's browser (well supported in current Chrome and Firefox; not in older Safari). If AVIF isn't supported, this tool will tell you per-file instead of failing silently.\n    <\/p>\n  <\/div>\n<\/div>\n\n<script>\n(function () {\n  const wrap = document.getElementById('ic-image-converter');\n  const drop = wrap.querySelector('#icDrop');\n  const fileInput = wrap.querySelector('#icFileInput');\n  const formatSel = wrap.querySelector('#icFormat');\n  const qualityRange = wrap.querySelector('#icQuality');\n  const qualityVal = wrap.querySelector('#icQualityVal');\n  const qualityField = wrap.querySelector('#icQualityField');\n  const convertBtn = wrap.querySelector('#icConvertBtn');\n  const clearBtn = wrap.querySelector('#icClearBtn');\n  const zipBtn = wrap.querySelector('#icZipBtn');\n  const list = wrap.querySelector('#icList');\n\n  let items = []; \/\/ { id, file, url, resultBlob, resultUrl, status, ext }\n\n  function extFor(mime) {\n    return { 'image\/png': 'png', 'image\/jpeg': 'jpg', 'image\/webp': 'webp', 'image\/avif': 'avif' }[mime] || 'img';\n  }\n\n  function updateQualityVisibility() {\n    qualityField.style.display = formatSel.value === 'image\/png' ? 'none' : '';\n  }\n  formatSel.addEventListener('change', updateQualityVisibility);\n  updateQualityVisibility();\n\n  qualityRange.addEventListener('input', () => {\n    qualityVal.textContent = qualityRange.value + '%';\n  });\n\n  function humanSize(bytes) {\n    if (bytes < 1024) return bytes + ' B';\n    if (bytes < 1024 * 1024) return (bytes \/ 1024).toFixed(1) + ' KB';\n    return (bytes \/ (1024 * 1024)).toFixed(2) + ' MB';\n  }\n\n  function render() {\n    list.innerHTML = '';\n    items.forEach(item => {\n      const row = document.createElement('div');\n      row.className = 'ic-item';\n\n      const img = document.createElement('img');\n      img.src = item.url;\n      row.appendChild(img);\n\n      const info = document.createElement('div');\n      info.className = 'ic-item-info';\n      const name = document.createElement('div');\n      name.className = 'ic-item-name';\n      name.textContent = item.file.name;\n      const meta = document.createElement('div');\n      meta.className = 'ic-item-meta';\n      meta.textContent = humanSize(item.file.size) + (item.resultBlob ? ' \u2192 ' + humanSize(item.resultBlob.size) : '');\n      info.appendChild(name);\n      info.appendChild(meta);\n      row.appendChild(info);\n\n      if (item.status === 'done' && item.resultUrl) {\n        const a = document.createElement('a');\n        a.className = 'ic-item-dl';\n        a.href = item.resultUrl;\n        a.download = item.file.name.replace(\/\\.[^.]+$\/, '') + '.' + item.ext;\n        a.textContent = 'Download';\n        row.appendChild(a);\n      } else if (item.status === 'error') {\n        const s = document.createElement('span');\n        s.className = 'ic-item-status ic-error';\n        s.textContent = item.errorMsg || 'Failed';\n        row.appendChild(s);\n      } else {\n        const s = document.createElement('span');\n        s.className = 'ic-item-status';\n        s.textContent = item.status === 'converting' ? 'Converting\u2026' : 'Ready';\n        row.appendChild(s);\n      }\n\n      list.appendChild(row);\n    });\n\n    const hasItems = items.length > 0;\n    convertBtn.disabled = !hasItems;\n    clearBtn.disabled = !hasItems;\n    zipBtn.disabled = !items.some(i => i.status === 'done');\n  }\n\n  function addFiles(fileList) {\n    Array.from(fileList).forEach(file => {\n      if (!file.type.startsWith('image\/')) return;\n      items.push({\n        id: Math.random().toString(36).slice(2),\n        file,\n        url: URL.createObjectURL(file),\n        resultBlob: null,\n        resultUrl: null,\n        status: 'ready',\n        ext: null,\n        errorMsg: null\n      });\n    });\n    render();\n  }\n\n  drop.addEventListener('dragover', e => { e.preventDefault(); drop.classList.add('ic-drag'); });\n  drop.addEventListener('dragleave', () => drop.classList.remove('ic-drag'));\n  drop.addEventListener('drop', e => {\n    e.preventDefault();\n    drop.classList.remove('ic-drag');\n    addFiles(e.dataTransfer.files);\n  });\n  fileInput.addEventListener('change', e => addFiles(e.target.files));\n\n  function loadImage(file) {\n    return new Promise((resolve, reject) => {\n      const img = new Image();\n      img.onload = () => resolve(img);\n      img.onerror = reject;\n      img.src = URL.createObjectURL(file);\n    });\n  }\n\n  async function convertOne(item) {\n    item.status = 'converting';\n    render();\n    try {\n      const img = await loadImage(item.file);\n      const canvas = document.createElement('canvas');\n      canvas.width = img.naturalWidth;\n      canvas.height = img.naturalHeight;\n      const ctx = canvas.getContext('2d');\n      \/\/ Flatten transparency onto white for JPG since JPG has no alpha channel\n      if (formatSel.value === 'image\/jpeg') {\n        ctx.fillStyle = '#ffffff';\n        ctx.fillRect(0, 0, canvas.width, canvas.height);\n      }\n      ctx.drawImage(img, 0, 0);\n\n      const mime = formatSel.value;\n      const quality = mime === 'image\/png' ? undefined : Number(qualityRange.value) \/ 100;\n\n      const blob = await new Promise(res => canvas.toBlob(res, mime, quality));\n\n      if (!blob) {\n        throw new Error('unsupported');\n      }\n      \/\/ Some browsers silently fall back to PNG if a format isn't supported.\n      if (mime === 'image\/avif' && blob.type !== 'image\/avif') {\n        item.status = 'error';\n        item.errorMsg = \"Browser can't export AVIF\";\n        render();\n        return;\n      }\n\n      item.resultBlob = blob;\n      item.resultUrl = URL.createObjectURL(blob);\n      item.ext = extFor(mime);\n      item.status = 'done';\n    } catch (err) {\n      item.status = 'error';\n      item.errorMsg = 'Conversion failed';\n    }\n    render();\n  }\n\n  convertBtn.addEventListener('click', async () => {\n    convertBtn.disabled = true;\n    for (const item of items) {\n      await convertOne(item);\n    }\n    convertBtn.disabled = false;\n  });\n\n  clearBtn.addEventListener('click', () => {\n    items.forEach(i => {\n      URL.revokeObjectURL(i.url);\n      if (i.resultUrl) URL.revokeObjectURL(i.resultUrl);\n    });\n    items = [];\n    fileInput.value = '';\n    render();\n  });\n\n  zipBtn.addEventListener('click', () => {\n    \/\/ Lightweight fallback: trigger sequential downloads (no zip library dependency).\n    items.filter(i => i.status === 'done').forEach((item, idx) => {\n      setTimeout(() => {\n        const a = document.createElement('a');\n        a.href = item.resultUrl;\n        a.download = item.file.name.replace(\/\\.[^.]+$\/, '') + '.' + item.ext;\n        document.body.appendChild(a);\n        a.click();\n        document.body.removeChild(a);\n      }, idx * 300);\n    });\n  });\n\n  render();\n})();\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Image Converter Convert your image into jpg, png, avif, webp. Image Converter Convert images to PNG, JPG, WebP or AVIF [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"disabled","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-785","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/aizonic.site\/wp-json\/wp\/v2\/pages\/785","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aizonic.site\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/aizonic.site\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/aizonic.site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/aizonic.site\/wp-json\/wp\/v2\/comments?post=785"}],"version-history":[{"count":11,"href":"https:\/\/aizonic.site\/wp-json\/wp\/v2\/pages\/785\/revisions"}],"predecessor-version":[{"id":804,"href":"https:\/\/aizonic.site\/wp-json\/wp\/v2\/pages\/785\/revisions\/804"}],"wp:attachment":[{"href":"https:\/\/aizonic.site\/wp-json\/wp\/v2\/media?parent=785"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}