DEV Community

Fox leo
Fox leo

Posted on

A pre-upload image dimension checklist for social and website assets

Image upload bugs often look like platform bugs:

  • the YouTube thumbnail looks soft,
  • the LinkedIn banner crops the logo,
  • the Open Graph preview shows the wrong shape,
  • the Instagram cover frame hides the title,
  • or a marketplace image gets rejected.

In practice, many of these issues start with the exported file. The design may look correct in Figma, Canva, Photoshop, or a mobile editor, but the final file can still have the wrong pixel dimensions, ratio, format, or compression.

This is the checklist I use before publishing a visual asset.

1. Check the exported file, not the design canvas

Do not assume the design canvas and the downloaded image are identical.

Export settings, compression tools, CMS uploads, screenshots, and file sharing apps can change the real image. Before uploading, confirm:

  • width,
  • height,
  • aspect ratio,
  • file size,
  • image format,
  • and whether the file is portrait, landscape, square, or wide.

For this first check, use ImageSizeKit's browser-based image checker:

https://imagesizekit.com/image-dimension-checker/

The point is not only to read the dimensions. The point is to decide which publishing path the image belongs to.

2. Match the image to a real destination

An image that is "large enough" can still be wrong for the surface.

Examples:

  • 1280 x 720 usually fits a 16:9 thumbnail workflow.
  • 1080 x 1920 is a vertical-cover workflow.
  • 1200 x 630 is usually an Open Graph or link preview workflow.
  • a very wide image is more likely a banner or profile header workflow.

Once the checker gives you the raw facts, route the file to the right next check.

3. Use a second check for platform behavior

Dimension checks answer: "What is this file?"

Platform checks answer: "Will this file survive the destination?"

That second question includes crop behavior, small-screen readability, safe areas, compression, and upload limits.

Useful next routes:

4. Do not reuse one export everywhere

One master design can create multiple final exports. One final export should not usually be used everywhere.

For example, a wide hero image might be adapted into:

  • a YouTube thumbnail,
  • a LinkedIn banner,
  • an Open Graph preview,
  • a blog cover,
  • and a vertical social cover.

Those are different files, even if they come from the same design system.

5. Final pre-upload checklist

Before publishing an important image, check:

  1. The final file's pixel dimensions.
  2. The aspect ratio.
  3. The destination platform.
  4. Whether text stays readable at feed size.
  5. Whether key content is away from risky crop edges.
  6. File size and format.
  7. Whether a separate export is needed for another platform.

This takes a minute and prevents a surprisingly large number of upload, preview, and crop issues.

ImageSizeKit is an independent tool library for image size checks and publishing references. It is not affiliated with YouTube, Instagram, LinkedIn, Facebook, or Open Graph platforms.

Top comments (0)