[{"data":1,"prerenderedAt":40},["ShallowReactive",2],{"$fiYbh9UGLYGadeWR3UBPC3kHMZ0JzLVijNHcYygkQOXw":3},{"slug":4,"title":5,"description":6,"date":7,"tags":8,"tools":13,"draft":17,"html":18,"toc":19,"minutes":39},"social-media-image-sizes","Instagram, YouTube and LinkedIn Image Sizes, Checked at the Source","The output sizes behind ToolOnTap's Instagram, YouTube and LinkedIn resizers, why they crop to fill instead of fitting, and how the file size warning works.","2026-09-20",[9,10,11,12],"images","social media","canvas","typescript",[14,15,16],"resize-image-for-instagram","youtube-thumbnail-resizer","linkedin-banner-resizer",false,"\u003Cp>Search for “Instagram post size” and you’ll find a dozen tables that don’t agree with each other. Some are years old, some copy each other, and some mix up what a platform recommends with what it accepts. When I added resizers for Instagram, YouTube and LinkedIn to ToolOnTap, I made one rule before writing any code: a size goes in only if I’ve read it on the platform’s own help page, and that page is written in a comment next to the size.\u003C\u002Fp>\n\u003Ch2 id=\"the-sizes-and-the-comment-next-to-each\">The sizes, and the comment next to each\u003C\u002Fh2>\n\u003Cp>All three pages use the same component. Each page passes it a list of sizes and, where the platform sets one, a file size limit. Above the YouTube entry, the comment reads “16:9, 3840×2160 recommended, min width 640, 2 MB on mobile \u002F 50 MB on desktop”, with the address of YouTube’s help page. The entry itself:\u003C\u002Fp>\n\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">preset\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">  sizes\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: [\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    { label: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'HD 1280 × 720'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, width: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">1280\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, height: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">720\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    { label: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'4K 3840 × 2160'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, width: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">3840\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, height: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">2160\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  ],\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">  maxFileKB\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">2000\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">},\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Here is everything the three pages offer, as it stands in the code:\u003C\u002Fp>\n\u003Cdiv class=\"table-wrap\">\u003Ctable>\u003Cthead>\n\u003Ctr>\n\u003Cth>Page\u003C\u002Fth>\n\u003Cth>Sizes (px)\u003C\u002Fth>\n\u003Cth>File size warning\u003C\u002Fth>\n\u003Cth>Source in the code\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>Instagram post\u003C\u002Ftd>\n\u003Ctd>1080 × 1080, 1080 × 1350 (4:5), 1080 × 1440 (3:4), 1080 × 566 (landscape)\u003C\u002Ftd>\n\u003Ctd>none\u003C\u002Ftd>\n\u003Ctd>help.instagram.com\u002F1631821640426723\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>YouTube thumbnail\u003C\u002Ftd>\n\u003Ctd>1280 × 720, 3840 × 2160\u003C\u002Ftd>\n\u003Ctd>over 2 MB\u003C\u002Ftd>\n\u003Ctd>support.google.com\u002Fyoutube\u002Fanswer\u002F72431\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>LinkedIn banner\u003C\u002Ftd>\n\u003Ctd>1584 × 396\u003C\u002Ftd>\n\u003Ctd>over 8 MB\u003C\u002Ftd>\n\u003Ctd>linkedin.com\u002Fhelp\u002Flinkedin\u002Fanswer\u002Fa568217\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\u003C\u002Fdiv>\u003Cp>A few of these numbers need a word.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Instagram’s landscape is 1080 × 566.\u003C\u002Fstrong> Instagram’s help page says feed photos are up to 1080 pixels wide, with shapes from 1.91:1 landscape to 3:4 portrait. 1080 divided by 1.91 is 565.4. Rounding down to 565 would make the photo slightly wider than 1.91:1, outside the allowed range. 566 gives a ratio of about 1.908, just inside it.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>YouTube has two sizes because of two limits.\u003C\u002Fstrong> 3840 × 2160 is what YouTube’s help page recommends. The same page sets a 2 MB limit for thumbnails uploaded from the mobile app, against 50 MB from a computer. A detailed 4K image can easily go over 2 MB as a JPG, so 1280 × 720 stays as the safer choice for people who upload from their phones.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>LinkedIn is one size.\u003C\u002Fstrong> 1584 × 396 is the recommended size for a personal profile background, JPG or PNG under 8 MB.\u003C\u002Fp>\n\u003Cp>Some sizes are missing on purpose. Instagram stories, Facebook covers and WhatsApp profile photos are all popular searches, but I haven’t confirmed their sizes on the platforms’ own pages yet, so they don’t have pages. A comment in the code says exactly that, so nobody adds them from a third-party table by accident.\u003C\u002Fp>\n\u003Ch2 id=\"why-the-resizers-crop-to-fill\">Why the resizers crop to fill\u003C\u002Fh2>\n\u003Cp>There are two ways to get an image into a box of a different shape.\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>Fit\u003C\u002Fstrong>: scale the image until it fits inside the box and keep its shape. Nothing is cut, but the result is smaller than the box in one direction, or it needs bars to fill the gap.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Cover\u003C\u002Fstrong>: scale the image until it fills the box and cut off what sticks out. The result is exactly the box size, and part of the picture is lost.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>ToolOnTap’s general \u003Ca href=\"\u002Fresize-image\">image resizer\u003C\u002Fa> does fit. With “Keep aspect ratio” ticked, a 4000 × 3000 photo resized to a 1080 × 1080 box comes out at 1080 × 810, because it’s scaled by whichever side hits the box first.\u003C\u002Fp>\n\u003Cp>For a social platform, fit is the wrong answer. You asked for a square post and got a 4:3 one. Turning “Keep aspect ratio” off gives you 1080 × 1080, but by stretching the photo, which squashes faces. So the social pages always cover. The crop box is locked to the target’s shape, and you drag it to choose which part is kept. The image arrives in its final shape, so the post shows the framing you chose.\u003C\u002Fp>\n\u003Cp>The LinkedIn banner shows how much cover can cost. The banner is a 4:1 strip. An ordinary 3:2 camera photo cropped to 4:1 keeps its full width but only 37.5% of its height (a quarter of the width, divided by two thirds of it). That’s why the LinkedIn page tells you to pick a photo whose subject sits in a horizontal band.\u003C\u002Fp>\n\u003Ch2 id=\"exact-pixels-from-cropperjs\">Exact pixels from cropperjs\u003C\u002Fh2>\n\u003Cp>The crop box comes from cropperjs, which can return the cropped area at any size you ask for. It rounds that size to match the crop box’s ratio, so the result can be a pixel off. A 1584 × 396 banner that’s actually 1584 × 397 defeats the point of the page. So after asking cropperjs for the canvas, the shared cropper component checks the result and redraws it at the exact size when it doesn’t match:\u003C\u002Fp>\n\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#cb2431;--shiki-dark:#F97583\">if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> (canvas.width \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#cb2431;--shiki-dark:#F97583\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> size.width \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#cb2431;--shiki-dark:#F97583\">&&\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> canvas.height \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#cb2431;--shiki-dark:#F97583\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> size.height) \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#cb2431;--shiki-dark:#F97583\">return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> canvas\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#57606a;--shiki-dark:#8b949e\">\u002F\u002F cropperjs rounds to the crop box ratio; redraw so exact sizes (passport photos) are exact\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#cb2431;--shiki-dark:#F97583\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> exact\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#cb2431;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> createCanvas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(size.width, size.height)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">exact.ctx.imageSmoothingQuality \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#cb2431;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> 'high'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">exact.ctx.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">drawImage\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(canvas, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, size.width, size.height)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#cb2431;--shiki-dark:#F97583\">return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> exact.canvas\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>A 1-pixel stretch is invisible, and the file is then exactly the size shown on the page.\u003C\u002Fp>\n\u003Ch2 id=\"two-warnings-before-and-after\">Two warnings, before and after\u003C\u002Fh2>\n\u003Cp>The tool warns at two moments.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Before you create the image\u003C\u002Fstrong>, it compares your photo with the size you picked. If your photo is smaller in either direction, for example a 1920 × 1080 screenshot going to 4K, it says your image will be enlarged and may look soft. Enlarging can’t add detail that isn’t there, and a soft thumbnail looks worse in a feed than a sharp smaller one. The tool still lets you go ahead, because sometimes a slightly soft image is all you have.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>After you create it\u003C\u002Fstrong>, it compares the file size with the page’s \u003Ccode>maxFileKB\u003C\u002Fcode>. On the YouTube page, if your thumbnail is over 2 MB, it tells you that’s over the limit in some places on the platform and suggests a smaller size or compressing it.\u003C\u002Fp>\n\u003Cp>One detail there: the limit is checked as \u003Ccode>maxKB * 1000\u003C\u002Fcode> bytes, so 2 MB means 2,000,000 bytes. Platforms rarely say whether their “MB” means 1,000,000 or 1,048,576 bytes, and the smaller reading is the safe one. A file that passes this check passes either reading.\u003C\u002Fp>\n\u003Ch2 id=\"png-or-jpg\">PNG or JPG\u003C\u002Fh2>\n\u003Cp>The output format follows a simple rule: a PNG stays PNG, and everything else is saved as JPG at 92% quality on a white background. PNG keeps sharp edges on text and logos, which matters for thumbnails and banners with words on them. Photos are much smaller as JPG, which helps them stay under the warning limits. YouTube’s and LinkedIn’s help pages both list JPG and PNG.\u003C\u002Fp>\n\u003Cp>The file name says what you got: \u003Ccode>holiday.jpg\u003C\u002Fcode> cropped for a 4:5 post becomes \u003Ccode>holiday-1080x1350.jpg\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Ch2 id=\"try-them\">Try them\u003C\u002Fh2>\n\u003Cp>All three resizers work in your browser without uploading your image. Pick the one for your platform: \u003Ca href=\"\u002Fresize-image-for-instagram\">Instagram post\u003C\u002Fa>, \u003Ca href=\"\u002Fyoutube-thumbnail-resizer\">YouTube thumbnail\u003C\u002Fa> or \u003Ca href=\"\u002Flinkedin-banner-resizer\">LinkedIn banner\u003C\u002Fa>. For other image jobs, see \u003Ca href=\"\u002Fimage-tools\">all image tools\u003C\u002Fa>.\u003C\u002Fp>\n",[20,24,27,30,33,36],{"id":21,"text":22,"level":23},"the-sizes-and-the-comment-next-to-each","The sizes, and the comment next to each",2,{"id":25,"text":26,"level":23},"why-the-resizers-crop-to-fill","Why the resizers crop to fill",{"id":28,"text":29,"level":23},"exact-pixels-from-cropperjs","Exact pixels from cropperjs",{"id":31,"text":32,"level":23},"two-warnings-before-and-after","Two warnings, before and after",{"id":34,"text":35,"level":23},"png-or-jpg","PNG or JPG",{"id":37,"text":38,"level":23},"try-them","Try them",5,1792325805425]