{"id":1915,"date":"2026-09-10T08:52:56","date_gmt":"2026-09-10T00:52:56","guid":{"rendered":"https:\/\/www.aitoolsoft.com\/?page_id=1915"},"modified":"2026-09-10T08:52:56","modified_gmt":"2026-09-10T00:52:56","slug":"gif-maker","status":"publish","type":"page","link":"https:\/\/www.aitoolsoft.com\/de\/gif-maker.html","title":{"rendered":"GIF-Ersteller"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1915\" class=\"elementor elementor-1915\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-52db6af e-flex e-con-boxed e-con e-parent\" data-id=\"52db6af\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ab66999 elementor-widget elementor-widget-html\" data-id=\"ab66999\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>.ats-tools{--ink:#172033;--muted:#667085;--line:#e5e9f2;--blue:#3567e5;--violet:#7158e8;font-family:Inter,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;color:var(--ink);background:#f6f8fc;line-height:1.6;font-size:16px;padding-bottom:64px}.ats-tools *{box-sizing:border-box}.ats-tools .at-wrap{width:min(1180px,calc(100% - 40px));margin:auto}.ats-tools .at-intro{padding:42px 0 28px}.ats-tools .at-breadcrumb{font-size:14px;color:var(--muted)}.ats-tools a{color:var(--blue);text-underline-offset:3px}.ats-tools h1{font-size:clamp(32px,4vw,48px);line-height:1.12;letter-spacing:-.04em;margin:16px 0;color:var(--ink)}.ats-tools h2{font-size:24px;line-height:1.3;color:var(--ink);margin:0 0 16px}.ats-tools h3{font-size:18px;color:var(--ink)}.ats-tools .at-lead{max-width:760px;color:var(--muted);margin:0}.ats-tools .at-shell{border:1px solid var(--line);border-radius:24px;background:#fff;box-shadow:0 18px 48px #17203309;overflow:hidden}.ats-tools .at-topbar{padding:17px 24px;border-bottom:1px solid var(--line);display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap;background:#fbfcff}.ats-tools .at-private{color:#157253;font-size:14px}.ats-tools .at-workspace{padding:24px;display:grid;grid-template-columns:300px minmax(0,1fr);gap:28px}.ats-tools .at-controls{display:flex;flex-direction:column;gap:16px}.ats-tools label{font-size:14px;font-weight:600;display:block}.ats-tools input:not([type=checkbox]):not([type=range]),.ats-tools select,.ats-tools textarea{display:block;width:100%;font:inherit;color:var(--ink);border:1px solid #cbd4e3;border-radius:10px;background:#fff;padding:10px 12px;min-height:44px;margin-top:6px}.ats-tools input[type=color]{padding:4px!important;height:44px}.ats-tools input[type=range]{width:100%;accent-color:var(--blue);margin:12px 0}.ats-tools input[type=checkbox]{accent-color:var(--blue);width:18px;height:18px;vertical-align:middle;margin-right:8px}.ats-tools textarea{resize:vertical;min-height:200px;font-family:ui-monospace,SFMono-Regular,monospace;font-size:14px;line-height:1.65}.ats-tools button,.ats-tools .at-button{min-height:44px;border:1px solid var(--line);border-radius:10px;padding:10px 16px;font:600 14px\/1.5 Inter,system-ui,sans-serif;cursor:pointer;background:white;color:var(--ink);text-decoration:none;display:inline-flex;justify-content:center;align-items:center;gap:8px}.ats-tools .at-primary{background:linear-gradient(125deg,var(--blue),var(--violet));color:white;border:0}.ats-tools button:disabled{opacity:.45;cursor:not-allowed}.ats-tools :is(button,input,select,textarea,a):focus-visible{outline:3px solid #8da9ff;outline-offset:3px}.ats-tools .at-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.ats-tools .at-stage{display:grid;place-items:center;min-height:340px;padding:24px;border-radius:16px;background:repeating-conic-gradient(#f0f3f8 0 25%,#fff 0 50%) 50%\/20px 20px;border:1px solid var(--line);overflow:auto}.ats-tools canvas,.ats-tools .at-stage img{max-width:100%;max-height:490px;object-fit:contain;width:auto;height:auto}.ats-tools .at-empty{text-align:center;color:var(--muted);max-width:300px}.ats-tools .at-empty span{display:block;font-size:44px;color:var(--blue);margin-bottom:14px}.ats-tools .at-status{font-size:14px;min-height:24px;color:var(--muted);margin:14px 0 0;overflow-wrap:anywhere}.ats-tools .at-status[data-error=true]{color:#b42318}.ats-tools .at-note{font-size:14px;color:var(--muted);margin:0}.ats-tools .at-checks{display:flex;flex-wrap:wrap;gap:12px}.ats-tools .at-output{min-width:0}.ats-tools .at-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}.ats-tools .at-card{padding:18px;border:1px solid var(--line);border-radius:16px;background:#fff;min-width:0}.ats-tools .at-card p{color:var(--muted);font-size:14px}.ats-tools .at-card img{display:block;max-width:100%;height:auto}.ats-tools .at-wide{grid-column:1\/-1}.ats-tools .at-codepair{display:grid;grid-template-columns:1fr 1fr;gap:20px}.ats-tools .at-codepair textarea{min-height:380px}.ats-tools .at-password{font:600 24px\/1.6 ui-monospace,monospace;overflow-wrap:anywhere;white-space:pre-wrap;padding:28px;background:#f5f7fe;border:1px solid var(--line);border-radius:16px;min-height:160px;user-select:all}.ats-tools .at-help{margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:32px}.ats-tools .at-help p,.ats-tools .at-help li{color:var(--muted)}.ats-tools details{padding:14px 0;border-bottom:1px solid var(--line)}.ats-tools summary{cursor:pointer;font-weight:600}.ats-tools .at-related{margin-top:36px}.ats-tools .at-related nav{display:flex;gap:10px;flex-wrap:wrap}.ats-tools .at-related a{font-size:14px;border:1px solid var(--line);border-radius:999px;padding:8px 14px;text-decoration:none;background:white}.ats-tools .at-frame img{height:88px;margin:auto;object-fit:contain}.ats-tools .at-frame .at-actions{gap:5px}.ats-tools .at-frame button{padding:6px 9px}.ats-tools .at-frame-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}.ats-tools [hidden]{display:none!important}.ats-tools .at-drop{padding:18px;border:2px dashed #cbd5ea;border-radius:16px;background:#f8faff}.ats-tools .at-drop.is-over{background:#e9efff;border-color:var(--blue)}.ats-tools progress{width:100%;accent-color:var(--blue)}\n@media(max-width:820px){.ats-tools .at-workspace{grid-template-columns:1fr}.ats-tools .at-controls{display:grid;grid-template-columns:1fr 1fr}.ats-tools .at-controls .at-drop,.ats-tools .at-controls .at-note{grid-column:1\/-1}.ats-tools .at-codepair{grid-template-columns:1fr}.ats-tools .at-codepair textarea{min-height:240px}}\n@media(max-width:540px){.ats-tools .at-wrap{width:calc(100% - 28px)}.ats-tools .at-workspace{padding:16px}.ats-tools .at-controls,.ats-tools .at-help{grid-template-columns:1fr}.ats-tools .at-topbar{padding:16px}.ats-tools .at-stage{min-height:240px;padding:12px}.ats-tools .at-intro{padding-top:28px}.ats-tools .at-password{font-size:18px;padding:18px}}\n\n\/* Match the established background-editor page, without changing tool controls. *\/\n.ats-tools[data-tool]{position:relative;left:50%;width:100vw;max-width:none;margin-left:-50vw;margin-right:-50vw;background:#fff;padding-bottom:0}\n.ats-tools[data-tool]>.at-hero{padding:84px 0 70px;background:radial-gradient(circle at 82% 12%,rgba(113,88,232,.16),transparent 30%),radial-gradient(circle at 15% 86%,rgba(53,103,229,.14),transparent 30%),linear-gradient(145deg,#fbfcff,#f3f6fc)}\n.ats-tools .at-kicker{display:inline-flex;padding:8px 13px;border:1px solid #dce4f5;border-radius:999px;background:#fff;color:#3e5fa8;font-size:14px;font-weight:800;letter-spacing:.055em;text-transform:uppercase}\n.ats-tools[data-tool] h1{max-width:880px;margin:22px 0 18px;color:var(--ink);font-size:clamp(44px,7vw,76px);line-height:1;letter-spacing:-.055em;font-weight:700}\n.ats-tools[data-tool] .at-lead{max-width:760px;font-size:19px;line-height:1.72;margin:0}\n.ats-tools .at-notice{display:inline-flex;margin-top:22px;padding:10px 13px;border-radius:12px;background:#fff;color:#4d5b73;font-size:14px;box-shadow:0 8px 24px rgba(23,32,51,.06)}\n.ats-tools[data-tool]>.at-tool-section,.ats-tools[data-tool]>.at-workflow,.ats-tools[data-tool]>.at-questions{padding:72px 0}\n.ats-tools[data-tool] h2{margin:0 0 12px;font-size:clamp(31px,4vw,48px);letter-spacing:-.04em;line-height:1.2;font-weight:700}\n.ats-tools .at-sub{max-width:720px;margin:0;color:var(--muted);font-size:18px;line-height:1.7}\n.ats-tools[data-tool] .at-shell{margin-top:32px;box-shadow:0 18px 55px rgba(23,32,51,.09)}\n.ats-tools[data-tool] .at-topbar{padding:20px 22px;align-items:center;background:#fbfcfe}\n.ats-tools[data-tool] .at-topbar strong{font-size:18px}\n.ats-tools .at-info-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:30px}\n.ats-tools .at-info-card{padding:25px;border:1px solid var(--line);border-radius:18px;background:#fff}\n.ats-tools .at-info-card h3{display:block;margin:0 0 9px;font-size:18px;line-height:1.5;font-weight:700}\n.ats-tools .at-info-card p{margin:0;color:var(--muted);font-size:16px;line-height:1.65}\n.ats-tools .at-workflow{background:#121b2d;color:#fff}\n.ats-tools .at-workflow h2,.ats-tools .at-workflow h3{color:#fff}\n.ats-tools .at-workflow .at-sub,.ats-tools .at-workflow .at-info-card p{color:#bec7d7}\n.ats-tools .at-workflow .at-info-card{border-color:#2b3850;background:#18243a}\n.ats-tools .at-questions .at-related{margin-top:40px;padding-top:26px;border-top:1px solid var(--line)}\n.ats-tools .at-questions .at-related h3{font-size:18px;margin:0 0 14px}\n.at-runtime-warning{width:min(1180px,calc(100% - 40px));margin:20px auto;padding:14px 16px;border:1px solid #f3c7c2;border-radius:12px;background:#fff4f2;color:#b42318;font:600 14px\/1.5 Inter,system-ui,sans-serif}\n@media(max-width:820px){.ats-tools .at-info-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}\n@media(max-width:580px){.ats-tools[data-tool]>.at-hero{padding:66px 0 54px}.ats-tools[data-tool]>.at-tool-section,.ats-tools[data-tool]>.at-workflow,.ats-tools[data-tool]>.at-questions{padding:56px 0}.ats-tools[data-tool] .at-wrap{width:calc(100% - 28px)}.ats-tools .at-info-grid{grid-template-columns:1fr}.ats-tools[data-tool] .at-topbar{padding:17px}.ats-tools[data-tool] h1{overflow-wrap:break-word}}\n<\/style><main id=\"aitoolsoft-gif-maker\" class=\"ats-tools\" data-tool=\"gif-maker\"><section class=\"at-hero\" aria-labelledby=\"tool-title\"><div class=\"at-wrap\"><span class=\"at-kicker\">Online image tool<\/span><h1 id=\"tool-title\">Bring your still images into motion.<\/h1><p class=\"at-lead\">Combine still images into an animated GIF. Arrange frames, set the timing and export locally without uploading your pictures.<\/p><span class=\"at-notice\">Your images stay on this device while the GIF is created.<\/span><\/div><\/section>\n <section class=\"at-tool-section\" aria-labelledby=\"workspace-title\"><div class=\"at-wrap\"><h2 id=\"workspace-title\">Create the animation you have in mind<\/h2><p class=\"at-sub\">Add your frames, put them in order and choose the pace before creating your GIF.<\/p><div class=\"at-shell\"><div class=\"at-topbar\"><strong>GIF maker<\/strong><span class=\"at-private\">\u25cf Browser-based processing<\/span><\/div><div class=\"at-workspace\"><div class=\"at-controls\"><div class=\"at-drop\"><label for=\"file\">Add images<input id=\"file\" type=\"file\" accept=\"image\/png,image\/jpeg,image\/webp\" multiple><\/label><p class=\"at-note\">2\u201330 images \u00b7 up to 10 MB each<\/p><\/div><label for=\"delay\">Time per frame (ms)<input id=\"delay\" type=\"number\" value=\"300\" min=\"20\" max=\"5000\" step=\"10\"><\/label><label for=\"width\">Maximum width<select id=\"width\"><option value=\"480\">480 px<\/option><option value=\"640\">640 px<\/option><option value=\"800\">800 px<\/option><\/select><\/label><label for=\"colors\">Color palette<select id=\"colors\"><option value=\"256\">256 colors \u00b7 higher detail<\/option><option value=\"128\">128 colors<\/option><option value=\"64\">64 colors \u00b7 smaller file<\/option><\/select><\/label><label><input id=\"loop\" type=\"checkbox\" checked>Loop continuously<\/label><button type=\"button\" id=\"generate\" class=\"at-primary\" disabled>Create GIF<\/button><button type=\"button\" id=\"download\" class=\"\" disabled>Download GIF<\/button><p class=\"at-note\">Up to 30 frames. Output is capped at 800 \u00d7 800 px.<\/p><\/div><div class=\"at-output\"><div id=\"frames\" class=\"at-grid\"><\/div><div id=\"stage\" class=\"at-stage\"><div class=\"at-empty\"><span aria-hidden=\"true\">\u25a7<\/span>Your preview will appear here.<\/div><\/div><progress id=\"progress\" max=\"100\" value=\"0\" hidden aria-label=\"GIF encoding progress\"><\/progress><p id=\"status\" class=\"at-status\" role=\"status\" aria-live=\"polite\">Loading tool\u2026<\/p><\/div><\/div><\/div><\/div><\/section>\n <section class=\"at-workflow\" aria-labelledby=\"workflow-title\"><div class=\"at-wrap\"><h2 id=\"workflow-title\">A focused workflow<\/h2><p class=\"at-sub\">Build a short animation from the images you already have.<\/p><div class=\"at-info-grid\"><article class=\"at-info-card\"><h3>1. Add your frames<\/h3><p>Add between 2 and 30 images.<\/p><\/article><article class=\"at-info-card\"><h3>2. Set order and timing<\/h3><p>Arrange frames and choose animation settings.<\/p><\/article><article class=\"at-info-card\"><h3>3. Preview and download<\/h3><p>Create your GIF, preview it and download.<\/p><\/article><\/div><\/div><\/section>\n <section class=\"at-questions\" aria-labelledby=\"questions-title\"><div class=\"at-wrap\"><h2 id=\"questions-title\">Common questions<\/h2><div class=\"at-info-grid\"><article class=\"at-info-card\"><h3>Can I use video files?<\/h3><p>This tool creates animations from still JPG, PNG and WebP images, not videos.<\/p><\/article><article class=\"at-info-card\"><h3>Why do GIF colors look different?<\/h3><p>GIF uses a limited color palette. Higher palette settings can improve color detail but increase processing time and file size. Transparent areas are flattened onto white.<\/p><\/article><article class=\"at-info-card\"><h3>What are the image and output limits?<\/h3><p>Add 2\u201330 images, up to 10 MB each. Output is capped at 800 \u00d7 800 pixels. Larger animations take longer to process on your device.<\/p><\/article><\/div><div class=\"at-related\"><h3>More online tools<\/h3><nav aria-label=\"Related tools\"><a href=\"https:\/\/www.aitoolsoft.com\/watermark-remover.html\">Watermark remover<\/a><a href=\"https:\/\/www.aitoolsoft.com\/image-background-editor.html\">Background editor<\/a><a href=\"https:\/\/www.aitoolsoft.com\/image-compressor.html\">Image compressor<\/a><a href=\"https:\/\/www.aitoolsoft.com\/image-format-converter.html\">Image converter<\/a><a href=\"https:\/\/www.aitoolsoft.com\/image-cropper.html\">Image cropper<\/a><a href=\"https:\/\/www.aitoolsoft.com\/image-border.html\">Image border<\/a><a href=\"https:\/\/www.aitoolsoft.com\/favicon-generator.html\">Favicon generator<\/a><a href=\"https:\/\/www.aitoolsoft.com\/youtube-thumbnail-generator.html\">YouTube thumbnails<\/a><a href=\"https:\/\/www.aitoolsoft.com\/image-to-base64.html\">Image to Base64<\/a><a href=\"https:\/\/www.aitoolsoft.com\/json-formatter.html\">JSON formatter<\/a><a href=\"https:\/\/www.aitoolsoft.com\/password-generator.html\">Password generator<\/a><a href=\"https:\/\/www.aitoolsoft.com\/qr-generator.html\">QR code generator<\/a><\/nav><\/div><\/div><\/section><\/main><noscript><p class=\"at-runtime-warning\">JavaScript is required to use this tool.<\/p><\/noscript><script>(function(){'use strict';function boot(){const root=document.getElementById('aitoolsoft-gif-maker');if(!root||root.dataset.runtimeReady==='true')return;try{\nconst {GIFEncoder,applyPalette,quantize}=(()=>{var X={signature:\"GIF\",version:\"89a\",trailer:59,extensionIntroducer:33,applicationExtensionLabel:255,graphicControlExtensionLabel:249,imageSeparator:44,signatureSize:3,versionSize:3,globalColorTableFlagMask:128,colorResolutionMask:112,sortFlagMask:8,globalColorTableSizeMask:7,applicationIdentifierSize:8,applicationAuthCodeSize:3,disposalMethodMask:28,userInputFlagMask:2,transparentColorFlagMask:1,localColorTableFlagMask:128,interlaceFlagMask:64,idSortFlagMask:32,localColorTableSizeMask:7};function F(t=256){let e=0,s=new Uint8Array(t);return{get buffer(){return s.buffer},reset(){e=0},bytesView(){return s.subarray(0,e)},bytes(){return s.slice(0,e)},writeByte(r){n(e+1),s[e]=r,e++},writeBytes(r,o=0,i=r.length){n(e+i);for(let c=0;c<i;c++)s[e++]=r[c+o]},writeBytesView(r,o=0,i=r.byteLength){n(e+i),s.set(r.subarray(o,o+i),e),e+=i}};function n(r){var o=s.length;if(o>=r)return;var i=1024*1024;r=Math.max(r,o*(o<i?2:1.125)>>>0),o!=0&&(r=Math.max(r,256));let c=s;s=new Uint8Array(r),e>0&&s.set(c.subarray(0,e),0)}}var O=12,J=5003,lt=[0,1,3,7,15,31,63,127,255,511,1023,2047,4095,8191,16383,32767,65535];function at(t,e,s,n,r=F(512),o=new Uint8Array(256),i=new Int32Array(J),c=new Int32Array(J)){let x=i.length,a=Math.max(2,n);o.fill(0),c.fill(0),i.fill(-1);let l=0,f=0,g=a+1,h=g,b=!1,w=h,_=(1<<w)-1,u=1<<g-1,k=u+1,B=u+2,p=0,A=s[0],z=0;for(let y=x;y<65536;y*=2)++z;z=8-z,r.writeByte(a),I(u);let d=s.length;for(let y=1;y<d;y++){t:{let m=s[y],v=(m<<O)+A,M=m<<z^A;if(i[M]===v){A=c[M];break t}let V=M===0?1:x-M;for(;i[M]>=0;)if(M-=V,M<0&&(M+=x),i[M]===v){A=c[M];break t}I(A),A=m,B<1<<O?(c[M]=B++,i[M]=v):(i.fill(-1),B=u+2,b=!0,I(u))}}return I(A),I(k),r.writeByte(0),r.bytesView();function I(y){for(l&=lt[f],f>0?l|=y<<f:l=y,f+=w;f>=8;)o[p++]=l&255,p>=254&&(r.writeByte(p),r.writeBytesView(o,0,p),p=0),l>>=8,f-=8;if((B>_||b)&&(b?(w=h,_=(1<<w)-1,b=!1):(++w,_=w===O?1<<w:(1<<w)-1)),y==k){for(;f>0;)o[p++]=l&255,p>=254&&(r.writeByte(p),r.writeBytesView(o,0,p),p=0),l>>=8,f-=8;p>0&&(r.writeByte(p),r.writeBytesView(o,0,p),p=0)}}}var $=at;function D(t,e,s){return t<<8&63488|e<<2&992|s>>3}function G(t,e,s,n){return t>>4|e&240|(s&240)<<4|(n&240)<<8}function j(t,e,s){return t>>4<<8|e&240|s>>4}function R(t,e,s){return t<e?e:t>s?s:t}function T(t){return t*t}function tt(t,e,s){var n=0,r=1e100;let o=t[e],i=o.cnt,c=o.ac,x=o.rc,a=o.gc,l=o.bc;for(var f=o.fw;f!=0;f=t[f].fw){let h=t[f],b=h.cnt,w=i*b\/(i+b);if(!(w>=r)){var g=0;s&&(g+=w*T(h.ac-c),g>=r)||(g+=w*T(h.rc-x),!(g>=r)&&(g+=w*T(h.gc-a),!(g>=r)&&(g+=w*T(h.bc-l),!(g>=r)&&(r=g,n=f))))}}o.err=r,o.nn=n}function Q(){return{ac:0,rc:0,gc:0,bc:0,cnt:0,nn:0,fw:0,bk:0,tm:0,mtm:0,err:0}}function ut(t,e){let s=e===\"rgb444\"?4096:65536,n=new Array(s),r=t.length;if(e===\"rgba4444\")for(let o=0;o<r;++o){let i=t[o],c=i>>24&255,x=i>>16&255,a=i>>8&255,l=i&255,f=G(l,a,x,c),g=f in n?n[f]:n[f]=Q();g.rc+=l,g.gc+=a,g.bc+=x,g.ac+=c,g.cnt++}else if(e===\"rgb444\")for(let o=0;o<r;++o){let i=t[o],c=i>>16&255,x=i>>8&255,a=i&255,l=j(a,x,c),f=l in n?n[l]:n[l]=Q();f.rc+=a,f.gc+=x,f.bc+=c,f.cnt++}else for(let o=0;o<r;++o){let i=t[o],c=i>>16&255,x=i>>8&255,a=i&255,l=D(a,x,c),f=l in n?n[l]:n[l]=Q();f.rc+=a,f.gc+=x,f.bc+=c,f.cnt++}return n}function H(t,e,s={}){let{format:n=\"rgb565\",clearAlpha:r=!0,clearAlphaColor:o=0,clearAlphaThreshold:i=0,oneBitAlpha:c=!1}=s;if(!t||!t.buffer)throw new Error(\"quantize() expected RGBA Uint8Array data\");if(!(t instanceof Uint8Array)&&!(t instanceof Uint8ClampedArray))throw new Error(\"quantize() expected RGBA Uint8Array data\");let x=new Uint32Array(t.buffer),a=s.useSqrt!==!1,l=n===\"rgba4444\",f=ut(x,n),g=f.length,h=g-1,b=new Uint32Array(g+1);for(var w=0,u=0;u<g;++u){let C=f[u];if(C!=null){var _=1\/C.cnt;l&&(C.ac*=_),C.rc*=_,C.gc*=_,C.bc*=_,f[w++]=C}}T(e)\/w<.022&&(a=!1);for(var u=0;u<w-1;++u)f[u].fw=u+1,f[u+1].bk=u,a&&(f[u].cnt=Math.sqrt(f[u].cnt));a&&(f[u].cnt=Math.sqrt(f[u].cnt));var k,B,p;for(u=0;u<w;++u){tt(f,u,!1);var A=f[u].err;for(B=++b[0];B>1&&(p=B>>1,!(f[k=b[p]].err<=A));B=p)b[B]=k;b[B]=u}var z=w-e;for(u=0;u<z;){for(var d;;){var I=b[1];if(d=f[I],d.tm>=d.mtm&&f[d.nn].mtm<=d.tm)break;d.mtm==h?I=b[1]=b[b[0]--]:(tt(f,I,!1),d.tm=u);var A=f[I].err;for(B=1;(p=B+B)<=b[0]&&(p<b[0]&&f[b[p]].err>f[b[p+1]].err&&p++,!(A<=f[k=b[p]].err));B=p)b[B]=k;b[B]=I}var y=f[d.nn],m=d.cnt,v=y.cnt,_=1\/(m+v);l&&(d.ac=_*(m*d.ac+v*y.ac)),d.rc=_*(m*d.rc+v*y.rc),d.gc=_*(m*d.gc+v*y.gc),d.bc=_*(m*d.bc+v*y.bc),d.cnt+=y.cnt,d.mtm=++u,f[y.bk].fw=y.fw,f[y.fw].bk=y.bk,y.mtm=h}let M=[];var V=0;for(u=0;;++V){let L=R(Math.round(f[u].rc),0,255),C=R(Math.round(f[u].gc),0,255),Y=R(Math.round(f[u].bc),0,255),E=255;if(l){if(E=R(Math.round(f[u].ac),0,255),c){let st=typeof c==\"number\"?c:127;E=E<=st?0:255}r&&E<=i&&(L=C=Y=o,E=0)}let K=l?[L,C,Y,E]:[L,C,Y];if(xt(M,K)||M.push(K),(u=f[u].fw)==0)break}return M}function xt(t,e){for(let s=0;s<t.length;s++){let n=t[s],r=n[0]===e[0]&&n[1]===e[1]&&n[2]===e[2],o=n.length>=4&&e.length>=4?n[3]===e[3]:!0;if(r&&o)return!0}return!1}function U(t,e){var s=0,n;for(n=0;n<t.length;n++){let r=t[n]-e[n];s+=r*r}return s}function P(t,e){return e>1?Math.round(t\/e)*e:t}function et(t,{roundRGB:e=5,roundAlpha:s=10,oneBitAlpha:n=null}={}){let r=new Uint32Array(t.buffer);for(let o=0;o<r.length;o++){let i=r[o],c=i>>24&255,x=i>>16&255,a=i>>8&255,l=i&255;if(c=P(c,s),n){let f=typeof n==\"number\"?n:127;c=c<=f?0:255}l=P(l,e),a=P(a,e),x=P(x,e),r[o]=c<<24|x<<16|a<<8|l<<0}}function nt(t,e,s=\"rgb565\"){if(!t||!t.buffer)throw new Error(\"quantize() expected RGBA Uint8Array data\");if(!(t instanceof Uint8Array)&&!(t instanceof Uint8ClampedArray))throw new Error(\"quantize() expected RGBA Uint8Array data\");if(e.length>256)throw new Error(\"applyPalette() only works with 256 colors or less\");let n=new Uint32Array(t.buffer),r=n.length,o=s===\"rgb444\"?4096:65536,i=new Uint8Array(r),c=new Array(o),x=s===\"rgba4444\";if(s===\"rgba4444\")for(let a=0;a<r;a++){let l=n[a],f=l>>24&255,g=l>>16&255,h=l>>8&255,b=l&255,w=G(b,h,g,f),_=w in c?c[w]:c[w]=gt(b,h,g,f,e);i[a]=_}else{let a=s===\"rgb444\"?j:D;for(let l=0;l<r;l++){let f=n[l],g=f>>16&255,h=f>>8&255,b=f&255,w=a(b,h,g),_=w in c?c[w]:c[w]=bt(b,h,g,e);i[l]=_}}return i}function gt(t,e,s,n,r){let o=0,i=1e100;for(let c=0;c<r.length;c++){let x=r[c],a=x[3],l=q(a-n);if(l>i)continue;let f=x[0];if(l+=q(f-t),l>i)continue;let g=x[1];if(l+=q(g-e),l>i)continue;let h=x[2];l+=q(h-s),!(l>i)&&(i=l,o=c)}return o}function bt(t,e,s,n){let r=0,o=1e100;for(let i=0;i<n.length;i++){let c=n[i],x=c[0],a=q(x-t);if(a>o)continue;let l=c[1];if(a+=q(l-e),a>o)continue;let f=c[2];a+=q(f-s),!(a>o)&&(o=a,r=i)}return r}function rt(t,e,s=5){if(!t.length||!e.length)return;let n=t.map(i=>i.slice(0,3)),r=s*s,o=t[0].length;for(let i=0;i<e.length;i++){let c=e[i];c.length<o?c=[c[0],c[1],c[2],255]:c.length>o?c=c.slice(0,3):c=c.slice();let x=N(n,c.slice(0,3),U),a=x[0],l=x[1];l>0&&l<=r&&(t[a]=c)}}function q(t){return t*t}function W(t,e,s=U){let n=Infinity,r=-1;for(let o=0;o<t.length;o++){let i=t[o],c=s(e,i);c<n&&(n=c,r=o)}return r}function N(t,e,s=U){let n=Infinity,r=-1;for(let o=0;o<t.length;o++){let i=t[o],c=s(e,i);c<n&&(n=c,r=o)}return[r,n]}function ot(t,e,s=U){return t[W(t,e,s)]}function ct(t={}){let{initialCapacity:e=4096,auto:s=!0}=t,n=F(e),r=5003,o=new Uint8Array(256),i=new Int32Array(r),c=new Int32Array(r),x=!1;return{reset(){n.reset(),x=!1},finish(){n.writeByte(X.trailer)},bytes(){return n.bytes()},bytesView(){return n.bytesView()},get buffer(){return n.buffer},get stream(){return n},writeHeader:a,writeFrame(l,f,g,h={}){let{transparent:b=!1,transparentIndex:w=0,delay:_=0,palette:u=null,repeat:k=0,colorDepth:B=8,dispose:p=-1}=h,A=!1;if(s?x||(A=!0,a(),x=!0):A=Boolean(h.first),f=Math.max(0,Math.floor(f)),g=Math.max(0,Math.floor(g)),A){if(!u)throw new Error(\"First frame must include a { palette } option\");pt(n,f,g,u,B),it(n,u),k>=0&&dt(n,k)}let z=Math.round(_\/10);wt(n,p,z,b,w);let d=Boolean(u)&&!A;ht(n,f,g,d?u:null),d&&it(n,u),yt(n,l,f,g,B,o,i,c)}};function a(){ft(n,\"GIF89a\")}}function wt(t,e,s,n,r){t.writeByte(33),t.writeByte(249),t.writeByte(4),r<0&&(r=0,n=!1);var o,i;n?(o=1,i=2):(o=0,i=0),e>=0&&(i=e&7),i<<=2;let c=0;t.writeByte(0|i|c|o),S(t,s),t.writeByte(r||0),t.writeByte(0)}function pt(t,e,s,n,r=8){let o=1,i=0,c=Z(n.length)-1,x=o<<7|r-1<<4|i<<3|c,a=0,l=0;S(t,e),S(t,s),t.writeBytes([x,a,l])}function dt(t,e){t.writeByte(33),t.writeByte(255),t.writeByte(11),ft(t,\"NETSCAPE2.0\"),t.writeByte(3),t.writeByte(1),S(t,e),t.writeByte(0)}function it(t,e){let s=1<<Z(e.length);for(let n=0;n<s;n++){let r=[0,0,0];n<e.length&&(r=e[n]),t.writeByte(r[0]),t.writeByte(r[1]),t.writeByte(r[2])}}function ht(t,e,s,n){if(t.writeByte(44),S(t,0),S(t,0),S(t,e),S(t,s),n){let r=0,o=0,i=Z(n.length)-1;t.writeByte(128|r|o|0|i)}else t.writeByte(0)}function yt(t,e,s,n,r=8,o,i,c){$(s,n,e,r,t,o,i,c)}function S(t,e){t.writeByte(e&255),t.writeByte(e>>8&255)}function ft(t,e){for(var s=0;s<e.length;s++)t.writeByte(e.charCodeAt(s))}function Z(t){return Math.max(Math.ceil(Math.log2(t)),1)}var Bt=ct;return {GIFEncoder:ct,applyPalette:nt,quantize:H};\n\n\n})();\nfunction youtubeId(input) {\n  const value = input.trim();\n  if (\/^[\\w-]{11}$\/.test(value)) return value;\n  let url; try { url = new URL(\/^https?:\\\/\\\/\/i.test(value) ? value : `https:\/\/${value}`); } catch { throw Error('Enter a YouTube video URL or an 11-character video ID.'); }\n  const host = url.hostname.toLowerCase();\n  let id;\n  if (host === 'youtu.be') id = url.pathname.split('\/')[1];\n  else if (['youtube.com','www.youtube.com','m.youtube.com','music.youtube.com','www.youtube-nocookie.com','youtube-nocookie.com'].includes(host)) {\n    id = url.pathname === '\/watch' ? url.searchParams.get('v') : \/^\\\/(shorts|embed|live)\\\/\/.test(url.pathname) ? url.pathname.split('\/')[2] : '';\n  }\n  if (!\/^[\\w-]{11}$\/.test(id || '')) throw Error('Use a valid YouTube watch, Shorts, embed, or youtu.be link.');\n  return id;\n}\nfunction randomIndex(n, cryptoSource = globalThis.crypto) {\n  if (!Number.isInteger(n) || n < 1) throw Error('Invalid character set.');\n  const ceiling = Math.floor(4294967296 \/ n) * n;\n  const values = new Uint32Array(1);\n  do { cryptoSource.getRandomValues(values); } while (values[0] >= ceiling);\n  return values[0] % n;\n}\nfunction makePassword(length, groups, excludeSimilar = false) {\n  const sets = groups.map(s => excludeSimilar ? s.replace(\/[Il1O0o]\/g, '') : s).filter(Boolean);\n  if (!sets.length) throw Error('Select at least one character type.');\n  if (!Number.isInteger(length) || length < 8 || length > 128) throw Error('Choose a length from 8 to 128.');\n  const alphabet = sets.join('');\n  \/\/ Rejection sampling gives equal probability to every string satisfying the selected types.\n  let password;\n  do { password = Array.from({length}, () => alphabet[randomIndex(alphabet.length)]).join(''); }\n  while (!sets.every(set => [...password].some(c => set.includes(c))));\n  return password;\n}\nfunction formatJSON(text, spaces = 2) {\n  if (text.length > 2_000_000) throw Error('Use JSON smaller than 2 MB.');\n  if (![0,2,4].includes(spaces)) throw Error('Choose 0, 2 or 4 spaces.');\n  const data = JSON.parse(text);\n  \/\/ Preserve numeric lexemes (including integers outside the safe JS range) with a lexical formatter.\n  let out = '', depth = 0, quoted = false, escaped = false, previous = '';\n  const indent = n => ' '.repeat(n * spaces);\n  for (let i = 0; i < text.length; i++) {\n    const c = text[i];\n    if (quoted) { out += c; if (escaped) escaped = false; else if (c === '\\\\') escaped = true; else if (c === '\"') quoted = false; continue; }\n    if (c === '\"') { quoted = true; out += c; previous = c; continue; }\n    if (\/\\s\/.test(c)) continue;\n    if (c === '{' || c === '[') { out += c; depth++; if (spaces && depth > 128) throw Error('This JSON is too deeply nested to format. Try Minify.'); let next=i+1; while (\/\\s\/.test(text[next] || '') && next<text.length) next++; if (spaces && text[next]!=='}' && text[next]!==']') out += '\\n' + indent(depth); }\n    else if (c === '}' || c === ']') { depth--; if (spaces && previous!=='{' && previous!=='[') out += '\\n' + indent(depth); out += c; }\n    else if (c === ',') out += ',' + (spaces ? '\\n' + indent(depth) : '');\n    else if (c === ':') out += ':' + (spaces ? ' ' : '');\n    else out += c;\n    previous = c;\n    if (out.length > 8_000_000) throw Error('Formatted output is too large. Try Minify.');\n  }\n  return {text:out, type:Array.isArray(data)?'array':data===null?'null':typeof data};\n}\nfunction icoFile(pngs) {\n  const header = new Uint8Array(6 + pngs.length * 16); const view = new DataView(header.buffer);\n  view.setUint16(2,1,true); view.setUint16(4,pngs.length,true);\n  let offset = header.length;\n  pngs.forEach(({size,bytes},i) => { const p=6+i*16; view.setUint8(p,size===256?0:size); view.setUint8(p+1,size===256?0:size); view.setUint16(p+4,1,true); view.setUint16(p+6,32,true); view.setUint32(p+8,bytes.length,true); view.setUint32(p+12,offset,true); offset+=bytes.length; });\n  return new Blob([header,...pngs.map(p=>p.bytes)],{type:'image\/x-icon'});\n}\n\n\/\/ Shared, page-local runtime. No analytics, storage or uploads.\nconst $=id=>root.querySelector('#'+id);\nconst status=(message='',error=false)=>{ $('status').textContent=message; $('status').dataset.error=String(error); };\nconst on=(id,event,fn)=>$(id).addEventListener(event,async e=>{try{await fn(e);}catch(error){status(error.message||'Something went wrong. Please try again.',true);}});\nconst enable=(ids,value=true)=>ids.forEach(id=>$(id).disabled=!value);\nconst number=(id,min,max)=>{const n=Number($(id).value);if(!Number.isInteger(n)||n<min||n>max)throw Error(`Choose ${id} between ${min} and ${max}.`);return n;};\nconst canvas=(width,height)=>{if(width*height>30_000_000)throw Error('The resulting image is too large. Use a smaller image.');const c=document.createElement('canvas');c.width=width;c.height=height;return c;};\nconst blob=c=>new Promise((resolve,reject)=>c.toBlob(b=>b?resolve(b):reject(Error('Unable to export this image.')),'image\/png'));\nconst urls=new Set();\nconst objectURL=b=>{const url=URL.createObjectURL(b);urls.add(url);return url;};\nconst release=url=>{if(url){URL.revokeObjectURL(url);urls.delete(url);}};\nconst download=(data,name)=>{const url=objectURL(data),a=document.createElement('a');a.href=url;a.download=name;a.click();setTimeout(()=>release(url),30000);};\nconst copy=async text=>{try{await navigator.clipboard.writeText(text);status('Copied to clipboard.');}catch{throw Error('Clipboard permission was blocked. Select and copy the output manually.');}};\nconst filesize=n=>n<1024?`${n} B`:`${(n\/1024\/1024).toFixed(2)} MB`;\nconst image=async(file,limit=20)=>{if(!file)throw Error('Choose an image first.');if(!\/^image\\\/(png|jpeg|webp)$\/.test(file.type))throw Error('Choose a PNG, JPG or WebP image.');if(file.size>limit*1024*1024)throw Error(`Choose an image smaller than ${limit} MB.`);let img;if('createImageBitmap'in globalThis){img=await createImageBitmap(file);}else{const url=URL.createObjectURL(file);try{img=await new Promise((resolve,reject)=>{const element=new Image;element.onload=()=>resolve(element);element.onerror=()=>reject(Error('Unable to decode this image.'));element.src=url;});img.close=()=>{};}finally{URL.revokeObjectURL(url);}}if(img.width*img.height>24_000_000){img.close();throw Error('Use an image with fewer than 24 million pixels.');}return img;};\nconst readData=file=>new Promise((resolve,reject)=>{const r=new FileReader();r.onload=()=>resolve(r.result);r.onerror=()=>reject(Error('Unable to read this file.'));r.readAsDataURL(file);});\nwindow.addEventListener('pagehide',()=>urls.forEach(url=>URL.revokeObjectURL(url)));\nroot.dataset.runtimeReady='true';\nstatus('Ready.');\n\nif(root.dataset.tool==='image-border'){\n let source,output,version=0;\n const render=()=>{enable(['download'],false);if(!source)return;const border=number('border',0,200),pad=number('padding',0,200),margin=border+pad;c: {output=canvas(source.width+margin*2,source.height+margin*2);const ctx=output.getContext('2d');ctx.fillStyle=$('borderColor').value;ctx.fillRect(0,0,output.width,output.height);ctx.clearRect(border,border,output.width-border*2,output.height-border*2);if(!$('transparent').checked){ctx.fillStyle=$('paddingColor').value;ctx.fillRect(border,border,output.width-border*2,output.height-border*2);}ctx.drawImage(source,margin,margin);$('stage').replaceChildren(output);}enable(['download']);status(`${output.width} \u00d7 ${output.height} px \u00b7 PNG export`);};\n on('file','change',async()=>{const token=++version;enable(['download'],false);source?.close();source=null;const next=await image($('file').files[0]);if(token!==version){next.close();return;}source=next;render();});\n ['border','padding','borderColor','paddingColor','transparent'].forEach(id=>on(id,'input',render));\n on('download','click',async()=>download(await blob(output),'aitoolsoft-bordered.png'));\n}\nif(root.dataset.tool==='favicon-generator'){\n let source,pack=[],ico,version=0,sourceVersion=0;\n const invalidate=()=>{version++;pack.forEach(p=>release(p.url));pack=[];$('icons').replaceChildren();$('markup').value='';enable(['zip','ico'],false);};\n on('file','change',async()=>{invalidate();const token=++sourceVersion;enable(['generate'],false);source?.close();source=null;const next=await image($('file').files[0]);if(token!==sourceVersion){next.close();return;}source=next;enable(['generate']);status('Image ready. Generate your icon pack.');});\n ['transparent','background'].forEach(id=>on(id,'input',()=>{invalidate();status('Settings changed. Generate icons again.');}));\n on('generate','click',async()=>{if(!source)throw Error('Choose an image first.');invalidate();const token=version;enable(['generate'],false);try{const next=[];for(const size of [16,32,48,64,180,192,512]){const c=canvas(size,size),ctx=c.getContext('2d');if(!$('transparent').checked){ctx.fillStyle=$('background').value;ctx.fillRect(0,0,size,size);}const ratio=Math.min(size\/source.width,size\/source.height);ctx.drawImage(source,(size-source.width*ratio)\/2,(size-source.height*ratio)\/2,source.width*ratio,source.height*ratio);const b=await blob(c);if(token!==version)return;next.push({size,blob:b,bytes:new Uint8Array(await b.arrayBuffer())});}if(token!==version)return;pack=next.map(p=>({...p,url:objectURL(p.blob)}));ico=icoFile(pack.filter(p=>p.size<=48));for(const p of pack){const card=document.createElement('div');card.className='at-card';const img=document.createElement('img');img.src=p.url;img.width=Math.min(64,p.size);img.height=Math.min(64,p.size);img.alt=`${p.size}-pixel favicon preview`;const a=document.createElement('a');a.textContent=`Download ${p.size} \u00d7 ${p.size}`;a.href=p.url;a.download=`favicon-${p.size}.png`;card.append(img,a);$('icons').append(card);}$('markup').value='<link rel=\"icon\" href=\"\/favicon.ico\" sizes=\"any\">\\n<link rel=\"icon\" type=\"image\/png\" sizes=\"32x32\" href=\"\/favicon-32.png\">\\n<link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"\/favicon-180.png\">';enable(['zip','ico']);status('7 PNG icons and a multi-size ICO are ready.');}finally{enable(['generate'],!!source);}});\n on('ico','click',()=>download(ico,'favicon.ico'));\n on('zip','click',async()=>{const zip=new JSZip();pack.forEach(p=>zip.file(`favicon-${p.size}.png`,p.bytes));zip.file('favicon.ico',await ico.arrayBuffer());zip.file('installation.txt','Upload the icons to your website root, or adjust the paths below. Add these tags inside your document head.\\n\\n'+$('markup').value);download(await zip.generateAsync({type:'blob'}),'aitoolsoft-favicons.zip');});\n}\nif(root.dataset.tool==='youtube-thumbnail-generator'){\n on('generate','click',()=>{$('thumbnails').replaceChildren();const id=youtubeId($('url').value);for(const [name,file,size]of[['Maximum resolution','maxresdefault','1280 \u00d7 720'],['Standard definition','sddefault','640 \u00d7 480'],['High quality','hqdefault','480 \u00d7 360'],['Medium quality','mqdefault','320 \u00d7 180'],['Default','default','120 \u00d7 90']]){const url=`https:\/\/i.ytimg.com\/vi\/${id}\/${file}.jpg`;const card=document.createElement('div');card.className='at-card';const h=document.createElement('h3');h.textContent=name;const img=document.createElement('img');img.alt=name+' video thumbnail';img.referrerPolicy='no-referrer';const p=document.createElement('p');p.textContent=size+' \u00b7 checking availability';const a=document.createElement('a');a.href=url;a.target='_blank';a.rel='noopener noreferrer';a.textContent='Open image';a.hidden=true;const b=document.createElement('button');b.textContent='Copy image URL';b.disabled=true;b.onclick=()=>copy(url).catch(e=>status(e.message,true));const unavailable=()=>{img.hidden=true;p.textContent='This resolution is unavailable.';};img.onload=()=>{if(file!=='default'&&img.naturalWidth<=120){unavailable();return;}p.textContent=`${img.naturalWidth} \u00d7 ${img.naturalHeight} px`;a.hidden=false;b.disabled=false;};img.onerror=unavailable;img.src=url;card.append(h,img,p,a,b);$('thumbnails').append(card);}status('Open an available image, then use your browser\u2019s save-image command.');});\n}\nif(root.dataset.tool==='image-to-base64'){\n let data='',version=0;\n const render=()=>{if(!data)return;const raw=data.slice(data.indexOf(',')+1);$('result').value=({data,raw,html:`<img decoding=\"async\" src=\"${data}\" alt=\"\">`,css:`background-image: url(\"${data}\");`})[$('format').value];enable(['copy','download']);};\n on('file','change',async()=>{const token=++version;data='';$('result').value='';enable(['copy','download'],false);const f=$('file').files[0];if(!f||!\/^image\\\/(png|jpeg|webp|gif|x-icon|vnd.microsoft.icon)$\/.test(f.type))throw Error('Choose a PNG, JPG, WebP, GIF or ICO image.');if(f.size>10*1024*1024)throw Error('Choose an image smaller than 10 MB.');const next=await readData(f);if(token!==version)return;data=next;render();status(`Source: ${filesize(f.size)} \u00b7 Data URL: ${filesize(data.length)}`);});\n on('format','change',render);on('copy','click',()=>copy($('result').value));on('download','click',()=>download(new Blob([$('result').value],{type:'text\/plain'}),'image-base64.txt'));\n}\nif(root.dataset.tool==='json-formatter'){\n const invalidate=()=>{$('result').value='';enable(['copy','download'],false);status();};\n const run=spaces=>{invalidate();const result=formatJSON($('source').value,spaces);$('result').value=result.text;enable(['copy','download']);status(`Valid JSON \u00b7 ${result.type} \u00b7 ${result.text.length.toLocaleString()} characters`);};\n on('format','click',()=>run(Number($('indent').value)));on('minify','click',()=>run(0));on('source','input',invalidate);on('clear','click',()=>{$('source').value='';$('file').value='';invalidate();});\n on('file','change',async()=>{invalidate();const f=$('file').files[0];if(!f)return;if(f.size>2_000_000)throw Error('Choose a JSON file smaller than 2 MB.');$('source').value=await f.text();status('File loaded. Select Format JSON or Minify.');});\n on('copy','click',()=>copy($('result').value));on('download','click',()=>download(new Blob([$('result').value],{type:'application\/json'}),'formatted.json'));\n}\nif(root.dataset.tool==='password-generator'){\n let password='';\n on('generate','click',()=>{password='';enable(['copy'],false);$('password').textContent='';password=makePassword(number('length',8,128),[['upper','ABCDEFGHIJKLMNOPQRSTUVWXYZ'],['lower','abcdefghijklmnopqrstuvwxyz'],['numbers','0123456789'],['symbols','!@#$%^&*()-_=+[]{};:,.?\/~']].filter(([id])=>$(id).checked).map(([,set])=>set),$('similar').checked);$('password').textContent=password;enable(['copy']);status(`${password.length} characters \u00b7 generated locally`);});\n on('copy','click',()=>copy(password));\n}\nif(root.dataset.tool==='gif-maker'){\n let frames=[],result=null,resultURL='',busy=false;\n const invalidate=()=>{result=null;release(resultURL);resultURL='';enable(['download'],false);$('stage').replaceChildren(Object.assign(document.createElement('p'),{className:'at-empty',textContent:'Create your GIF to see the animated preview.'}));};\n const render=()=>{$('frames').replaceChildren();frames.forEach((frame,i)=>{const card=document.createElement('div');card.className='at-card at-frame';const img=document.createElement('img');img.src=frame.url;img.alt=`Frame ${i+1}`;const name=document.createElement('p');name.className='at-frame-name';name.textContent=`${i+1}. ${frame.name}`;const actions=document.createElement('div');actions.className='at-actions';for(const [label,offset]of[['Move earlier',-1],['Move later',1],['Remove',0]]){const b=document.createElement('button');b.type='button';b.textContent=offset===-1?'\u2190':offset===1?'\u2192':'Remove';b.setAttribute('aria-label',`${label}: frame ${i+1}`);b.disabled=busy||(offset&&(!frames[i+offset]));b.onclick=()=>{if(busy)return;invalidate();if(!offset){frames.splice(i,1);frame.bitmap.close();release(frame.url);}else [frames[i],frames[i+offset]]=[frames[i+offset],frames[i]];render();};actions.append(b);}card.append(img,name,actions);$('frames').append(card);});enable(['generate'],frames.length>=2&&!busy);};\n on('file','change',async()=>{if(busy)return;invalidate();const files=[...$('file').files];if(frames.length+files.length>30)throw Error('Use no more than 30 frames.');busy=true;enable(['generate'],false);$('file').disabled=true;try{for(const f of files){const original=await image(f,10),ratio=Math.min(1,800\/original.width,800\/original.height),c=canvas(Math.max(1,Math.round(original.width*ratio)),Math.max(1,Math.round(original.height*ratio)));c.getContext('2d').drawImage(original,0,0,c.width,c.height);original.close();const preview=await blob(c);frames.push({bitmap:await createImageBitmap(preview),name:f.name,url:objectURL(preview)});}status(`${frames.length} frames ready. Arrange them before creating your GIF.`);}finally{busy=false;$('file').disabled=false;$('file').value='';render();}});\n ['delay','width','colors','loop'].forEach(id=>on(id,'input',invalidate));\n on('generate','click',async()=>{if(busy||frames.length<2)return;const delay=number('delay',20,5000);busy=true;invalidate();const controls=[...root.querySelectorAll('input,select,button')];controls.forEach(el=>el.disabled=true);$('progress').hidden=false;try{const maxW=Math.max(...frames.map(f=>f.bitmap.width)),maxH=Math.max(...frames.map(f=>f.bitmap.height)),ratio=Math.min(1,Number($('width').value)\/maxW,800\/maxH),w=Math.max(1,Math.round(maxW*ratio)),h=Math.max(1,Math.round(maxH*ratio));const c=canvas(w,h),ctx=c.getContext('2d',{willReadFrequently:true}),gif=GIFEncoder();for(let i=0;i<frames.length;i++){status(`Creating frame ${i+1} of ${frames.length}\u2026`);$('progress').value=i\/frames.length*100;await new Promise(resolve=>setTimeout(resolve,15));ctx.fillStyle='#ffffff';ctx.fillRect(0,0,w,h);const img=frames[i].bitmap;ctx.drawImage(img,(w-img.width*ratio)\/2,(h-img.height*ratio)\/2,img.width*ratio,img.height*ratio);const rgba=ctx.getImageData(0,0,w,h).data;const palette=quantize(rgba,Number($('colors').value));gif.writeFrame(applyPalette(rgba,palette),w,h,{palette,delay,repeat:$('loop').checked?0:-1});}gif.finish();result=new Blob([gif.bytes()],{type:'image\/gif'});resultURL=objectURL(result);const preview=document.createElement('img');preview.src=resultURL;preview.alt='Your generated GIF animation';$('stage').replaceChildren(preview);$('progress').value=100;status(`${w} \u00d7 ${h} px \u00b7 ${frames.length} frames \u00b7 ${filesize(result.size)}`);}finally{busy=false;controls.forEach(el=>el.disabled=false);enable(['download'],!!result);render();$('progress').hidden=true;}});\n on('download','click',()=>download(result,'aitoolsoft-animation.gif'));\n}\nif(root.dataset.tool==='qr-generator'){\n let output,svg='';\n const invalidate=()=>{enable(['png','svg'],false);output=null;svg='';};\n ['text','size','level','foreground','background'].forEach(id=>on(id,'input',()=>{invalidate();status('Settings changed. Generate your QR code again.');}));\n on('generate','click',()=>{invalidate();const value=$('text').value;if(!value.trim())throw Error('Enter a link or text.');const fg=$('foreground').value,bg=$('background').value;if(fg===bg)throw Error('Choose different code and background colors.');const qr=qrcode(0,$('level').value);qr.addData(value,'Byte');try{qr.make();}catch{throw Error('This text is too long for the selected error correction. Shorten it or select a lower level.');}const count=qr.getModuleCount(),cell=Math.ceil(Number($('size').value)\/(count+8)),size=(count+8)*cell;output=canvas(size,size);const ctx=output.getContext('2d');ctx.fillStyle=bg;ctx.fillRect(0,0,size,size);ctx.fillStyle=fg;let path='';for(let y=0;y<count;y++)for(let x=0;x<count;x++)if(qr.isDark(y,x)){ctx.fillRect((x+4)*cell,(y+4)*cell,cell,cell);path+=`M${x+4} ${y+4}h1v1h-1z`; }svg=`<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"${size}\" height=\"${size}\" viewBox=\"0 0 ${count+8} ${count+8}\" shape-rendering=\"crispEdges\"><rect width=\"100%\" height=\"100%\" fill=\"${bg}\"\/><path d=\"${path}\" fill=\"${fg}\"\/><\/svg>`;$('stage').replaceChildren(output);enable(['png','svg']);status(`${size} \u00d7 ${size} px \u00b7 Test with your phone before sharing. Use dark code colors on a light background.`);});\n on('png','click',async()=>download(await blob(output),'aitoolsoft-qr.png'));on('svg','click',()=>download(new Blob([svg],{type:'image\/svg+xml'}),'aitoolsoft-qr.svg'));\n}\n\n}catch(error){const status=root.querySelector('#status');if(status){status.textContent='The tool could not start: '+(error&&error.message?error.message:'unknown error');status.dataset.error='true';}console.error('[Aitoolsoft gif-maker]',error);}}if(document.readyState==='loading')document.addEventListener('DOMContentLoaded',boot,{once:true});else boot();})();<\/script>\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>Online image tool Bring your still images into motion. Combine still images into an animated&hellip;<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1915","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.0 (Yoast SEO v28.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>GIF maker | Aitoolsoft<\/title>\n<meta name=\"description\" content=\"Create animated GIFs from multiple images online. Arrange frames, adjust playback timing, preview the animation, and export the finished GIF.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.aitoolsoft.com\/de\/gif-maker.html\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"GIF Maker\" \/>\n<meta property=\"og:description\" content=\"Create animated GIFs from multiple images online. Arrange frames, adjust playback timing, preview the animation, and export the finished GIF.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.aitoolsoft.com\/de\/gif-maker.html\" \/>\n<meta property=\"og:site_name\" content=\"Aitoolsoft\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data1\" content=\"2\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.aitoolsoft.com\\\/gif-maker.html\",\"url\":\"https:\\\/\\\/www.aitoolsoft.com\\\/gif-maker.html\",\"name\":\"GIF maker | Aitoolsoft\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.aitoolsoft.com\\\/#website\"},\"datePublished\":\"2026-09-10T00:52:56+00:00\",\"description\":\"Create animated GIFs from multiple images online. Arrange frames, adjust playback timing, preview the animation, and export the finished GIF.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.aitoolsoft.com\\\/gif-maker.html#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.aitoolsoft.com\\\/gif-maker.html\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.aitoolsoft.com\\\/gif-maker.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\\\/\\\/www.aitoolsoft.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"GIF Maker\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.aitoolsoft.com\\\/#website\",\"url\":\"https:\\\/\\\/www.aitoolsoft.com\\\/\",\"name\":\"Aitoolsoft\",\"description\":\"Focused tools for images, documents, and everyday workflows\u2014online and across Apple devices.\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.aitoolsoft.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.aitoolsoft.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.aitoolsoft.com\\\/#organization\",\"name\":\"Aitoolsoft\",\"url\":\"https:\\\/\\\/www.aitoolsoft.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.aitoolsoft.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\/\\/mlokfggnkpkq.i.optimole.com\\/cb:hL5J.22d\\/w:1583\\/h:504\\/q:mauto\\/f:best\\/https:\\/\\/www.aitoolsoft.com\\/wp-content\\/uploads\\/2025\\/07\\/aitoolsoft_logo.png\",\"contentUrl\":\"https:\\/\\/mlokfggnkpkq.i.optimole.com\\/cb:hL5J.22d\\/w:1583\\/h:504\\/q:mauto\\/f:best\\/https:\\/\\/www.aitoolsoft.com\\/wp-content\\/uploads\\/2025\\/07\\/aitoolsoft_logo.png\",\"width\":1583,\"height\":504,\"caption\":\"Aitoolsoft\"},\"image\":{\"@id\":\"https:\\\/\\\/www.aitoolsoft.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"GIF-Ersteller | Aitoolsoft","description":"Erstellen Sie online animierte GIFs aus mehreren Bildern. Ordnen Sie die Einzelbilder an, passen Sie die Wiedergabezeit an, sehen Sie sich eine Vorschau der Animation an und exportieren Sie das fertige GIF.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.aitoolsoft.com\/de\/gif-maker.html","og_locale":"de_DE","og_type":"article","og_title":"GIF Maker","og_description":"Create animated GIFs from multiple images online. Arrange frames, adjust playback timing, preview the animation, and export the finished GIF.","og_url":"https:\/\/www.aitoolsoft.com\/de\/gif-maker.html","og_site_name":"Aitoolsoft","twitter_card":"summary_large_image","twitter_misc":{"Gesch\u00e4tzte Lesezeit":"2\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.aitoolsoft.com\/gif-maker.html","url":"https:\/\/www.aitoolsoft.com\/gif-maker.html","name":"GIF-Ersteller | Aitoolsoft","isPartOf":{"@id":"https:\/\/www.aitoolsoft.com\/#website"},"datePublished":"2026-09-10T00:52:56+00:00","description":"Erstellen Sie online animierte GIFs aus mehreren Bildern. Ordnen Sie die Einzelbilder an, passen Sie die Wiedergabezeit an, sehen Sie sich eine Vorschau der Animation an und exportieren Sie das fertige GIF.","breadcrumb":{"@id":"https:\/\/www.aitoolsoft.com\/gif-maker.html#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.aitoolsoft.com\/gif-maker.html"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.aitoolsoft.com\/gif-maker.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.aitoolsoft.com\/"},{"@type":"ListItem","position":2,"name":"GIF Maker"}]},{"@type":"WebSite","@id":"https:\/\/www.aitoolsoft.com\/#website","url":"https:\/\/www.aitoolsoft.com\/","name":"Aitoolsoft","description":"Spezialisierte Tools f\u00fcr Bilder, Dokumente und allt\u00e4gliche Arbeitsabl\u00e4ufe \u2013 online und auf allen Apple-Ger\u00e4ten.","publisher":{"@id":"https:\/\/www.aitoolsoft.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.aitoolsoft.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.aitoolsoft.com\/#organization","name":"Aitoolsoft","url":"https:\/\/www.aitoolsoft.com\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.aitoolsoft.com\/#\/schema\/logo\/image\/","url":"https:\/\/mlokfggnkpkq.i.optimole.com\/cb:hL5J.22d\/w:1583\/h:504\/q:mauto\/f:best\/https:\/\/www.aitoolsoft.com\/wp-content\/uploads\/2025\/07\/aitoolsoft_logo.png","contentUrl":"https:\/\/mlokfggnkpkq.i.optimole.com\/cb:hL5J.22d\/w:1583\/h:504\/q:mauto\/f:best\/https:\/\/www.aitoolsoft.com\/wp-content\/uploads\/2025\/07\/aitoolsoft_logo.png","width":1583,"height":504,"caption":"Aitoolsoft"},"image":{"@id":"https:\/\/www.aitoolsoft.com\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.aitoolsoft.com\/de\/wp-json\/wp\/v2\/pages\/1915","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.aitoolsoft.com\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.aitoolsoft.com\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.aitoolsoft.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.aitoolsoft.com\/de\/wp-json\/wp\/v2\/comments?post=1915"}],"version-history":[{"count":1,"href":"https:\/\/www.aitoolsoft.com\/de\/wp-json\/wp\/v2\/pages\/1915\/revisions"}],"predecessor-version":[{"id":1916,"href":"https:\/\/www.aitoolsoft.com\/de\/wp-json\/wp\/v2\/pages\/1915\/revisions\/1916"}],"wp:attachment":[{"href":"https:\/\/www.aitoolsoft.com\/de\/wp-json\/wp\/v2\/media?parent=1915"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}