{"id":111,"date":"2026-06-25T09:46:29","date_gmt":"2026-06-25T09:46:29","guid":{"rendered":"https:\/\/toolskit.site\/?page_id=111"},"modified":"2026-06-25T09:46:30","modified_gmt":"2026-06-25T09:46:30","slug":"professional-image-format-converter","status":"publish","type":"page","link":"https:\/\/toolskit.site\/index.php\/professional-image-format-converter\/","title":{"rendered":"Professional Image Format Converter"},"content":{"rendered":"<style>\r\n:root {\r\n  --primary: #10b981;\r\n  --primary-dark: #059669;\r\n  --secondary: #8b5cf6;\r\n  --success: #10b981;\r\n  --warning: #f59e0b;\r\n  --danger: #ef4444;\r\n  --dark: #0f172a;\r\n  --darker: #020617;\r\n  --card: #1e293b;\r\n  --border: #334155;\r\n  --text: #e2e8f0;\r\n  --text-muted: #94a3b8;\r\n}\r\n\r\n#pro-ifc * {\r\n  box-sizing: border-box;\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\n#pro-ifc {\r\n  max-width: 1400px;\r\n  margin: 0 auto;\r\n  padding: 40px 20px;\r\n  background: linear-gradient(135deg, var(--darker) 0%, var(--dark) 100%);\r\n  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\r\n  color: var(--text);\r\n  min-height: 100vh;\r\n}\r\n\r\n#pro-ifc .header {\r\n  text-align: center;\r\n  margin-bottom: 40px;\r\n  animation: fadeInDown 0.6s ease;\r\n}\r\n\r\n#pro-ifc .header h1 {\r\n  font-size: 48px;\r\n  font-weight: 800;\r\n  background: linear-gradient(135deg, var(--primary), var(--secondary));\r\n  -webkit-background-clip: text;\r\n  -webkit-text-fill-color: transparent;\r\n  margin-bottom: 12px;\r\n  letter-spacing: -1px;\r\n}\r\n\r\n#pro-ifc .header p {\r\n  color: var(--text-muted);\r\n  font-size: 18px;\r\n}\r\n\r\n#pro-ifc .container {\r\n  display: grid;\r\n  grid-template-columns: 400px 1fr;\r\n  gap: 30px;\r\n  animation: fadeIn 0.8s ease;\r\n}\r\n\r\n#pro-ifc .sidebar {\r\n  background: var(--card);\r\n  border-radius: 20px;\r\n  padding: 30px;\r\n  border: 1px solid var(--border);\r\n  box-shadow: 0 20px 60px rgba(0,0,0,0.3);\r\n  height: fit-content;\r\n}\r\n\r\n#pro-ifc .main-content {\r\n  background: var(--card);\r\n  border-radius: 20px;\r\n  padding: 30px;\r\n  border: 1px solid var(--border);\r\n  box-shadow: 0 20px 60px rgba(0,0,0,0.3);\r\n}\r\n\r\n#pro-ifc .upload-zone {\r\n  border: 3px dashed var(--border);\r\n  border-radius: 16px;\r\n  padding: 60px 30px;\r\n  text-align: center;\r\n  cursor: pointer;\r\n  transition: all 0.3s ease;\r\n  background: rgba(16, 185, 129, 0.05);\r\n  margin-bottom: 25px;\r\n}\r\n\r\n#pro-ifc .upload-zone:hover,\r\n#pro-ifc .upload-zone.dragover {\r\n  border-color: var(--primary);\r\n  background: rgba(16, 185, 129, 0.1);\r\n  transform: translateY(-2px);\r\n}\r\n\r\n#pro-ifc .upload-zone svg {\r\n  width: 64px;\r\n  height: 64px;\r\n  margin-bottom: 16px;\r\n  color: var(--primary);\r\n}\r\n\r\n#pro-ifc .upload-zone h3 {\r\n  font-size: 20px;\r\n  margin-bottom: 8px;\r\n  color: var(--text);\r\n}\r\n\r\n#pro-ifc .upload-zone p {\r\n  color: var(--text-muted);\r\n  font-size: 14px;\r\n}\r\n\r\n#pro-ifc .section {\r\n  margin-bottom: 25px;\r\n}\r\n\r\n#pro-ifc .section-title {\r\n  font-size: 14px;\r\n  font-weight: 600;\r\n  color: var(--text-muted);\r\n  text-transform: uppercase;\r\n  letter-spacing: 1px;\r\n  margin-bottom: 12px;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n}\r\n\r\n#pro-ifc .input-group {\r\n  margin-bottom: 16px;\r\n}\r\n\r\n#pro-ifc .input-group label {\r\n  display: block;\r\n  font-size: 14px;\r\n  color: var(--text);\r\n  margin-bottom: 8px;\r\n  font-weight: 500;\r\n}\r\n\r\n#pro-ifc .input-group label span {\r\n  color: var(--primary);\r\n  font-weight: 700;\r\n}\r\n\r\n#pro-ifc input[type=\"range\"] {\r\n  width: 100%;\r\n  height: 6px;\r\n  border-radius: 3px;\r\n  background: var(--border);\r\n  outline: none;\r\n  -webkit-appearance: none;\r\n}\r\n\r\n#pro-ifc input[type=\"range\"]::-webkit-slider-thumb {\r\n  -webkit-appearance: none;\r\n  width: 20px;\r\n  height: 20px;\r\n  border-radius: 50%;\r\n  background: linear-gradient(135deg, var(--primary), var(--secondary));\r\n  cursor: pointer;\r\n  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);\r\n  transition: all 0.2s ease;\r\n}\r\n\r\n#pro-ifc input[type=\"range\"]::-webkit-slider-thumb:hover {\r\n  transform: scale(1.2);\r\n}\r\n\r\n#pro-ifc select,\r\n#pro-ifc input[type=\"text\"],\r\n#pro-ifc input[type=\"number\"] {\r\n  width: 100%;\r\n  padding: 12px 16px;\r\n  background: var(--darker);\r\n  border: 1px solid var(--border);\r\n  border-radius: 10px;\r\n  color: var(--text);\r\n  font-size: 14px;\r\n  transition: all 0.3s ease;\r\n}\r\n\r\n#pro-ifc select:focus,\r\n#pro-ifc input:focus {\r\n  outline: none;\r\n  border-color: var(--primary);\r\n  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);\r\n}\r\n\r\n#pro-ifc .checkbox-group {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 10px;\r\n  margin-bottom: 16px;\r\n}\r\n\r\n#pro-ifc .checkbox-group input[type=\"checkbox\"] {\r\n  width: 20px;\r\n  height: 20px;\r\n  accent-color: var(--primary);\r\n  cursor: pointer;\r\n}\r\n\r\n#pro-ifc .checkbox-group label {\r\n  font-size: 14px;\r\n  color: var(--text);\r\n  cursor: pointer;\r\n}\r\n\r\n#pro-ifc .file-list {\r\n  max-height: 400px;\r\n  overflow-y: auto;\r\n  margin-bottom: 20px;\r\n}\r\n\r\n#pro-ifc .file-item {\r\n  background: var(--darker);\r\n  border: 1px solid var(--border);\r\n  border-radius: 12px;\r\n  padding: 16px;\r\n  margin-bottom: 12px;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  transition: all 0.3s ease;\r\n}\r\n\r\n#pro-ifc .file-item:hover {\r\n  border-color: var(--primary);\r\n  transform: translateX(4px);\r\n}\r\n\r\n#pro-ifc .file-info {\r\n  flex: 1;\r\n}\r\n\r\n#pro-ifc .file-name {\r\n  font-size: 14px;\r\n  font-weight: 600;\r\n  color: var(--text);\r\n  margin-bottom: 4px;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n\r\n#pro-ifc .file-size {\r\n  font-size: 12px;\r\n  color: var(--text-muted);\r\n}\r\n\r\n#pro-ifc .file-remove {\r\n  width: 32px;\r\n  height: 32px;\r\n  border-radius: 8px;\r\n  background: var(--danger);\r\n  border: none;\r\n  color: white;\r\n  cursor: pointer;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  transition: all 0.3s ease;\r\n}\r\n\r\n#pro-ifc .file-remove:hover {\r\n  transform: scale(1.1);\r\n  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);\r\n}\r\n\r\n#pro-ifc .btn {\r\n  width: 100%;\r\n  padding: 16px;\r\n  border: none;\r\n  border-radius: 12px;\r\n  font-size: 16px;\r\n  font-weight: 600;\r\n  cursor: pointer;\r\n  transition: all 0.3s ease;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 10px;\r\n  margin-bottom: 12px;\r\n}\r\n\r\n#pro-ifc .btn-primary {\r\n  background: linear-gradient(135deg, var(--primary), var(--primary-dark));\r\n  color: white;\r\n  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.3);\r\n}\r\n\r\n#pro-ifc .btn-primary:hover {\r\n  transform: translateY(-2px);\r\n  box-shadow: 0 12px 32px rgba(16, 185, 129, 0.4);\r\n}\r\n\r\n#pro-ifc .btn-secondary {\r\n  background: var(--darker);\r\n  color: var(--text);\r\n  border: 1px solid var(--border);\r\n}\r\n\r\n#pro-ifc .btn-secondary:hover {\r\n  background: var(--border);\r\n}\r\n\r\n#pro-ifc .btn:disabled {\r\n  opacity: 0.5;\r\n  cursor: not-allowed;\r\n  transform: none !important;\r\n}\r\n\r\n#pro-ifc .stats-grid {\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr 1fr;\r\n  gap: 12px;\r\n  margin-top: 20px;\r\n}\r\n\r\n#pro-ifc .stat-card {\r\n  background: var(--darker);\r\n  border: 1px solid var(--border);\r\n  border-radius: 12px;\r\n  padding: 16px;\r\n  text-align: center;\r\n}\r\n\r\n#pro-ifc .stat-value {\r\n  font-size: 24px;\r\n  font-weight: 700;\r\n  color: var(--primary);\r\n  margin-bottom: 4px;\r\n}\r\n\r\n#pro-ifc .stat-label {\r\n  font-size: 12px;\r\n  color: var(--text-muted);\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.5px;\r\n}\r\n\r\n#pro-ifc .progress-container {\r\n  background: var(--darker);\r\n  border-radius: 12px;\r\n  padding: 20px;\r\n  margin-bottom: 20px;\r\n  display: none;\r\n}\r\n\r\n#pro-ifc .progress-container.show {\r\n  display: block;\r\n}\r\n\r\n#pro-ifc .progress-bar {\r\n  width: 100%;\r\n  height: 8px;\r\n  background: var(--border);\r\n  border-radius: 4px;\r\n  overflow: hidden;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n#pro-ifc .progress-fill {\r\n  height: 100%;\r\n  background: linear-gradient(90deg, var(--primary), var(--secondary));\r\n  width: 0%;\r\n  transition: width 0.3s ease;\r\n  border-radius: 4px;\r\n}\r\n\r\n#pro-ifc .progress-text {\r\n  font-size: 14px;\r\n  color: var(--text-muted);\r\n  text-align: center;\r\n}\r\n\r\n#pro-ifc .empty-state {\r\n  text-align: center;\r\n  padding: 60px 20px;\r\n  color: var(--text-muted);\r\n}\r\n\r\n#pro-ifc .empty-state svg {\r\n  width: 120px;\r\n  height: 120px;\r\n  margin-bottom: 20px;\r\n  opacity: 0.3;\r\n}\r\n\r\n#pro-ifc .toast {\r\n  position: fixed;\r\n  bottom: 30px;\r\n  right: 30px;\r\n  background: var(--success);\r\n  color: white;\r\n  padding: 16px 24px;\r\n  border-radius: 12px;\r\n  box-shadow: 0 10px 40px rgba(0,0,0,0.3);\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 12px;\r\n  transform: translateX(400px);\r\n  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);\r\n  z-index: 10000;\r\n}\r\n\r\n#pro-ifc .toast.show {\r\n  transform: translateX(0);\r\n}\r\n\r\n#pro-ifc .toast.error {\r\n  background: var(--danger);\r\n}\r\n\r\n@keyframes fadeIn {\r\n  from { opacity: 0; }\r\n  to { opacity: 1; }\r\n}\r\n\r\n@keyframes fadeInDown {\r\n  from {\r\n    opacity: 0;\r\n    transform: translateY(-20px);\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n}\r\n\r\n@media (max-width: 1024px) {\r\n  #pro-ifc .container {\r\n    grid-template-columns: 1fr;\r\n  }\r\n  \r\n  #pro-ifc .header h1 {\r\n    font-size: 36px;\r\n  }\r\n}\r\n\r\n@media (max-width: 640px) {\r\n  #pro-ifc {\r\n    padding: 20px 10px;\r\n  }\r\n  \r\n  #pro-ifc .header h1 {\r\n    font-size: 28px;\r\n  }\r\n  \r\n  #pro-ifc .sidebar,\r\n  #pro-ifc .main-content {\r\n    padding: 20px;\r\n  }\r\n  \r\n  #pro-ifc .stats-grid {\r\n    grid-template-columns: 1fr;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<div id=\"pro-ifc\">\r\n  <div class=\"header\">\r\n    <h1>\ud83d\udd04 Professional Image Converter<\/h1>\r\n    <p>Batch convert images between formats with advanced options<\/p>\r\n  <\/div>\r\n\r\n  <div class=\"container\">\r\n    <div class=\"sidebar\">\r\n      <div class=\"upload-zone\" id=\"upload-zone\">\r\n        <svg fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12\"\/>\r\n        <\/svg>\r\n        <h3>Drop images here or click to upload<\/h3>\r\n        <p>Supports batch upload - JPG, PNG, WebP, GIF<\/p>\r\n        <input type=\"file\" id=\"file-input\" accept=\"image\/*\" multiple style=\"display:none;\">\r\n      <\/div>\r\n\r\n      <div class=\"section\">\r\n        <div class=\"section-title\">\u2699\ufe0f Conversion Settings<\/div>\r\n        <div class=\"input-group\">\r\n          <label>Convert To Format<\/label>\r\n          <select id=\"format-select\">\r\n            <option value=\"image\/jpeg\">JPEG (Lossy)<\/option>\r\n            <option value=\"image\/png\">PNG (Lossless)<\/option>\r\n            <option value=\"image\/webp\">WebP (Modern)<\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"input-group\">\r\n          <label>Quality <span id=\"quality-val\">90%<\/span><\/label>\r\n          <input type=\"range\" id=\"quality\" min=\"10\" max=\"100\" value=\"90\">\r\n        <\/div>\r\n\r\n        <div class=\"checkbox-group\">\r\n          <input type=\"checkbox\" id=\"resize-option\">\r\n          <label for=\"resize-option\">Resize Images<\/label>\r\n        <\/div>\r\n\r\n        <div id=\"resize-options\" style=\"display:none;\">\r\n          <div class=\"input-group\">\r\n            <label>Max Width (px)<\/label>\r\n            <input type=\"number\" id=\"max-width\" placeholder=\"e.g., 1920\">\r\n          <\/div>\r\n          <div class=\"input-group\">\r\n            <label>Max Height (px)<\/label>\r\n            <input type=\"number\" id=\"max-height\" placeholder=\"e.g., 1080\">\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"checkbox-group\">\r\n          <input type=\"checkbox\" id=\"strip-meta\" checked>\r\n          <label for=\"strip-meta\">Strip EXIF Metadata<\/label>\r\n        <\/div>\r\n\r\n        <div class=\"input-group\">\r\n          <label>Filename Prefix<\/label>\r\n          <input type=\"text\" id=\"prefix\" placeholder=\"e.g., converted_\">\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <button class=\"btn btn-primary\" id=\"convert-btn\" disabled onclick=\"convertAll()\">\r\n        <svg width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4\"\/>\r\n        <\/svg>\r\n        Convert & Download All\r\n      <\/button>\r\n      <button class=\"btn btn-secondary\" id=\"clear-btn\" disabled onclick=\"clearAll()\">\r\n        <svg width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\"\/>\r\n        <\/svg>\r\n        Clear All Files\r\n      <\/button>\r\n\r\n      <div class=\"stats-grid\">\r\n        <div class=\"stat-card\">\r\n          <div class=\"stat-value\" id=\"total-files\">0<\/div>\r\n          <div class=\"stat-label\">Files<\/div>\r\n        <\/div>\r\n        <div class=\"stat-card\">\r\n          <div class=\"stat-value\" id=\"total-size\">0 KB<\/div>\r\n          <div class=\"stat-label\">Total Size<\/div>\r\n        <\/div>\r\n        <div class=\"stat-card\">\r\n          <div class=\"stat-value\" id=\"converted-count\">0<\/div>\r\n          <div class=\"stat-label\">Converted<\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"main-content\">\r\n      <div class=\"progress-container\" id=\"progress-container\">\r\n        <div class=\"progress-bar\">\r\n          <div class=\"progress-fill\" id=\"progress-fill\"><\/div>\r\n        <\/div>\r\n        <div class=\"progress-text\" id=\"progress-text\">Converting... 0%<\/div>\r\n      <\/div>\r\n\r\n      <div id=\"file-list-container\">\r\n        <div class=\"empty-state\" id=\"empty-state\">\r\n          <svg fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\"\/>\r\n          <\/svg>\r\n          <h3>No files added yet<\/h3>\r\n          <p>Upload images to see them here<\/p>\r\n        <\/div>\r\n        <div class=\"file-list\" id=\"file-list\"><\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<div class=\"toast\" id=\"toast\">\r\n  <svg width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"\/>\r\n  <\/svg>\r\n  <span id=\"toast-message\">Success!<\/span>\r\n<\/div>\r\n\r\n<script>\r\nvar files = [];\r\nvar convertedCount = 0;\r\n\r\nvar uploadZone = document.getElementById('upload-zone');\r\nvar fileInput = document.getElementById('file-input');\r\nvar fileList = document.getElementById('file-list');\r\nvar emptyState = document.getElementById('empty-state');\r\nvar convertBtn = document.getElementById('convert-btn');\r\nvar clearBtn = document.getElementById('clear-btn');\r\nvar progressContainer = document.getElementById('progress-container');\r\nvar progressFill = document.getElementById('progress-fill');\r\nvar progressText = document.getElementById('progress-text');\r\n\r\nuploadZone.addEventListener('click', function() {\r\n  fileInput.click();\r\n});\r\n\r\nuploadZone.addEventListener('dragover', function(e) {\r\n  e.preventDefault();\r\n  uploadZone.classList.add('dragover');\r\n});\r\n\r\nuploadZone.addEventListener('dragleave', function() {\r\n  uploadZone.classList.remove('dragover');\r\n});\r\n\r\nuploadZone.addEventListener('drop', function(e) {\r\n  e.preventDefault();\r\n  uploadZone.classList.remove('dragover');\r\n  addFiles(e.dataTransfer.files);\r\n});\r\n\r\nfileInput.addEventListener('change', function(e) {\r\n  addFiles(e.target.files);\r\n});\r\n\r\ndocument.getElementById('quality').addEventListener('input', function() {\r\n  document.getElementById('quality-val').textContent = this.value + '%';\r\n});\r\n\r\ndocument.getElementById('resize-option').addEventListener('change', function() {\r\n  document.getElementById('resize-options').style.display = this.checked ? 'block' : 'none';\r\n});\r\n\r\nfunction addFiles(newFiles) {\r\n  for (var i = 0; i < newFiles.length; i++) {\r\n    if (newFiles[i].type.startsWith('image\/')) {\r\n      files.push(newFiles[i]);\r\n    }\r\n  }\r\n  renderFileList();\r\n  updateStats();\r\n}\r\n\r\nfunction renderFileList() {\r\n  if (files.length === 0) {\r\n    emptyState.style.display = 'block';\r\n    fileList.innerHTML = '';\r\n    convertBtn.disabled = true;\r\n    clearBtn.disabled = true;\r\n    return;\r\n  }\r\n\r\n  emptyState.style.display = 'none';\r\n  fileList.innerHTML = '';\r\n  convertBtn.disabled = false;\r\n  clearBtn.disabled = false;\r\n\r\n  files.forEach(function(file, index) {\r\n    var div = document.createElement('div');\r\n    div.className = 'file-item';\r\n    div.innerHTML = \r\n      '<div class=\"file-info\">' +\r\n        '<div class=\"file-name\">' + file.name + '<\/div>' +\r\n        '<div class=\"file-size\">' + formatBytes(file.size) + '<\/div>' +\r\n      '<\/div>' +\r\n      '<button class=\"file-remove\" onclick=\"removeFile(' + index + ')\">\u00d7<\/button>';\r\n    fileList.appendChild(div);\r\n  });\r\n}\r\n\r\nfunction removeFile(index) {\r\n  files.splice(index, 1);\r\n  renderFileList();\r\n  updateStats();\r\n}\r\n\r\nfunction clearAll() {\r\n  files = [];\r\n  convertedCount = 0;\r\n  fileInput.value = '';\r\n  renderFileList();\r\n  updateStats();\r\n  showToast('All files cleared');\r\n}\r\n\r\nfunction updateStats() {\r\n  document.getElementById('total-files').textContent = files.length;\r\n  \r\n  var totalSize = 0;\r\n  files.forEach(function(file) {\r\n    totalSize += file.size;\r\n  });\r\n  document.getElementById('total-size').textContent = formatBytes(totalSize);\r\n  \r\n  document.getElementById('converted-count').textContent = convertedCount;\r\n}\r\n\r\nfunction convertAll() {\r\n  if (files.length === 0) return;\r\n\r\n  var format = document.getElementById('format-select').value;\r\n  var quality = document.getElementById('quality').value \/ 100;\r\n  var resize = document.getElementById('resize-option').checked;\r\n  var maxWidth = parseInt(document.getElementById('max-width').value) || 0;\r\n  var maxHeight = parseInt(document.getElementById('max-height').value) || 0;\r\n  var stripMeta = document.getElementById('strip-meta').checked;\r\n  var prefix = document.getElementById('prefix').value;\r\n  var ext = format.split('\/')[1];\r\n\r\n  convertedCount = 0;\r\n  progressContainer.classList.add('show');\r\n  convertBtn.disabled = true;\r\n\r\n  var total = files.length;\r\n  var current = 0;\r\n\r\n  files.forEach(function(file, index) {\r\n    convertFile(file, format, quality, resize, maxWidth, maxHeight, prefix, ext, function() {\r\n      current++;\r\n      convertedCount++;\r\n      var progress = Math.round((current \/ total) * 100);\r\n      progressFill.style.width = progress + '%';\r\n      progressText.textContent = 'Converting... ' + progress + '%';\r\n      updateStats();\r\n\r\n      if (current === total) {\r\n        setTimeout(function() {\r\n          progressContainer.classList.remove('show');\r\n          convertBtn.disabled = false;\r\n          showToast('All ' + total + ' files converted successfully!');\r\n        }, 500);\r\n      }\r\n    });\r\n  });\r\n}\r\n\r\nfunction convertFile(file, format, quality, resize, maxWidth, maxHeight, prefix, ext, callback) {\r\n  var reader = new FileReader();\r\n  reader.onload = function(e) {\r\n    var img = new Image();\r\n    img.onload = function() {\r\n      var canvas = document.createElement('canvas');\r\n      var ctx = canvas.getContext('2d');\r\n\r\n      var width = img.width;\r\n      var height = img.height;\r\n\r\n      if (resize) {\r\n        if (maxWidth && width > maxWidth) {\r\n          height = (height * maxWidth) \/ width;\r\n          width = maxWidth;\r\n        }\r\n        if (maxHeight && height > maxHeight) {\r\n          width = (width * maxHeight) \/ height;\r\n          height = maxHeight;\r\n        }\r\n      }\r\n\r\n      canvas.width = width;\r\n      canvas.height = height;\r\n\r\n      if (format === 'image\/jpeg') {\r\n        ctx.fillStyle = '#ffffff';\r\n        ctx.fillRect(0, 0, width, height);\r\n      }\r\n\r\n      ctx.drawImage(img, 0, 0, width, height);\r\n\r\n      canvas.toBlob(function(blob) {\r\n        var url = URL.createObjectURL(blob);\r\n        var a = document.createElement('a');\r\n        a.href = url;\r\n        var baseName = file.name.replace(\/\\.[^\/.]+$\/, '');\r\n        a.download = prefix + baseName + '.' + ext;\r\n        a.click();\r\n        URL.revokeObjectURL(url);\r\n        callback();\r\n      }, format, quality);\r\n    };\r\n    img.src = e.target.result;\r\n  };\r\n  reader.readAsDataURL(file);\r\n}\r\n\r\nfunction formatBytes(bytes) {\r\n  if (bytes === 0) return '0 B';\r\n  var k = 1024;\r\n  var sizes = ['B', 'KB', 'MB', 'GB'];\r\n  var i = Math.floor(Math.log(bytes) \/ Math.log(k));\r\n  return parseFloat((bytes \/ Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];\r\n}\r\n\r\nfunction showToast(message, type) {\r\n  var toast = document.getElementById('toast');\r\n  var toastMessage = document.getElementById('toast-message');\r\n  \r\n  toastMessage.textContent = message;\r\n  toast.classList.add('show');\r\n  \r\n  if (type === 'error') {\r\n    toast.classList.add('error');\r\n  } else {\r\n    toast.classList.remove('error');\r\n  }\r\n  \r\n  setTimeout(function() {\r\n    toast.classList.remove('show');\r\n  }, 3000);\r\n}\r\n<\/script>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-111","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/toolskit.site\/index.php\/wp-json\/wp\/v2\/pages\/111","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/toolskit.site\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/toolskit.site\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/toolskit.site\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/toolskit.site\/index.php\/wp-json\/wp\/v2\/comments?post=111"}],"version-history":[{"count":1,"href":"https:\/\/toolskit.site\/index.php\/wp-json\/wp\/v2\/pages\/111\/revisions"}],"predecessor-version":[{"id":113,"href":"https:\/\/toolskit.site\/index.php\/wp-json\/wp\/v2\/pages\/111\/revisions\/113"}],"wp:attachment":[{"href":"https:\/\/toolskit.site\/index.php\/wp-json\/wp\/v2\/media?parent=111"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}