FIELD NOTE / 06
Build a blog header that survives mobile
Three downloadable exports show what a centered crop removes and what margins preserve.
Define a real placement
Our example is a blog article about a fictional ceramic design. The desktop slot is 1200 × 800; a portrait preview is 800 × 1200. These are workshop choices, not mandatory website dimensions. Keep the article title as HTML above the image. A baked-in title may become too small on a phone, and a long translated headline needs more room than a short English one. Choose the placement before paying for a new generation.
Compare the three actual exports
The landscape crop fills the frame, preserving the vessel shape while cutting more of the lower pedestal. The landscape fit puts the full square inside an 800 × 800 area, with 200 transparent pixels on each side. Those margins show the background of your page; they are not newly generated scenery. The portrait crop removes the left and right edges. It still cannot restore the pedestal base missing from the source. Download the files below and compare their framing rather than judging only their byte sizes.
Reproduce the result in the tools
Load the ceramic sample. Select Landscape, then Center crop, then WebP at 82%. Prepare the download and save both image and processing notes. Change only the fit mode to Fit entire image and export again. Finally select Portrait and Center crop. Always begin with the saved original: reopening the first compressed export introduces another lossy encode. A 1200-pixel export from a 1024-pixel source is an enlargement; it cannot supply genuine extra detail.
Our decision for this article
For an article discussing the vessel, the landscape crop is usable because the vessel remains visible and no claim is made about the pedestal base. For a design specification requiring a complete stand, reject all three exports and commission a new source. On mobile, first try the same landscape image at width:100% and height:auto. A portrait crop is an editorial alternative, not something every mobile website needs. Check the actual page at a narrow width and verify that a caption does not overlap the image.
Download and inspect the actual files
All exports below were produced with this site’s local tools on October 17, 2026. They are processed versions of one existing AI image, not new generations.
1200 × 800 · 7,032 bytes
Download image ↓
1200 × 800 · 6,222 bytes
Download image ↓
800 × 1200 · 7,410 bytes
Download image ↓
Try this workflow
Use our saved 1024 × 1024 AI sample. No generation credit or file upload needed.
Open image tools ↗From idea to a published blog image
A practical path for blog authors and small website owners. Work with the saved sample, inspect the evidence, then apply the method to your own article.