Most social image mistakes are not design mistakes. They are export and crop mistakes.
The image looks clean in Canva, Figma, Photoshop, or a mobile editor. Then it goes live and something changes: an Instagram Reel cover crops the title, a LinkedIn banner hides the headline behind the profile photo, a Facebook cover looks different on desktop and mobile, a YouTube banner loses important text, or a website link preview uses the wrong Open Graph image.
Before redesigning the artwork, check the exported image file itself.
The pre-upload workflow
Use this sequence before publishing:
- Export the final image from your design tool.
- Check the real pixel width and height of the exported file.
- Check the aspect ratio.
- Check the file format and file size.
- Match the image to the publishing surface.
- Check crop-sensitive areas before uploading.
- Re-export separate versions when one image cannot fit every surface.
The important habit is simple: check the downloaded file, not only the design canvas.
A quick size reference
There is no single best social media image size. The right size depends on where the image will be displayed.
| Surface | Common target | Main risk |
|---|---|---|
| Instagram Reel cover | Vertical 9:16 | Title or face too close to UI areas |
| LinkedIn profile banner | Wide horizontal | Profile photo and mobile crop hide text |
| Facebook cover | Wide horizontal | Desktop and mobile crops differ |
| YouTube channel banner | Wide with safe area | Text outside the center safe area disappears |
| Open Graph image | Usually around 1.91:1 | Link preview crops small text or uses an old cached image |
| Product or marketplace image | Often square or high resolution | Too-small source image looks soft in previews |
For a broader platform-by-platform reference, start with this social media image sizes guide:
https://imagesizekit.com/social-media-image-sizes/
Check the local file first
If you already exported the image, start by checking the file locally:
https://imagesizekit.com/social-media-image-checker/
This answers the basic questions first:
- What is the real width?
- What is the real height?
- What is the aspect ratio?
- What file type did I export?
- Is this file closer to a feed image, banner, link preview, or product image workflow?
For sensitive drafts, browser-side checks are useful because the image does not need to be uploaded just to read basic dimensions.
Treat banners as their own workflow
Banner images are easy to get wrong because matching the canvas size is not enough. A banner can be technically wide enough and still fail if the important content sits near a crop-prone edge.
For social headers, profile banners, and cover images, use a banner-specific check:
https://imagesizekit.com/banner-size-checker/
Then compare the result with the surface-specific guide you need, such as LinkedIn banner size or YouTube banner safe area.
The practical rule: keep identity, headline, logo, and call-to-action content near the stable center area.
Treat Open Graph images as website assets
Open Graph images are not just social images. They are website metadata assets.
A practical default for many web pages is 1200 x 630 pixels, about a 1.91:1 ratio. But the file can still fail if the source image is too small, the ratio is off, text is too close to the edges, the page still points to an old Open Graph image, or a social platform has cached the previous preview.
For the size guide, use:
https://imagesizekit.com/open-graph-image-size/
For the preview-oriented check, use:
https://imagesizekit.com/open-graph-preview-checker/
After the image file looks right, update the page metadata and refresh the relevant platform preview cache.
Updated workflow references
I now keep the full workflow references in a small public GitHub Pages asset as well. These pages are useful when you want to cite the workflow, share it with a teammate, or route a file to the right ImageSizeKit checker:
- Social image pre-upload workflow: https://imagesizekit.com/check-social-media-image-size-before-upload/
- Public social workflow reference: https://www.flynnblog.com/imagesizekit-checker-workflows/social-image-preupload-workflow.html
- Image dimension workflow: https://www.flynnblog.com/imagesizekit-checker-workflows/image-dimension-preupload-workflow.html
- Banner crop workflow: https://www.flynnblog.com/imagesizekit-checker-workflows/banner-size-crop-workflow.html
- Open Graph preview workflow: https://www.flynnblog.com/imagesizekit-checker-workflows/open-graph-preview-workflow.html
The short version is: check the exported image file first, then choose the specific route. A feed image, profile banner, product image, and Open Graph card can all be social images, but they do not fail in the same way.
My final checklist
Before publishing, I check:
- Does the exported file match the intended surface?
- Is the width and height large enough for a sharp preview?
- Is the aspect ratio close to the target surface?
- Is important text away from crop-prone edges?
- Is the file size reasonable for the platform?
- Am I forcing one image into surfaces that need different crops?
- Did I update website metadata when the image is for a link preview?
If one image has to work across feed, banner, and link preview contexts, I usually export separate versions. It takes a few extra minutes and prevents avoidable publishing issues.
ImageSizeKit is an independent browser-based image size checker and guide library. It is not affiliated with Instagram, Facebook, LinkedIn, YouTube, Shopify, Etsy, or Open Graph platforms.
The fastest publishing habit is boring but effective: check the exported file before upload.
Top comments (0)