dev.to re-encodes and crops your cover image, and I measured exactly where the crop lands
I had a cover image with a line of small text near the left edge. On the post page it looked right. In the feed card it was gone. Not clipped, not small, absent, and I could not reproduce it by resizing my browser. The image you see on dev.to is not the image you uploaded. It comes through a transform proxy, and the parameters in the proxy URL decide what happens to your pixels. There are two…
Dev.to re-encodes and crops your cover image, and a reporter measured the exact location of the cropping. The platform uses a transform proxy that applies different parameters depending on where the image appears. There are two parameter sets in play, behaving oppositely. The "cover" mode returns the exact box requested, while the "inline" mode preserves aspect ratio and fits the whole image inside the box.
The proxy returns WebP format, regardless of the source file. The dimensions of the returned WebP image vary, with a 1000x420 PNG yielding a 400x400 image in "cover" mode and a 400x168 image in "inline" mode. The reporter discovered that the exact dimensions and cropping behavior of the proxy are determined by the URL parameters, which cannot be controlled by the author.
The reporter found that generating covers at exactly 1000x420 and ensuring meaningful content stays away from the edges could mitigate the cropping issue. Inline images should be generated at 1600 wide for retina, with any height, and file size considerations should be set aside.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
