Aspect ratio is the shape of an image: width compared with height. A 1:1 image is square, a 16:9 image is wide, and a 9:16 image is vertical.
The right ratio depends on where the image will appear. A product grid needs repeatable shapes. A hero image needs width and safe space for text. A story needs the full height of a phone screen. Before resizing files, crop the image to the shape the layout expects.
For a visual pass, crop the same source image in the Image Cropper and compare the frame before exporting final sizes with the Image Resizer.
Quick ratio table
| Ratio | Shape | Good fit |
|---|---|---|
1:1 | square | product grids, avatars, thumbnails |
4:5 | portrait | Instagram feeds, product photos, ads |
9:16 | tall vertical | stories, reels, TikTok, Shorts |
16:9 | landscape | blog headers, video thumbnails, wide cards |
3:2 | photo landscape | editorial images, portfolio work |
16:10 | screen landscape | UI screenshots and software tutorials |
2:3 | vertical poster | Pinterest pins, recipes, tall graphics |
21:9 | ultra-wide | cinematic headers, background media |
Social feeds
Use 4:5 for feed posts when the subject benefits from vertical space. It gives a portrait more room on a phone screen than a square crop without becoming a full story frame.
Keep a 1:1 version when the same image also appears in a profile grid, product collection, or thumbnail rail. Square crops make repeated items easier to scan because every card occupies the same footprint.
Avoid relying on 16:9 for feed-first images. A wide crop can make the subject too small on mobile, especially when captions and interface controls compete for space.
Stories and vertical video
Use 9:16 for phone-first surfaces: Instagram Stories, TikTok, Reels, Shorts, and vertical ad placements. The image fills the screen without letterboxing.
Keep faces, product names, and calls to action away from the very top and bottom. Mobile interfaces place controls there, and some platforms crop or cover those edges.
If the source image is horizontal, do not rotate it. Reframe the subject into a vertical crop and accept that some side detail will be removed.
Product cards and galleries
Use one ratio across the whole grid. Mixed ratios make product rows jump, which slows comparison.
1:1 is the safest default for product cards because it keeps rows aligned and works for thumbnails, search results, and category pages. Use 4:5 when the product is naturally tall, such as bottles, clothing, framed prints, or books.
Leave consistent padding around each product. A tight crop on one item and a loose crop on the next makes the catalog look uneven even when the images are sharp.
Website heroes and banners
Use wide ratios such as 16:9, 3:1, or 21:9 for hero sections and banners. These shapes leave horizontal room for headings, navigation, and calls to action.
Wide crops need a safe focal point. Keep the subject near the center third so the same image can survive narrower tablet and mobile crops. Avoid placing important text at the left or right edge unless the layout never crops it.
For content pages, 16:9 is a better default than an ultra-wide crop. It gives enough visual space without consuming too much of the first viewport.
Blog headers and article images
Use 16:9 when the image needs to fit many templates: article cards, related-post grids, Open Graph previews, and header images. It is predictable across CMS themes.
Use 3:2 when the photo matters more than the template. It keeps a slightly taller editorial frame and often preserves people, desks, products, or landscapes with less awkward cropping.
Avoid 9:16 inside articles unless the article itself is about a vertical artifact. A tall image can push the opening text too far down the page.
UI screenshots
Use 16:10 or 3:2 for software screenshots. Those shapes match many laptop displays better than old 4:3 crops and leave room for interface chrome.
Do not crop a screenshot so tightly that the reader loses context. Keep enough surrounding UI to show where the action happens, then resize the final image for the article width.
If the screenshot contains sensitive data, crop first and blur second. Cropping removes information; blurring leaves altered pixels in the file.
Pinterest and tall graphics
Use 2:3 for pins, posters, recipes, and vertical explainers. It gives enough height for a title, image, and short supporting text while staying readable on mobile.
Do not stretch a horizontal design into 2:3. Rebuild the composition for a vertical reading path: title near the top, subject in the middle, supporting detail below.
Crop before resizing
Cropping decides what stays in the frame. Resizing decides how many pixels the final file has. Do them in that order.
Example: start with a 4000x3000 product photo. Crop it to 1:1 for the catalog, then resize the crop to 1200x1200, 800x800, and 400x400 for responsive delivery. If you resize first and crop later, you may throw away pixels you needed for a sharp final image.
Use the ratio that matches the surface, keep the focal point inside the safe area, and export only the sizes the page or platform needs.
