Seven hundred pixels is the whole stage
Medium's reading column is narrow on purpose, and the markup on Medium's own handbook gives the number: an in-column image renders at 700 pixels, with a 1400-pixel version listed for dense screens. That is the stage. The wider placements, past the column edge or across the screen, only appear on the toolbar when the image is at least 1192 pixels wide, per Medium's help center.
Here is where most article GIFs die. A capture from a 2560-wide display gets squeezed into 700 pixels and the 12-pixel labels in your interface come out at three. Crop to the panel where the action happens, keep the crop near native pixel size, and let the wallpaper and the dock go. Export 700 to 800 pixels wide for a single control, and 1200 or more only when the loop earns a wider placement. The capture itself, from Cmd-Shift-5 to the Game Bar, is on the screen recording page.
The CDN leaves animated GIFs alone, so the reader gets all of it
We checked rather than assumed. Medium serves images through miro.medium.com with a resize instruction in the URL: fit:700 for the column, fit:1400 for dense screens, and a fill:224:224 thumbnail crop. For the two GIFs in Medium's own handbook, every one of those URLs returned the identical file, byte for byte, at its original 3412 by 1658 pixels. One weighs 17 MB. As of this writing, the resize step skips animated GIFs.
So the 25 MB ceiling is not a budget, it is a cliff. What you upload is what every reader downloads, on a 700-pixel column or a 360-pixel phone alike. Plan for 2 to 5 MB on a UI loop, under 2 near the top of the story. Four levers, in order of payoff:
- Trim to the beat. Four to six seconds is a loop; twenty is a screencast.
- Drop the frame rate. Menus and cursors read at 10 to 12 fps; 60 fps is five frames for every one you need.
- Thin the palette. Flat interface chrome usually survives 64 colors. Climb toward 128 only when a gradient bands.
- Turn on Extra Compression. The middle setting typically takes another 30 to 50 percent off, for mild grain that flat UI hides.
The projected size updates with every dial, so you hit the target before export. A finished GIF that still weighs too much goes through the compress page.
Into the draft: the plus button, and the Giphy side door
New line, the plus button on the left, the Image icon, pick the .gif, or drag it onto the draft. Medium accepts .JPG, .JPEG, .GIF, and .PNG up to 25 MB. Select it and the placement options appear, if the file is wide enough. Click Alt text and describe what the loop shows; a screen reader gets nothing from motion. Type the caption beneath as the step label (no italics there). Cmd or Ctrl plus K links the image to the real product.
The second door is for GIFs you do not own. Paste a Giphy or Imgur link on its own line, press Enter, and Medium turns the URL into the GIF through Embedly. Embed code is not supported; the bare link is the whole mechanism. Right for a reaction shot. For your own demo, upload the file, so the loop never depends on someone else's hosting once the story is live.
Where a GIF hurts a Medium story
Medium is a reading product first, and a GIF is an image tag with no pause button. Pretending otherwise produces worse articles. Skip the GIF when:
- The story is long and the loop is incidental. It runs the whole time the reader is on that screen, competing with every sentence. If the paragraph proves the point alone, cut it.
- It runs past fifteen seconds or needs a voice. Medium's editor takes video as a pasted link, as of this writing. Drop a YouTube or Vimeo URL on its own line and let the player carry the sound.
- You want it as the cover. The featured image gets cropped into share cards and story listings at thumbnail size, and in our test the CDN returned the full file even for a 224-pixel crop. Use a still cover; the loop lives in the body.
- Nothing actually moves. A screenshot saved as a GIF is a 256-color PNG with worse compression. Export the PNG.
The strong article GIF is small in every sense: a few seconds, one interaction, directly under the sentence that needs proof. The product demo guide covers pacing when one loop carries a whole feature.
The first server to see your loop should be Medium's
A Medium draft stays private until you publish, which is the whole appeal of writing there: the launch post before the feature ships, the teardown of your own app while it is still in TestFlight. Route that footage through an upload-first converter and the arrangement breaks quietly. The first server to hold your loop belongs to a stranger, days before the story goes live.
This converter runs inside the browser tab. Decoding, palette building, and frame packing all happen there, and the .gif drops into Downloads with no request in between. The only upload in the process is the one you make into the draft, so Medium's server sees the loop first, and only when you are ready.
For a web app, Record a Tab captures the tab through the browser's share picker (desktop only, real time), and a shape overlay blocks out a customer's email before export.