Image Sizes for Blog Posts: Plan Pixels and Crops

Choose blog image dimensions from the space the image will occupy, the pixels available in its source and the content the crop must preserve. A fixed export width cannot make those decisions for every article.

First decide what the image helps the reader understand. The page-keyword guide helps identify the page's useful answer. Then use the plan below to prepare an image for that answer without confusing a proposed export with a checked result.

Keep the display slot and file dimensions separate

Record the intended display width and height in CSS pixels. Separately record the source file's width and height in image pixels. A density assumption describes how many image pixels you are planning per CSS pixel; it is an input for this plan, not a universal quality requirement.

MDN's responsive-image guide distinguishes the image's intrinsic dimensions from its display slot. It also separates resolution switching, which changes the available pixel dimensions, from art direction, which changes the crop for a layout. Preparing candidates does not by itself configure your site's responsive-image markup or establish which file a browser loads.

If the real display slot is unknown, write Unknown and check the article template before settling an export. A file's intrinsic width is not evidence of the width at which readers see it.

Start with a filled teaching plan

Every asset, dimension, layout and subject coordinate in this sample is invented teaching input. No image files were created or visually tested. The calculations produce proposed variants within the stated source or crop dimensions.

Download the filled blog image size plan. Its four variant rows separate the input assumptions, calculated targets, selected export sizes, crop coordinates and checks still to perform.

Calculate the target, then check the source

For a chosen density assumption:

• Target width in image pixels = slot width in CSS pixels × density assumption.

• Target height in image pixels = slot height in CSS pixels × density assumption.

For photograph A at density 2, the target is 800 × 2 = 1600 pixels wide and 450 × 2 = 900 pixels high. The planned crop is 2400 × 1350, also 16:9. Scaling that crop by two-thirds gives 1600 × 900 without exceeding the crop's dimensions.

The same crop can supply the planned 800 × 450 variant at density 1. These are two proposed candidates, not evidence that either was exported or selected by a browser.

Illustration B keeps its full 1600 × 1200 source. The chosen density assumption is 1, so its target is 600 × 450. The width scale is 600 ÷ 1600 = 0.375; applying it to the height gives 1200 × 0.375 = 450. All arrows remain inside the full-image bounds, but their visibility after scaling still needs checking.

Diagram C exposes a limit. Density 2 would require 600 × 2 = 1200 by 400 × 2 = 800 pixels. Its source has only 900 × 600. The source-bound proposal keeps 900 × 600, equivalent to 900 ÷ 600 = 1.5 image pixels per CSS pixel at this slot. Mark the target as unmet; do not label it a completed density-2 variant.

A larger original is one possible next step. Another layout assumption, 450 × 300 CSS pixels, would fit 900 × 600 at density 2. That arithmetic does not show that the smaller display keeps the labels readable. Check the reader's need before choosing that alternative.

Plan what the crop retains

Crop coordinates in the worksheet start at the source image's top-left corner. For A, x=300 and y=300 with a 2400 × 1350 crop ends at x=2700 and y=1650. This removes 300 pixels from each side, 300 from the top and 350 from the bottom.

The invented critical-content box for the hand, spout and pot starts at x=1100, y=600 and measures 800 × 800 pixels. It falls inside the proposed crop rectangle. That verifies the declared geometry, not the appearance of a real photograph. Before exporting a real crop, inspect whether the useful action, surrounding context and any important edge detail remain visible.

B and C use the full source rectangle. Keeping every pixel avoids a crop decision, but it does not prove that arrows or text will remain understandable at the intended display size.

Reuse the plan before uploading

Use the image size plan template to copy the filled pattern for your own article. It includes the same teaching decisions and a reusable record with separate input, calculation, proposal and verification fields.

Replace the invented source dimensions and slot with checked values. Identify the content that must survive. Calculate the target, record any source shortfall, and choose a crop or full-image scale. Leave unavailable facts as Unknown; zero means something different.

After you actually export a candidate, inspect its file dimensions and view it in the real article at the intended desktop and phone layouts. Check the subject, arrows and text, and record which candidate is actually displayed. Those checks remain unperformed in this teaching plan; it reports no file-size, loading-time or search-performance improvement.

If this belongs to an update of an existing article, use the refresh guide for the wider edit decision. The primary-keyword guide helps keep its answer focused. This worksheet ends with a specific, source-bounded pixel-and-crop proposal and an honest list of what still needs visual verification.