[{"data":1,"prerenderedAt":571},["ShallowReactive",2],{"guides-list":3},[4,108,260,447],{"id":5,"title":6,"author":7,"body":8,"category":95,"categorySlug":96,"date":97,"description":98,"extension":99,"image":100,"meta":101,"navigation":102,"path":103,"seo":104,"slug":105,"stem":106,"__hash__":107},"articles\u002Farticles\u002Fhow-to-crop-an-image-to-a-square.md","How to crop an image to a perfect square","btools team",{"type":9,"value":10,"toc":85},"minimark",[11,15,20,23,26,30,33,37,45,54,58,61,65,68,72],[12,13,14],"p",{},"Square crops are everywhere — profile pictures, product grids, Instagram posts. Getting them right is\nmostly about deciding what to sacrifice.",[16,17,19],"h2",{"id":18},"decide-what-must-stay","Decide what must stay",[12,21,22],{},"Before you touch the crop handles, look at the image and ask what the viewer must see. A face, a\nproduct, a logo. Everything else is negotiable.",[12,24,25],{},"If the subject is centred, a symmetric crop works. If it sits to one side, crop asymmetrically so the\nsubject keeps a little breathing room rather than being jammed against an edge.",[16,27,29],{"id":28},"leave-headroom","Leave headroom",[12,31,32],{},"For portraits, place the eyes roughly one third of the way down the frame and leave space above the\nhead. Cropping tight to the hairline makes almost everyone look uncomfortable.",[16,34,36],{"id":35},"use-a-fixed-ratio-not-a-freehand-crop","Use a fixed ratio, not a freehand crop",[12,38,39,40,44],{},"Freehand cropping produces squares that are subtly off, which becomes obvious in a grid of avatars.\nLock the ratio to ",[41,42,43],"strong",{},"1:1"," so every image matches.",[12,46,47,48,53],{},"The ",[49,50,52],"a",{"href":51},"\u002Fcrop-image","crop tool"," offers 1:1, 4:3, 3:4, 16:9 and 9:16 presets. Pick one, then drag the\nselection; the ratio stays locked while you resize.",[16,55,57],{"id":56},"dont-stretch-to-fit","Don't stretch to fit",[12,59,60],{},"If your image is 16:9 and you need a square, crop it — do not resize it into a square. Stretching\ndistorts faces and text, and it is one of the most common mistakes in profile pictures.",[16,62,64],{"id":63},"check-the-small-size","Check the small size",[12,66,67],{},"Avatars are often displayed at 40 pixels. After cropping, zoom out and look at the result small: if\nthe subject is not instantly recognisable, crop tighter.",[16,69,71],{"id":70},"finish-up","Finish up",[12,73,74,75,79,80,84],{},"Once cropped, ",[49,76,78],{"href":77},"\u002Fresize-image","resize"," to your target dimensions and\n",[49,81,83],{"href":82},"\u002Fcompress-image","compress"," before uploading. All three steps run locally in your browser, so your\nphotos are never uploaded anywhere.",{"title":86,"searchDepth":87,"depth":87,"links":88},"",2,[89,90,91,92,93,94],{"id":18,"depth":87,"text":19},{"id":28,"depth":87,"text":29},{"id":35,"depth":87,"text":36},{"id":56,"depth":87,"text":57},{"id":63,"depth":87,"text":64},{"id":70,"depth":87,"text":71},"Guides","guides","2026-09-18","Centre, rule-of-thirds and subject-first approaches to squaring an image, plus how to avoid the usual distortion mistakes.","md",null,{},true,"\u002Farticles\u002Fhow-to-crop-an-image-to-a-square",{"title":6,"description":98},"how-to-crop-an-image-to-a-square","articles\u002Fhow-to-crop-an-image-to-a-square","0bwDo8ok1r4Cigepb-BeACer-23pbj_IPyp_4XC2njM",{"id":109,"title":110,"author":7,"body":111,"category":250,"categorySlug":251,"date":252,"description":253,"extension":99,"image":100,"meta":254,"navigation":102,"path":255,"seo":256,"slug":257,"stem":258,"__hash__":259},"articles\u002Farticles\u002Fjpg-vs-png-vs-webp.md","JPG vs PNG vs WebP — which should you use?",{"type":9,"value":112,"toc":243},[113,116,120,123,145,149,152,169,173,176,192,196,226,230],[12,114,115],{},"Almost every image question comes down to picking between three formats. Here is the short version.",[16,117,119],{"id":118},"jpg-the-photo-format","JPG — the photo format",[12,121,122],{},"JPG uses lossy compression: it throws away detail your eye is unlikely to notice. That makes it\nexcellent for photographs and terrible for anything with sharp edges or flat colour, where it\nproduces visible ringing.",[124,125,126,133,139],"ul",{},[127,128,129,132],"li",{},[41,130,131],{},"Use for:"," photos, complex gradients",[127,134,135,138],{},[41,136,137],{},"Avoid for:"," logos, screenshots, text, anything needing transparency",[127,140,141,144],{},[41,142,143],{},"Transparency:"," no",[16,146,148],{"id":147},"png-the-precise-format","PNG — the precise format",[12,150,151],{},"PNG is lossless, so it reproduces the source exactly. It also supports a full alpha channel. The cost\nis size: a photographic PNG can easily be five to ten times larger than the equivalent JPG.",[124,153,154,159,164],{},[127,155,156,158],{},[41,157,131],{}," logos, icons, screenshots, images with transparency",[127,160,161,163],{},[41,162,137],{}," photographs",[127,165,166,168],{},[41,167,143],{}," yes",[16,170,172],{"id":171},"webp-usually-the-right-answer-for-the-web","WebP — usually the right answer for the web",[12,174,175],{},"WebP supports both lossy and lossless compression plus transparency, and typically beats JPG by\n25–35% at the same perceived quality. Browser support is universal in current versions.",[124,177,178,183,188],{},[127,179,180,182],{},[41,181,131],{}," almost everything on a website",[127,184,185,187],{},[41,186,137],{}," print workflows and older desktop software",[127,189,190,168],{},[41,191,143],{},[16,193,195],{"id":194},"a-simple-decision-rule","A simple decision rule",[197,198,199,206,217],"ol",{},[127,200,201,202,205],{},"Does it need transparency, or is it a logo\u002Fscreenshot? → ",[41,203,204],{},"PNG"," (or WebP if it is for the web).",[127,207,208,209,212,213,216],{},"Is it a photograph going on a website? → ",[41,210,211],{},"WebP",", falling back to ",[41,214,215],{},"JPG",".",[127,218,219,220,222,223,225],{},"Is it going to a printer or an old app? → ",[41,221,215],{}," for photos, ",[41,224,204],{}," for graphics.",[16,227,229],{"id":228},"converting","Converting",[12,231,232,233,237,238,242],{},"You can move between formats without installing anything: use\n",[49,234,236],{"href":235},"\u002Fconvert-to-jpg","convert to JPG"," for PNG, WebP, GIF, SVG or BMP files, or\n",[49,239,241],{"href":240},"\u002Fjpg-to-image","JPG to PNG\u002FWebP"," in the other direction. Transparency is filled with a background\ncolour of your choice when the target format cannot store it.",{"title":86,"searchDepth":87,"depth":87,"links":244},[245,246,247,248,249],{"id":118,"depth":87,"text":119},{"id":147,"depth":87,"text":148},{"id":171,"depth":87,"text":172},{"id":194,"depth":87,"text":195},{"id":228,"depth":87,"text":229},"Formats","formats","2026-09-15","A plain-English comparison of the three formats that matter for the web, with guidance on transparency, text, photos and browser support.",{},"\u002Farticles\u002Fjpg-vs-png-vs-webp",{"title":110,"description":253},"jpg-vs-png-vs-webp","articles\u002Fjpg-vs-png-vs-webp","SZE4RPifbOE0pX5jCjo_EMtcb_9wJ7YbFiddT_FrddE",{"id":261,"title":262,"author":7,"body":263,"category":95,"categorySlug":96,"date":439,"description":440,"extension":99,"image":100,"meta":441,"navigation":102,"path":442,"seo":443,"slug":444,"stem":445,"__hash__":446},"articles\u002Farticles\u002Fimage-sizes-for-social-media.md","Image sizes for social media in 2026",{"type":9,"value":264,"toc":433},[265,268,272,381,385,388,408,413,417,426,430],[12,266,267],{},"Uploading the wrong dimensions is the fastest way to make a good photo look amateur. Platforms crop,\nscale and re-compress whatever you give them, so it pays to start close to the target.",[16,269,271],{"id":270},"common-dimensions","Common dimensions",[273,274,275,291],"table",{},[276,277,278],"thead",{},[279,280,281,285,288],"tr",{},[282,283,284],"th",{},"Placement",[282,286,287],{},"Aspect ratio",[282,289,290],{},"Suggested size",[292,293,294,305,316,327,338,349,360,370],"tbody",{},[279,295,296,300,302],{},[297,298,299],"td",{},"Instagram square post",[297,301,43],{},[297,303,304],{},"1080 × 1080",[279,306,307,310,313],{},[297,308,309],{},"Instagram portrait post",[297,311,312],{},"4:5",[297,314,315],{},"1080 × 1350",[279,317,318,321,324],{},[297,319,320],{},"Instagram \u002F Facebook story",[297,322,323],{},"9:16",[297,325,326],{},"1080 × 1920",[279,328,329,332,335],{},[297,330,331],{},"X (Twitter) timeline image",[297,333,334],{},"16:9",[297,336,337],{},"1600 × 900",[279,339,340,343,346],{},[297,341,342],{},"Facebook link preview",[297,344,345],{},"1.91:1",[297,347,348],{},"1200 × 630",[279,350,351,354,357],{},[297,352,353],{},"LinkedIn post",[297,355,356],{},"1.91:1 or 1:1",[297,358,359],{},"1200 × 627",[279,361,362,365,367],{},[297,363,364],{},"YouTube thumbnail",[297,366,334],{},[297,368,369],{},"1280 × 720",[279,371,372,375,378],{},[297,373,374],{},"Pinterest pin",[297,376,377],{},"2:3",[297,379,380],{},"1000 × 1500",[16,382,384],{"id":383},"match-the-aspect-ratio-first","Match the aspect ratio first",[12,386,387],{},"Scaling a 16:9 photo into a 1:1 frame means something has to give. Decide deliberately:",[124,389,390,396,402],{},[127,391,392,395],{},[41,393,394],{},"Crop"," to the target ratio when the subject is central and you can afford to lose the edges.",[127,397,398,401],{},[41,399,400],{},"Pad"," (letterbox) when nothing can be cut, accepting empty space.",[127,403,404,407],{},[41,405,406],{},"Stretch"," almost never — it distorts faces.",[12,409,47,410,412],{},[49,411,52],{"href":51}," has presets for 1:1, 4:3, 3:4, 16:9 and 9:16, so you can frame the shot\nexactly.",[16,414,416],{"id":415},"then-resize-then-compress","Then resize, then compress",[12,418,419,420,422,423,425],{},"Once the ratio is right, ",[49,421,78],{"href":77}," to the target pixel dimensions and\n",[49,424,83],{"href":82}," to keep the file small. Uploading a 4000-pixel image to a platform that\ndisplays it at 1080 pixels only makes the upload slower.",[16,427,429],{"id":428},"keep-text-away-from-the-edges","Keep text away from the edges",[12,431,432],{},"Many platforms overlay UI on stories and reels. Leave roughly 10% of padding on every side so your\ntext and logo survive.",{"title":86,"searchDepth":87,"depth":87,"links":434},[435,436,437,438],{"id":270,"depth":87,"text":271},{"id":383,"depth":87,"text":384},{"id":415,"depth":87,"text":416},{"id":428,"depth":87,"text":429},"2026-09-12","A practical cheat sheet of the pixel dimensions and aspect ratios that social platforms expect, and how to hit them without cropping badly.",{},"\u002Farticles\u002Fimage-sizes-for-social-media",{"title":262,"description":440},"image-sizes-for-social-media","articles\u002Fimage-sizes-for-social-media","8LH3cuTtRK8_lNvFkpqyhawvlEd-xlGmRjen4V5TCaA",{"id":448,"title":449,"author":7,"body":450,"category":561,"categorySlug":562,"date":563,"description":564,"extension":99,"image":100,"meta":565,"navigation":102,"path":566,"seo":567,"slug":568,"stem":569,"__hash__":570},"articles\u002Farticles\u002Fhow-to-compress-images-without-losing-quality.md","How to compress images without losing visible quality",{"type":9,"value":451,"toc":554},[452,455,459,466,469,473,526,529,533,536,540,543,547],[12,453,454],{},"Compression is a trade-off between file size and fidelity. The good news is that for photographs,\nmost of the size lives in detail your eye barely notices — so a modest quality reduction can cut a\nfile in half with no visible difference.",[16,456,458],{"id":457},"start-at-78","Start at 78%",[12,460,461,462,465],{},"For JPG and WebP, a quality setting around ",[41,463,464],{},"75–85%"," is the sweet spot. Above 90% you pay a lot of\nbytes for a difference nobody can see. Below 60% you start to see blocking around edges and\ngradients, especially in skies and skin tones.",[12,467,468],{},"Try 78%, compare the result side by side, and adjust from there.",[16,470,472],{"id":471},"pick-the-right-format","Pick the right format",[273,474,475,488],{},[276,476,477],{},[279,478,479,482,485],{},[282,480,481],{},"Format",[282,483,484],{},"Best for",[282,486,487],{},"Notes",[292,489,490,502,514],{},[279,491,492,496,499],{},[297,493,494],{},[41,495,215],{},[297,497,498],{},"Photographs",[297,500,501],{},"Smallest for photos, no transparency",[279,503,504,508,511],{},[297,505,506],{},[41,507,204],{},[297,509,510],{},"Screenshots, logos, sharp graphics",[297,512,513],{},"Lossless, often large for photos",[279,515,516,520,523],{},[297,517,518],{},[41,519,211],{},[297,521,522],{},"Everything on the web",[297,524,525],{},"Usually 25–35% smaller than JPG at the same quality",[12,527,528],{},"If you are publishing to the web, WebP is almost always the better choice. Every current browser\nsupports it.",[16,530,532],{"id":531},"resize-before-you-compress","Resize before you compress",[12,534,535],{},"A 6000-pixel-wide photo displayed at 1200 pixels is wasted data. Resizing first, then compressing,\nusually beats compressing alone by a wide margin — often 90%+ total savings.",[16,537,539],{"id":538},"avoid-re-compressing-the-same-file-repeatedly","Avoid re-compressing the same file repeatedly",[12,541,542],{},"Every time you save a JPG it loses a little more information. Keep your original and always compress\nfrom that, not from a previously compressed copy.",[16,544,546],{"id":545},"do-it-in-bulk","Do it in bulk",[12,548,549,550,553],{},"You can compress up to 50 images at once with identical settings on the\n",[49,551,552],{"href":82},"compress image tool",". Because everything runs in your browser, there is no upload\nwait — the results are ready almost instantly.",{"title":86,"searchDepth":87,"depth":87,"links":555},[556,557,558,559,560],{"id":457,"depth":87,"text":458},{"id":471,"depth":87,"text":472},{"id":531,"depth":87,"text":532},{"id":538,"depth":87,"text":539},{"id":545,"depth":87,"text":546},"Optimization","optimization","2026-09-10","Learn which quality setting to use, when to pick WebP over JPG, and how to shrink photos by 60–80% while keeping them sharp.",{},"\u002Farticles\u002Fhow-to-compress-images-without-losing-quality",{"title":449,"description":564},"how-to-compress-images-without-losing-quality","articles\u002Fhow-to-compress-images-without-losing-quality","gdq6X6Pw0lQCiSFdz7KXE9FYUhDM6hFZbEoy4aaWr3A",1790246100762]