An image that is too large slows down your site, one that is too small turns blurry, and one with the wrong ratio ends up cropped on the sides. Resizing an image correctly is no rocket science: you just need to understand three key concepts, know the right formats and apply a simple method. Here is the complete guide so you never publish a distorted, blurry or needlessly heavy visual again.
Whether you are preparing an Instagram post, a LinkedIn banner or a product photo for your website, the problem is always the same: the original image is almost never the right size. Resizing it properly means guaranteeing a sharp result, a controlled file size and clean framing. For a small or mid-sized business that handles its own communications, it is also a considerable time saver: a few well-ingrained habits keep you from redoing the same visual ten times over. This article gives you the essential benchmarks and the steps to get there in a matter of seconds.
The three concepts to master before resizing
Before touching an image, you need to tell apart three things that are often confused: dimensions, ratio and resolution. These concepts determine whether your visual will be sharp, well framed and suited to its platform. Mixing them up is the root cause of most of the botched images you see across websites and social media.
Dimensions in pixels
Dimensions are the width and height expressed in pixels (for example 1080 x 1080). This is the reference unit on the web and social media. The larger the dimensions, the more detail the image holds, but the heavier its file becomes. The goal is to stay as close as possible to the size actually displayed: there is no point loading a 4000-pixel-wide image to show it in a 600-pixel column.
Ratio (proportions)
The ratio is the relationship between width and height: 1:1 for a square, 16:9 for landscape, 4:5 for portrait. If you change the dimensions without keeping the original ratio, the image ends up stretched or squashed. This is the number one cause of distorted visuals, along with elongated faces and flattened logos. To change ratios cleanly, you need to crop (trim) rather than distort: you choose the area to keep instead of forcing the image into a frame it does not fit.
Resolution
Resolution (often expressed in DPI or PPI) mainly concerns printing. For a screen, only the pixel dimensions matter: talking about 72 DPI or 300 DPI has no effect on web display. Remember this rule: for the web, think in pixels; for print, think in centimeters and DPI (300 DPI for a crisp quality on paper). A printed flyer and a website image therefore follow different constraints, and trying to apply the habits of one to the other leads straight to mistakes.
Never enlarge a small image
Blowing up an image from 400 px to 1200 px wide does not create detail: the software invents pixels and the result turns blurry or pixelated. Always start from an image larger than your target, then scale it down. Reducing preserves sharpness; enlarging destroys it.
The right formats for social media
Every platform has its recommended dimensions. Publishing at the right format avoids automatic cropping and guarantees a sharp display. Nothing is more frustrating than a headline cut in half or a logo chopped off because the image did not match the expected ratio. Here are the most useful, up-to-date benchmarks for a small or mid-sized business.
| Use | Dimensions (px) | Ratio |
|---|---|---|
| Square Instagram / Facebook post | 1080 x 1080 | 1:1 |
| Portrait Instagram post | 1080 x 1350 | 4:5 |
| Story / Reel (Instagram, TikTok) | 1080 x 1920 | 9:16 |
| YouTube thumbnail | 1280 x 720 | 16:9 |
| LinkedIn banner (page) | 1128 x 191 | about 6:1 |
| Facebook cover photo | 820 x 312 | about 2.6:1 |
| Image shared on the web (Open Graph) | 1200 x 630 | 1.91:1 |
One simple tip: favor the 4:5 portrait format on Instagram and 9:16 for stories, because they take up more space on mobile screens and grab more attention. The square format remains a safe bet when you do not know where the image will be displayed. If you post often, keep these dimensions in a note or a reusable template: this is exactly the kind of repetitive task worth standardizing, or even automating your social media publishing so you never start from scratch again.
Plan for the safe zone
On stories and reels, the interface (account name, buttons, captions) covers the top and bottom of the screen. Leave a margin of about 250 px at the top and bottom of your 1080 x 1920 visual so that the important text always stays visible, whatever the device.
The right dimensions for your website
On a website, the classic mistake is uploading a photo straight from the camera (often 4000 to 6000 px wide and several MB) when it will be displayed in an 800 px block. This needlessly heavy image slows down loading and hurts your search ranking, since Google factors in display speed. It is one of the issues that consistently show up during a DIY SEO audit: visuals that are too heavy and drag down the performance of otherwise well-written pages.
- Full-width image (hero): 1920 px wide is enough in the vast majority of cases.
- Content image within an article: 800 to 1200 px wide.
- Thumbnail or product photo in a grid: 400 to 600 px wide.
- Logo: exact display dimension, in PNG or SVG for sharpness.
Practical rule: resize to the actual display size, or double it if you are targeting high-density (Retina) screens. A 600 px block can thus be fed by a 1200 px image, but rarely beyond that. Resizing correctly is the first step; the next step is to compress the image without visible loss of quality to lighten the file further before going live. The two actions are complementary and add up.
The step-by-step method to resize without loss
Once you have the benchmarks in mind, the operation itself takes a few seconds. The key is to always follow the steps in the right order: crop before scaling down, and check the file size at the end.
- 1Identify the target dimension: check the format recommended by the platform or the width of your site's block.
- 2Verify the ratio of your original image: if the target ratio is different, crop before resizing to choose the area to keep.
- 3Reduce the dimensions (never the other way around) to the desired size while keeping the ratio locked.
- 4Export in the right format: JPG for photos, PNG for visuals with transparency, WebP for the best quality-to-size ratio on the web.
- 5Check the final file size: aim for under 200 KB for a typical web image, without going so low that artifacts start to appear.
Locked ratio = image never distorted
In most tools, a small padlock icon links width and height. Keep it enabled: when you change the width, the height adjusts automatically and your proportions stay intact. Only turn off this lock when you deliberately want to force a specific dimension, and only after cropping.
A concrete product photo example
Take the case of a craftsperson who photographs their work on a smartphone: the file is 4032 x 3024 px (4:3 ratio). For a square Instagram post, they crop to 1:1 while centering the product, reduce it to 1080 x 1080 px and export as JPG. For the product page on their site, they start again from the original, crop to 4:5, reduce to 1000 px wide and export as WebP. Same starting photo, two clean versions, without ever distorting or enlarging.
Resize your images online, for free
Choose your dimensions or a preset format, lock the ratio and export in one click. Everything happens in your browser, with no file sent to a server.
Choosing the right file format
Resizing is pointless if you export in an unsuitable format. The choice of format directly influences the final quality and file size. The same visual can weigh three times more depending on the chosen extension, with no visible gain on screen.
- JPG: ideal for photos and color-rich visuals. Light file size, no transparency.
- PNG: perfect for logos, screenshots and images with a transparent background, but heavier.
- WebP: the best compromise for the web, noticeably lighter than a JPG at equivalent quality, supported by all recent browsers.
- SVG: reserved for vector logos and icons, it stays sharp at any size.
If you are unsure which extension to favor for a given visual, our detailed comparison WebP, JPG, PNG or AVIF: which image format to choose reviews each use case. And if you are starting from photos taken on an iPhone, remember to convert your HEIC images to JPG before publishing, since that format is not readable everywhere.
Common mistakes to avoid
Even with the right method, certain habits ruin the result. Here are the most common pitfalls seen among small and mid-sized businesses that manage their visuals in-house.
- Distorting instead of cropping: stretching a horizontal image to force it into a square elongates faces and warps proportions.
- Enlarging a small image: starting from a low-resolution thumbnail never restores sharpness, no matter the tool.
- Forgetting to compress: a well-sized image exported at maximum quality can still be needlessly heavy.
- Ignoring file size on mobile: most visits happen on phones, often on 4G, where every KB counts.
- Neglecting alt text: beyond pixels, a descriptive alt tag helps both search ranking and accessibility.
The right habit to keep
Before each publication, ask yourself three questions: do I have the right ratio for this platform, did I reduce (not enlarge), is the final file size reasonable? These three ten-second checks are enough to eliminate almost every botched image.
A well-sized image means a faster site, cleaner social feeds and a message that lands the first time.
Resizing and loading speed
On a showcase site or an online store, images often account for the largest share of a page's weight. A catalog of poorly sized photos can cost several seconds of loading time, which drives away a significant portion of mobile visitors and hurts your ranking. Resizing upfront is therefore one of the simplest levers to improve your site's loading speed. Ideally, as the volume grows, systematize the process: one reference size per use, one default export format and a file-size check.
Frequently asked questions
How do I resize an image without distorting it?
Lock the ratio (padlock icon) before changing the width or height: the other value then adjusts automatically. If you need to change format, crop the image to choose the area to keep rather than stretching it. Most tools keep this lock active by default.
What image size should I use for an Instagram post?
The 1080 x 1080 px square (1:1 ratio) remains the safe bet. To take up more space in the feed, the 1080 x 1350 px portrait (4:5) is even more effective. For stories and reels, aim for 1080 x 1920 px (9:16).
Why does my image turn blurry after resizing?
It is almost always because you enlarged it: starting from a small image and scaling it up forces the software to invent pixels, hence the blur. Start again from a file larger than the target and reduce it. Overly aggressive compression can also create visible artifacts.
What is the maximum file size for an image on a website?
For a typical content image, aim for under 200 KB, and if possible under 100 KB in WebP. A full-width hero image can go a bit higher, but anything beyond a too-heavy file is paid for in loading time, especially on mobile.
Should I resize or compress an image?
Both, in this order: first resize to the right dimensions, then compress to reduce the file size without changing the displayed size. Resizing removes the surplus pixels; compressing optimizes the encoding of what remains. Combined, they deliver a light, sharp image.
In summary
Resizing an image to the right dimensions rests on three simple habits. First, think in pixels and always start from an image larger than the target to reduce it, never the other way around. Next, respect the ratio expected by each platform by cropping rather than distorting. Finally, export in the right format (JPG, WebP or PNG depending on the case) and keep an eye on the file size so you do not slow down your site. By adopting these benchmarks, your visuals will be sharp on every screen, correctly framed on each network and light enough not to penalize your search ranking.
If you manage many visuals every week and these operations take you several hours, you can industrialize the process: reference formats, automated export and file-size control built into your publishing flow. This is exactly the kind of repetitive task that TC Automation helps small and mid-sized businesses streamline. Let's talk about your project to turn these habits into a lasting time saving.
