Resize Image for Instagram — 1080×1080 Square & 1080×1350 Portrait Presets

Instagram crops first and asks questions never. A photo that misses the platform’s shapes gets centre-cropped by the app, and the head, the product or the punchline is gone. This free tool opens with every current Instagram size as a preset — the 1080×1080 square, the tall 1080×1350 portrait, the 1080×566 landscape and the 1080×1920 story frame — so you decide the crop yourself instead of leaving it to the app.

Your image is resized locally in your browser; nothing is uploaded, nothing is watermarked and there is no account to create. Export as JPG for photos (small, fast, exactly what Instagram expects) and post it straight from your phone or desktop.

Instagram sizes, explained once and for all

Every Instagram image is displayed at most 1080 pixels wide; upload anything wider and Instagram downscales it for you, on its own terms. The four shapes that matter: Square, 1080×1080 (1:1) — the classic feed post and the safest choice for carousels. Portrait, 1080×1350 (4:5) — the tallest shape the feed allows; because it occupies the most vertical screen space, it is the strongest format for reach right now. Landscape, 1080×566 (about 1.91:1) — cinematic, but the shortest in the feed, so it is the easiest to scroll past. Story / Reel, 1080×1920 (9:16) — full-screen vertical; use the same size for reel covers so your grid previews line up.

The profile-grid trap nobody warns you about

Your profile grid does not show portrait posts in full: it previews them centre-cropped. A 1080×1350 portrait whose subject sits at the very top or bottom can look decapitated on your grid while looking perfect in the feed. The fix is composition: keep faces, logos and text inside the middle square of the frame when you resize. In this tool, Fill mode centre-crops exactly the way Instagram does, so what you preview here is what the feed — and the grid — will show. If your subject refuses to sit in the middle, choose the square preset instead and let the whole composition breathe.

Fill vs fit on Instagram

Fill is the mode for photographs: it covers the full frame and crops the overflow, so a 3:2 camera photo becomes a clean 4:5 portrait by trimming the sides. Fit is the mode for graphics, screenshots and product shots on white: the whole image stays visible and the leftover space takes the background colour you choose — pick white and a product photo blends seamlessly into a shopping post. Avoid Stretch for anything with people in it; Instagram audiences spot squashed faces instantly. Export JPG at 90–95% quality: Instagram re-compresses everything anyway, and starting from a crisp 1080-wide JPG gives its compressor the least excuse to soften your image.

Carousels and consistency

One more detail worth knowing: in a multi-image carousel, every slide should share the same dimensions, or Instagram crops all of them to the shape of the first. Resize the whole set with the same preset here — it takes seconds per image — and your ten-slide story reads as one designed piece instead of ten accidents. The same applies to a mixed grid strategy: alternating square and portrait posts looks deliberate; random shapes look like leftovers.

Reels covers and the interface safe zone

If you use the 1080×1920 preset for a reel cover, remember that the playing reel covers parts of that frame with interface: the caption and audio credit sit at the bottom, action buttons run down the right side, and your username anchors the lower left. Keep the cover’s title and subject in the calm middle band of the frame — roughly the central 1080×1400 — and nothing important will hide behind a heart icon. The same caution applies to stories with link stickers or polls: compose for the middle, decorate the edges. A cover designed with the safe zone in mind looks deliberate in the grid and survives the player.

Export both shapes when a post matters

For an important post, export the portrait 1080×1350 and the square 1080×1080 and compare them in your gallery before choosing: the portrait wins reach, the square sometimes wins the composition. Ten extra seconds here beats re-posting a correction later.

Related tools

Resize Image to 1080×1080 · Facebook Post Resizer (1200×630) · Versión en español: Redimensionar para Instagram · Online Image Resizer Tool.

Embed this tool on your website — free

Copy the code below to add this working tool to your own page. A small credit link stays with it — that’s all we ask.

<iframe srcdoc="&lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt; &lt;title&gt;Resize Image for Instagram&lt;/title&gt; &lt;style&gt; body{font-family:Arial,sans-serif;background-color:#f4f4f9;padding:16px;margin:0} .container{background:#fff;padding:20px;border-radius:8px;box-shadow:0 0 10px rgba(0,0,0,.1);max-width:680px;margin:0 auto} h2{margin:0 0 6px;color:#0f3d3e;font-size:22px} p.sub{margin:0 0 14px;color:#555;font-size:14px} label{font-weight:600;font-size:14px;display:block;margin:10px 0 4px} input[type=text],input[type=number],select{width:100%;box-sizing:border-box;padding:11px;font-size:16px;border:1px solid #cbd5e1;border-radius:6px;background:#fff} .row{display:flex;gap:10px;flex-wrap:wrap} .row&gt;*{flex:1;min-width:140px} button{background:#0f766e;color:#fff;border:0;padding:11px 22px;font-size:16px;border-radius:6px;cursor:pointer;margin-top:12px} button:hover{background:#115e59} button:disabled{background:#94a3b8;cursor:wait} #status{font-size:13px;color:#666;margin-top:10px;min-height:16px} .err{color:#b91c1c} .card{border:1px solid #e2e8f0;border-radius:8px;padding:12px 14px;margin-top:12px;background:#f8fafc} .big{font-size:26px;font-weight:700;color:#0f3d3e} table{width:100%;border-collapse:collapse;margin-top:10px;font-size:14px} th,td{text-align:left;padding:7px 8px;border-bottom:1px solid #e2e8f0} th{color:#0f3d3e} .bar{height:10px;background:#e2e8f0;border-radius:5px;overflow:hidden} .bar&gt;i{display:block;height:100%;background:#0f766e} img.cover{max-width:120px;border-radius:6px} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class=&quot;container&quot;&gt; &lt;h2&gt;Resize Image for Instagram&lt;/h2&gt; &lt;p class=&quot;sub&quot;&gt;Presets loaded for every Instagram placement: square post, portrait post, landscape post and story. Pick one, upload, download.&lt;/p&gt; &lt;label&gt;1. Choose your image&lt;/label&gt; &lt;input type=&quot;file&quot; id=&quot;file&quot; accept=&quot;image/*&quot;&gt; &lt;div id=&quot;meta&quot; class=&quot;card&quot; style=&quot;display:none&quot;&gt;&lt;/div&gt; &lt;label&gt;2. Pick a size (or type your own below)&lt;/label&gt; &lt;div id=&quot;chips&quot;&gt;&lt;/div&gt; &lt;div class=&quot;row&quot;&gt; &lt;div&gt;&lt;label&gt;Width (px)&lt;/label&gt;&lt;input type=&quot;number&quot; id=&quot;w&quot; min=&quot;1&quot; max=&quot;12000&quot;&gt;&lt;/div&gt; &lt;div&gt;&lt;label&gt;Height (px)&lt;/label&gt;&lt;input type=&quot;number&quot; id=&quot;h&quot; min=&quot;1&quot; max=&quot;12000&quot;&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;row&quot;&gt; &lt;div&gt;&lt;label&gt;How the image fits&lt;/label&gt;&lt;select id=&quot;mode&quot;&gt; &lt;option value=&quot;fill&quot;&gt;Fill — crop to cover the whole frame&lt;/option&gt; &lt;option value=&quot;fit&quot;&gt;Fit — whole image, bars if needed&lt;/option&gt; &lt;option value=&quot;stretch&quot;&gt;Stretch — force exact size (may distort)&lt;/option&gt; &lt;/select&gt;&lt;/div&gt; &lt;div&gt;&lt;label&gt;Bar / background colour (Fit mode)&lt;/label&gt;&lt;select id=&quot;bg&quot;&gt; &lt;option value=&quot;#ffffff&quot;&gt;White&lt;/option&gt; &lt;option value=&quot;#000000&quot;&gt;Black&lt;/option&gt; &lt;option value=&quot;transparent&quot;&gt;Transparent (PNG / WebP)&lt;/option&gt; &lt;/select&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;row&quot;&gt; &lt;div&gt;&lt;label&gt;Download format&lt;/label&gt;&lt;select id=&quot;fmt&quot;&gt; &lt;option value=&quot;image/jpeg&quot;&gt;JPG&lt;/option&gt; &lt;option value=&quot;image/png&quot;&gt;PNG&lt;/option&gt; &lt;option value=&quot;image/webp&quot;&gt;WebP&lt;/option&gt; &lt;/select&gt;&lt;/div&gt; &lt;div&gt;&lt;label&gt;Quality % (JPG / WebP)&lt;/label&gt;&lt;input type=&quot;number&quot; id=&quot;q&quot; min=&quot;30&quot; max=&quot;100&quot; value=&quot;90&quot;&gt;&lt;/div&gt; &lt;/div&gt; &lt;button id=&quot;go&quot; disabled&gt;Resize &amp; preview&lt;/button&gt; &lt;div id=&quot;status&quot;&gt;&lt;/div&gt; &lt;div id=&quot;out&quot; style=&quot;margin-top:12px&quot;&gt;&lt;/div&gt; &lt;/div&gt; &lt;script&gt; function sendH(){ try { parent.postMessage({wpcId: 6428, wpcH: document.body.scrollHeight + 16}, &#x27;*&#x27;); } catch (e) {} } window.addEventListener(&#x27;load&#x27;, sendH); window.addEventListener(&#x27;resize&#x27;, sendH); var T = {&quot;upload&quot;: &quot;1. Choose your image&quot;, &quot;preset&quot;: &quot;2. Pick a size (or type your own below)&quot;, &quot;width&quot;: &quot;Width (px)&quot;, &quot;height&quot;: &quot;Height (px)&quot;, &quot;mode&quot;: &quot;How the image fits&quot;, &quot;fill&quot;: &quot;Fill — crop to cover the whole frame&quot;, &quot;fit&quot;: &quot;Fit — whole image, bars if needed&quot;, &quot;stretch&quot;: &quot;Stretch — force exact size (may distort)&quot;, &quot;bg&quot;: &quot;Bar / background colour (Fit mode)&quot;, &quot;white&quot;: &quot;White&quot;, &quot;black&quot;: &quot;Black&quot;, &quot;transparent&quot;: &quot;Transparent (PNG / WebP)&quot;, &quot;format&quot;: &quot;Download format&quot;, &quot;quality&quot;: &quot;Quality % (JPG / WebP)&quot;, &quot;go&quot;: &quot;Resize &amp; preview&quot;, &quot;meta&quot;: &quot;Original image: {w} × {h} px&quot;, &quot;done&quot;: &quot;Done: {w} × {h} px, about {kb} KB.&quot;, &quot;dl&quot;: &quot;Download&quot;, &quot;err&quot;: &quot;Something went wrong — try a different format.&quot;}; //__CORE_START__ var PRESETS = [{&quot;label&quot;: &quot;Square post 1080×1080&quot;, &quot;w&quot;: 1080, &quot;h&quot;: 1080}, {&quot;label&quot;: &quot;Portrait post 1080×1350 (4:5)&quot;, &quot;w&quot;: 1080, &quot;h&quot;: 1350}, {&quot;label&quot;: &quot;Landscape post 1080×566&quot;, &quot;w&quot;: 1080, &quot;h&quot;: 566}, {&quot;label&quot;: &quot;Story / Reel cover 1080×1920&quot;, &quot;w&quot;: 1080, &quot;h&quot;: 1920}]; function clampDim(v){ v = Math.round(Number(v) || 0); if (v &lt; 1) v = 1; if (v &gt; 12000) v = 12000; return v; } function fitSize(sw, sh, tw, th){ var s = Math.min(tw / sw, th / sh); return { w: Math.max(1, Math.round(sw * s)), h: Math.max(1, Math.round(sh * s)) }; } function fillCrop(sw, sh, tw, th){ var s = Math.max(tw / sw, th / sh); var cw = tw / s, ch = th / s; return { sx: Math.round((sw - cw) / 2), sy: Math.round((sh - ch) / 2), cw: Math.round(cw), ch: Math.round(ch) }; } function fitRect(sw, sh, tw, th){ var f = fitSize(sw, sh, tw, th); return { x: Math.round((tw - f.w) / 2), y: Math.round((th - f.h) / 2), w: f.w, h: f.h }; } function outName(base, w, h, ext){ return (base || &#x27;image&#x27;) + &#x27;-&#x27; + w + &#x27;x&#x27; + h + &#x27;.&#x27; + ext; } //__CORE_END__ var img = new Image(), loaded = false, fname = &#x27;image&#x27;; function $(i){ return document.getElementById(i); } PRESETS.forEach(function(p, i){ var b = document.createElement(&#x27;button&#x27;); b.type = &#x27;button&#x27;; b.textContent = p.label; b.style.margin = &#x27;0 6px 8px 0&#x27;; b.style.padding = &#x27;8px 14px&#x27;; b.style.fontSize = &#x27;14px&#x27;; b.addEventListener(&#x27;click&#x27;, function(){ $(&#x27;w&#x27;).value = p.w; $(&#x27;h&#x27;).value = p.h; }); $(&#x27;chips&#x27;).appendChild(b); if (i === 0){ $(&#x27;w&#x27;).value = p.w; $(&#x27;h&#x27;).value = p.h; } }); $(&#x27;file&#x27;).addEventListener(&#x27;change&#x27;, function(){ var f = this.files[0]; if (!f) return; fname = (f.name || &#x27;image&#x27;).replace(/\.[^.]+$/, &#x27;&#x27;) || &#x27;image&#x27;; var url = URL.createObjectURL(f); img.onload = function(){ loaded = true; $(&#x27;go&#x27;).disabled = false; $(&#x27;meta&#x27;).style.display = &#x27;block&#x27;; $(&#x27;meta&#x27;).innerHTML = T.meta.replace(&#x27;{w}&#x27;, img.naturalWidth).replace(&#x27;{h}&#x27;, img.naturalHeight); sendH(); }; img.src = url; }); $(&#x27;go&#x27;).addEventListener(&#x27;click&#x27;, function(){ if (!loaded) return; var tw = clampDim($(&#x27;w&#x27;).value), th = clampDim($(&#x27;h&#x27;).value); var sw = img.naturalWidth, sh = img.naturalHeight; var cv = document.createElement(&#x27;canvas&#x27;); cv.width = tw; cv.height = th; var cx = cv.getContext(&#x27;2d&#x27;); var mode = $(&#x27;mode&#x27;).value; if (mode === &#x27;stretch&#x27;){ cx.drawImage(img, 0, 0, tw, th); } else if (mode === &#x27;fill&#x27;){ var c = fillCrop(sw, sh, tw, th); cx.drawImage(img, c.sx, c.sy, c.cw, c.ch, 0, 0, tw, th); } else { var bg = $(&#x27;bg&#x27;).value; if (bg !== &#x27;transparent&#x27;){ cx.fillStyle = bg; cx.fillRect(0, 0, tw, th); } var r = fitRect(sw, sh, tw, th); cx.drawImage(img, r.x, r.y, r.w, r.h); } var fmt = $(&#x27;fmt&#x27;).value; var q = Math.min(100, Math.max(30, Number($(&#x27;q&#x27;).value) || 90)) / 100; cv.toBlob(function(blob){ if (!blob){ $(&#x27;status&#x27;).innerHTML = &#x27;&lt;span class=&quot;err&quot;&gt;&#x27; + T.err + &#x27;&lt;/span&gt;&#x27;; return; } var ext = fmt === &#x27;image/png&#x27; ? &#x27;png&#x27; : (fmt === &#x27;image/webp&#x27; ? &#x27;webp&#x27; : &#x27;jpg&#x27;); var name = outName(fname, tw, th, ext); var u = URL.createObjectURL(blob); $(&#x27;out&#x27;).innerHTML = &#x27;&#x27;; var im = document.createElement(&#x27;img&#x27;); im.src = u; im.style.maxWidth = &#x27;100%&#x27;; im.style.border = &#x27;1px solid #e2e8f0&#x27;; im.style.borderRadius = &#x27;6px&#x27;; $(&#x27;out&#x27;).appendChild(im); var p = document.createElement(&#x27;p&#x27;); p.innerHTML = T.done.replace(&#x27;{w}&#x27;, tw).replace(&#x27;{h}&#x27;, th).replace(&#x27;{kb}&#x27;, Math.max(1, Math.round(blob.size / 1024))); $(&#x27;out&#x27;).appendChild(p); var a = document.createElement(&#x27;a&#x27;); a.href = u; a.download = name; a.textContent = T.dl + &#x27; &#x27; + name; a.style.cssText = &#x27;display:inline-block;background:#0f766e;color:#fff;padding:11px 22px;border-radius:6px;text-decoration:none;font-size:16px&#x27;; $(&#x27;out&#x27;).appendChild(a); sendH(); }, fmt, q); }); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; " id="wpc-frame-6428" class="wpc-embed-frame" style="width:100%;border:0;display:block;overflow:hidden;" scrolling="no"></iframe> <p><a href="https://ilmhunt.com/resize-image-for-instagram/" target="_blank" rel="noopener">Resize Image for Instagram — 1080×1080 Square & 1080×1350 Portrait Presets</a> by <a href="https://ilmhunt.com/" target="_blank" rel="noopener">IlmHunt</a> — free online tools</p>