Image Aspect Ratio and Size Basics | How to Make Images That Don't Get Cropped or Blurry

Images get cropped because the ratio doesn't match

Most social networks and blogs fit posted images into a fixed frame. When the image's aspect ratio differs from the frame's, the parts that don't fit are cut away. This is cropping (trimming).

The key point is that the parts cut off are almost always the top and bottom edges or the left and right edges. Put a tall image in a wide frame and the top and bottom disappear; put a wide image in a square frame and the sides disappear. Text or logos placed near the edges are the first casualties.

Common aspect ratios and their uses

You don't need many ratios in practice. Know these five and you can handle most situations.

The 1.91:1 ratio in the table is the one commonly used for the preview image that appears when a URL is shared. The Profile Card Maker exports PNGs at 1200×630 px precisely because that size works for this purpose as is. The ratio also sits well whether you post it on social media or use it as a blog's featured image.

Each service's recommended sizes can change, so check its official help pages for exact numbers. The ratios themselves rarely change much, though, so if you create in the five above you can adapt later with small adjustments.

The “safe area”: content that survives wherever it's placed

When the same image is used in several places, you can't design for just one frame. The effective approach is to gather the information in the center so that cropping doesn't hurt.

1. 1

   1. Put the most important element in the center

   Center faces, logos and title text. If you treat the four corners as “decoration that will be cropped”, the image holds up in any frame.

2. 2

   2. Keep 10% margins on every side

   Leave roughly the outer 10% of the image free of text. That alone almost eliminates accidents when the image is cropped to a square.

3. 3

   3. Test by cropping to a square

   For a wide image, check whether it still makes sense when the center is cropped to a square. If it works there, it will survive most frames.

4. 4

   4. Don't make text too small

   In list views, images are shrunk to a fraction of their size. Avoid text that is readable at full size but blurs into nothing when shrunk. As a guide, make it at least 5% of the image height.

Blur comes from enlarging

An image is a collection of tiny squares (pixels). Shrinking only throws information away, so it holds up, but enlarging has to invent information that wasn't there, so it always softens the image. Almost every blurry image is caused by this enlargement.

On top of that, most smartphones and laptops have high-density screens that show 200 real pixels in a space displayed as 100 px. An image made at exactly the display size looks blurry on such screens. Making it at twice the intended display size is the safe choice.

• Blog body images: make them around 1600 px wide and display them at about 800 px
• Social media icons: prepare at least 800×800 px (they display at tens to hundreds of px)
• Thumbnails: make them at 1280×720 px (16:9)
• Link cards: make them at 1200×630 px (1.91:1)
• If the image might be printed, make it two to three times the sizes above

From making an image to publishing it

1. 1

   1. Decide the use first, then choose the ratio

   Decide where the image will be used first. Changing the ratio later always crops something or breaks the layout.

2. 2

   2. Make it larger than the recommended size

   Shrinking doesn't degrade the image. When in doubt, go larger; it also makes reuse for other purposes easier.

3. 3

   3. Gather the information in the center

   Keep the outer 10% clear and make text at least 5% of the image height. Using a template with margins already worked out, such as the Profile Card Maker, is another option.

4. 4

   4. Convert to the right format for the use

   Use JPEG or WebP for photo-heavy images, and PNG for text, logos or anything that needs transparency. The Image Format Converter lets you choose a format to convert to, and you can adjust quality for JPEG and WebP.

5. 5

   5. Check the file size after conversion

   The converter shows the file size after conversion and how much was saved. If the upload destination has a limit, fine-tune the quality after looking at this number.

Processing in the Image Format Converter happens entirely in your browser, and images are not sent to a server. You can use it as is for unpublished materials or profile photos.

FAQ

What is aspect ratio?

It is the ratio of an image's width to its height. 1200×630 px is about 1.91:1, and 1080×1080 px is 1:1. Even if the pixel counts differ, an image with the same ratio is only scaled up or down and nothing gets cut off.

Only the top and bottom of my image get cut off. What should I do?

The cause is an image taller than the display frame. The reliable fix is to remake it at the destination's ratio (usually 1.91:1 or 16:9). If you can't fix it right away, simply moving the important elements to the center reduces the damage.

Can I enlarge a small image and keep it sharp?

Basically, no. Enlarging fills in non-existent information by guesswork, so edges get soft. If you still have the original data, remaking the image is fastest; if not, changing the layout so the image fits at its current size will look cleaner in the end.

Can I use photos taken on my phone as they are?

The resolution is plenty, but the ratio is often 4:3 or 3:4, so you can't predict where it will be cut off. It's safest to crop to the ratio of the frame first, then adjust the format and file size before uploading.