The Pre-Upload Image Checklist Every Creator Should Use

Updated on October 10, 2025

You spent twenty minutes getting the perfect shot. Or maybe you pulled a graphic together in Canva, iterated on the colors, got the typography just right. And then you uploaded it — and it came out blurry, squished, or so heavy that Google flagged your page speed. It happens constantly. Not because creators are careless, but because there's no moment between "this looks great on my screen" and "publish" where anyone stops to verify the actual file.

This checklist is that moment. Run through it before every image goes live — on your blog, your store, your social feed, anywhere. It takes two to four minutes. It saves you from problems that take two to four hours to fix after the fact.

1. Dimensions: Is This the Right Size for Where It's Going?

The number one cause of blurry images online isn't compression — it's using an image that's physically smaller than its display container. A 600px-wide product photo dropped into a 1200px slot gets stretched, and browsers are brutal about it.

  • Know your target dimensions before you export. Blog hero images typically need 1200–1600px wide. Product thumbnails might be 800×800. Social cards have their own mandates (more on that below). Look these up for your specific platform — don't guess.
  • Export at 2x for retina displays if your audience is on mobile or modern laptops. If your image container is 600px wide, export at 1200px and let CSS scale it down. Retina screens have double the pixel density, and they'll show your 600px original looking soft.
  • Crop to the correct aspect ratio first, then resize. If you resize first and crop second, you often end up re-exporting at a different resolution than intended. Crop → resize → export is the cleaner sequence.
  • Check for accidental whitespace or canvas bleed. Open the file at 100% zoom. If there's a thin white strip along one edge (common when exporting from Photoshop or Figma), trim it before uploading. Whitespace adds invisible padding to your layout.

Quick tool for this: Squoosh (squoosh.app) lets you resize in-browser with a live preview. For batch resizing, ImageMagick's mogrify command handles hundreds of files at once.

2. Format: Are You Using the Right File Type?

JPEG, PNG, WebP, AVIF, SVG — they're not interchangeable, and picking the wrong one either bloats your file or visibly degrades your image.

  • Photographs → WebP first, JPEG as fallback. WebP delivers 25–35% smaller files than JPEG at equivalent visual quality. If your CMS or CDN supports it (most do now), export WebP. Keep a JPEG fallback for older systems or email clients.
  • Graphics with text, logos, or flat colors → PNG or SVG. JPEG compression creates blocky artifacts around sharp edges and text. PNG keeps them crisp. SVG is even better for icons and logos — infinitely scalable, tiny file size.
  • Transparency → PNG or WebP. JPEG doesn't support transparency. If you need a transparent background, JPEG is not an option, full stop.
  • Animations → WebP or video. Animated GIFs are notoriously enormous. A 5MB GIF often converts to a 500KB WebP animation. Better yet, convert it to a short MP4 with autoplay/loop — even smaller and smoother.
  • AVIF is worth testing. It's the next generation after WebP — often 50% smaller than JPEG — but browser support, while now solid in 2025, still has edge cases in older CMS preview environments. Check before committing.

A format mismatch isn't just an aesthetics problem. It affects load speed, which affects SEO, which affects whether anyone sees your content at all.

3. Compression: How Heavy Is This File, Actually?

Open your file manager right now and look at the file size. A photo that looks identical at 150KB and at 1.4MB — and these situations are common — is a 1.25MB unnecessary penalty on every page load.

  • For web images, target under 200KB for standard images, under 100KB for thumbnails. Hero images can go up to 400KB if they're full-width cinematic headers. Anything over 500KB needs a reason.
  • Use lossy compression for photos; lossless for graphics. Lossy JPEG at quality 75–85 is usually indistinguishable from quality 100 at half the size. For PNGs with flat color, lossless compression (via pngquant or Squoosh's "reduce palette" option) strips unnecessary color data without visible change.
  • Run it through a compressor even if it looks small. Files exported from design tools often carry hidden bloat — uncompressed color profiles, unused layers embedded in the metadata, or simply no compression pass applied. Squoosh, TinyPNG, and ImageOptim (macOS) all apply compression that export menus skip.
  • Compare before and after at 100% zoom. Don't just check file size — look at the image. Compression artifacts tend to appear first in gradients, shadowed areas, and fine texture. If you see banding or blockiness, ease off and try quality 80 instead of 70.
  • Don't re-compress a previously compressed JPEG. Each compression round degrades the image. Work from your original source file, not from a copy that already went through export.

4. Metadata: What's Hiding Inside Your Image File?

Image files carry metadata — EXIF data from your camera, color profile information, copyright strings, GPS coordinates. Some of this is useful. Some of it is a privacy risk. Some of it bloats your file. You should know what's in there.

  • Strip GPS data from any photo taken on your phone before publishing. iPhone and Android cameras embed your exact GPS coordinates in EXIF data by default. Upload a photo to your blog without stripping it, and anyone with an EXIF viewer knows where you were standing when you took it. Tools: ExifTool, ImageOptim, or simply re-export through a tool that doesn't preserve EXIF (Squoosh strips it automatically).
  • Keep or add copyright metadata for original work. If you're publishing original photography or illustrations, embed your name and copyright string in the IPTC fields. It won't stop theft, but it creates a clear paper trail and shows up in tools that scrape image attribution.
  • Check the color profile. Images should be in sRGB for web use. If your camera shoots in Adobe RGB or ProPhoto RGB, colors will look desaturated or shifted on most monitors when you upload. Photoshop and Lightroom both have an "sRGB" export option — use it. Affinity Photo: Document → Convert Format → sRGB before exporting.
  • Verify that the color profile is embedded, not just converted. Some editors convert the profile but don't embed it in the exported file. Browsers default to assuming sRGB when no profile is present — so this usually works out — but embedding it explicitly is the correct practice.

5. Filename and Alt Text: The SEO and Accessibility Layer

The image itself isn't the only thing being indexed. The filename and alt text both feed into how search engines interpret your content and how accessible your site is to people using screen readers.

  • Rename files before uploading. IMG_4872.jpg tells nobody anything. homemade-sourdough-starter-day3.webp tells Google exactly what it's looking at. Use hyphens, not underscores. Keep it descriptive but not stuffed with keywords.
  • Write alt text that describes the image, not the keyword you want to rank for. "A glass jar of bubbly sourdough starter on a wooden kitchen counter, day three of fermentation" is good alt text. "Best sourdough starter recipe homemade bread yeast ferment" is keyword spam that Google can identify and screen reader users find insulting.
  • Leave alt text empty for purely decorative images. alt="" tells screen readers to skip the image. Don't write "decorative swirl" — the empty attribute is the correct approach for images that add no informational content.

6. Final Sanity Check Before You Hit Publish

  • View the image in a browser tab at the actual size it will display — not in your photo app, not in Finder preview.
  • Check it on your phone. Most of your audience is on mobile, and images that look sharp on a 27-inch monitor sometimes look wrong at 390px wide.
  • If you're uploading to a platform that auto-crops for social previews (WordPress, Shopify, Ghost), check the focal point setting. Most modern CMSs let you define where the crop should center — use it so faces and key elements aren't decapitated by a square thumbnail.
  • Confirm the file actually uploaded in the correct format. CMSs sometimes transcode silently (Cloudflare Polish, WordPress's built-in WebP conversion). Know whether your platform is converting for you so you're not double-compressing.

The whole checklist sounds like a lot written out, but once you've done it ten times, it becomes a thirty-second scan before clicking upload. The images that come out blurry, heavy, or stripped of context are almost always images where someone skipped one of these steps in a hurry. Slow down once per image. It compounds over time into a noticeably better-looking site, faster page loads, and fewer "why does this look weird?" moments after the fact.