Image publishing checklist for websites, social media, and ecommerce

A practical workflow for appearance, format, size, metadata, and accessibility.

Finding a bad crop, unreadable caption, or flattened background after upload costs more time than the export itself. Websites resize, social platforms crop and recompress, and marketplaces impose their own rules for ratio, background, zoom, and file size.

Check every batch in the same order: appearance, format and dimensions, metadata, and one preview in the destination. When something fails, that order also tells you where to go back.

Five checks before publishing

Before publishing, answer five questions: Is the crop right? Can the text be read? Does the platform accept the format? Is the file reasonably sized? Is the metadata appropriate? Then preview the actual upload once.

Define the destination and the image's role

Images on the same platform still perform different jobs. A homepage banner needs a crop-safe area, an article image needs an appropriate reading width, a product hero needs background consistency and zoom detail, and a thumbnail needs recognition at very small size. Record the location, container ratio, maximum display dimensions, and whether users can zoom.

Start from where the audience will see the image, not from the camera's dimensions. Mobile portrait and desktop wide layouts may use different crops. Artwork containing text must also account for interface buttons, captions, and overlays used by the platform.

DestinationPriority checksCommon failureRecommended action
Website articleReading width, loading, alt textOversized source and layout shiftGenerate responsive sizes and declare dimensions
Social mediaSafe crop, lettering, platform previewControls cover important contentPreview through a draft account
Ecommerce heroRatio, background, zoom detailRejected or heavily recompressed uploadExport to the marketplace specification
Email or documentCompatibility and total attachment sizeNew format does not renderUse stable formats and right-size pixels

Review appearance and lettering

Check crop, horizon, orientation, color, and unwanted marks before checking spelling, type size, contrast, and margins. The subject should remain understandable as a thumbnail, while the zoomed image should avoid oversharpening, block artifacts, and gradient banding.

Preview transparent assets on both light and dark page backgrounds. Product series should have consistent shadows, edges, brand colors, and visual weight. A carousel with changing aspect ratios or focal positions can make the interface jump even when each file looks fine alone.

  • Inspect detail at 100 percent and judge readability at the actual display size.
  • Check text and safe areas on a real phone rather than a scaled desktop preview.
  • Do not make text inside the image the only source of essential information; provide accessible page text.

Verify format, dimensions, and transfer size

Select JPG, PNG, WebP, or AVIF according to content and confirm that the destination accepts it. Record pixel dimensions, file size, format, and export settings so one content slot does not vary wildly in quality. Websites should reserve width and height or a stable aspect ratio to reduce layout movement.

There is no useful universal file-size cap outside a page context. A first-view hero, an inline illustration, and a zoomable product photograph have different responsibilities. Budget the combined image weight of the page instead of optimizing each file toward an arbitrary identical number.

  1. Crop to the target ratio and confirm the longest edge supports display and zoom.
  2. Export format and quality candidates, selecting the smaller file only after it passes visual review.
  3. Check the filename extension, MIME behavior, and the copy generated after platform upload.
  4. For the web, provide stable dimensions, a maintainable filename, and meaningful alternative text.

Review metadata, rights, and delivery records

Public photographs should be checked for orientation, capture time, GPS, device, and private maker data. Commercial deliveries may require author, copyright, and description fields specified by a contract or recipient workflow. Because platforms may strip metadata, visible rights information must be managed separately.

Keep a small delivery record containing source location, output date, destination, dimensions, format, quality setting, and reviewer. When a platform changes its specification or an error is found, the file can be rebuilt from the source instead of recompressing a downloaded delivery copy.

The final five-minute check

Upload to a draft and open it on phone and desktop. Review crop, lettering, transparent edges, and loading. Inspect the platform-generated copy for unexpected rotation or severe recompression, then complete alt text, caption, and rights information before publishing.

Where to look when publication fails

For a rejected upload, read the error first, then check format, dimensions, file size, filename, and color mode. For a wrong display, check orientation tags, transparency, and platform cropping. For softness, compare the pre-upload file with the platform-generated version and look for repeated lossy saves or upscaling.

Do not solve format problems through repeated screenshots. A screenshot discards source pixels, transparency, and metadata while making dimensions harder to control. Return to the source and export a documented delivery copy.

Frequently asked questions

Does every platform need a separate image?

Not always, but different crop ratios, zoom needs, or format limits often require separate outputs. Reuse the same source and delivery record rather than repeatedly editing compressed copies.

Do image filenames affect user experience?

Stable descriptive filenames improve maintenance, cache diagnosis, and content management. Do not stuff keywords into them; page context and accurate alternative text matter more.

Why did an image become blurry after upload?

Possible causes include insufficient source dimensions, low export quality, platform recompression, or page upscaling. Compare the file before upload with the generated platform version to locate the change.

Related guides

Continue reading