Prepare Images for Blog and Social Posts: Resize, Convert, Compress

A full-resolution camera photo is larger than a blog post, CMS field, or social card needs. Prepare the image before upload: resize it to the real display range, choose the right format, compress the output, and export the crops each platform expects.

The goal is not to make the smallest possible file. The goal is to publish an image that looks right in its final slot without making visitors download unused pixels.

Keep the original file

Start by saving the untouched source in an originals/ folder. Do not overwrite it with a compressed web version.

An untouched source preserves the option to make a new crop, size, or format later without stacking compression damage. Delivery files can be replaced. The source file is the asset you return to.

Step 1: resize to the layout

Resize before converting or compressing. A 4000px phone photo displayed at 900px still costs the page the larger file unless you export a smaller version.

Common web widths:

Use	Starting widths
Blog hero	2000px, 1600px, 1200px
Article body image	1400px, 1000px, 800px
Card or thumbnail	600px, 400px
Open Graph image	1200x630
Square social post	1080x1080
Portrait social post	1080x1350

Use Image Resizer to export the widths or exact crops your layout needs.

Step 2: choose the delivery format

Pick the format by image content:

• Use JPEG for photos when transparency is not needed.
• Use PNG for screenshots, UI graphics, and transparent raster assets.
• Use WebP for smaller web delivery when your CMS and target platforms accept it.
• Use SVG for icons and logos that began as vector artwork.

If a large blog photo is a PNG, convert it to JPEG or WebP. If a transparent logo is a JPEG, replace it with PNG or SVG.

Use Image Converter for batch conversion. Common conversions include JPEG to WebP, PNG to WebP, and WebP to JPEG for platforms that require JPEG.

Step 3: compress and inspect

Compression settings are not universal. A food photo, a portrait, and a screenshot all show artifacts differently.

Start around these ranges, then inspect the result:

• JPEG: 75 to 85 quality
• WebP: 75 to 85 quality
• PNG: reduce colors only when the graphic still looks correct

Check faces, gradients, small text, and logo edges. If artifacts are visible in the final display size, raise quality or change format.

Use Image Compressor to compare the source and compressed file before publishing.

Step 4: export social crops separately

Do not rely on social platforms to crop the only version of an image. Create separate files for the common placements you use.

Placement	Size	Ratio
Open Graph / LinkedIn / Facebook link	1200x630	1.91:1
Instagram square	1080x1080	1:1
Instagram portrait	1080x1350	4:5
Story / vertical video cover	1080x1920	9:16
Pinterest pin	1000x1500	2:3
YouTube thumbnail	1280x720	16:9

Name the files by use, not only by dimensions:

post-slug-hero-1600.webp
post-slug-og-1200x630.jpg
post-slug-instagram-1080x1080.jpg

Step 5: add responsive markup

If you publish multiple widths, tell the browser how to choose between them:

<img
  src="post-800.webp"
  srcset="post-480.webp 480w, post-800.webp 800w, post-1400.webp 1400w"
  sizes="(max-width: 720px) 100vw, 720px"
  alt="Prepared blog image in an editor">

The browser picks a file based on the rendered width, viewport, and device pixel ratio. This prevents a small phone from downloading the same large image as a wide desktop layout.

Optional: progressive JPEG for large photos

For large JPEG hero images, progressive encoding can show a rough full image before the final detail arrives. That can feel better than a blank area or a slow top-to-bottom reveal.

Use Progressive JPEG Converter for JPEG exports and Progressive JPEG Checker to inspect files you already have.

Publishing checklist

Before upload, check:

• The displayed dimensions match the exported sizes.
• The format matches the image content.
• The compressed file still looks correct at final size.
• Social crops keep the subject inside the safe area.
• srcset references real files.
• The original source file is still stored separately.

Everything runs in your browser; files are not uploaded. That makes the image-prep pass safe to do before a CMS upload, client handoff, or social scheduling step.