Publishing sharper images on Medium (and what Medium could do to improve)

(Note: view this article on a standard, non-Retina screen, if you can!)

Medium is primarily known as a platform for the written word, but photography is an important element in many published articles. Considering my background, I have a particular interest in image uploading and publishing software, so I was curious to see how Medium handled it. As part of that discovery process, there was one particular area I noticed that could be easily improved by their engineering and front-end design team: image preset sizes.

Let’s start with how (I assume) most people use Medium: upload a big ol’ image and let the system take care of the rest. Easy peasy. For illustration purposes, here’s a photo of my son, Drake.

5472px wide original image

Medium has taken my original, 5472px wide JPEG (exported from a RAW image file in Adobe Lightroom) and generated a smaller image to fit the width of the article’s column. This helps Medium keep image file sizes to a minimum while also optimizing page load time for readers. Perfectly normal.

If however you take a look at the file Medium generated, things get a bit strange. The generated image has a width of 800px. Medium articles have a maximum column width of 700px. This discrepancy forces the browser to proportionally downscale the generated image 100px to fit the column.

Now, web designers in the room will likely shrug and say, so what? That’s just how image sizing works with responsive page layouts. True, but in Medium’s case, their default image size presets simply aren’t optimal. By generating an 800px image on the backend and then relying on browsers to make up the difference, an unnecessary amount of image quality, color and sharpness is being lost.

I say “unnecessary” because Medium controls both the backend and the frontend of their platform. If Medium offered a variety of themes with varying page layouts and column widths, the size of the default, baseline image preset would be mostly irrelevant. But in the case of Medium, they effectively have only one theme, and unless they have plans to change this in the future they could optimize the user experience around the dimensions of their article page layout.

To prove my point, let’s see what happens if we try to fool Medium into publishing a better image. From the same RAW file in Lightroom, this time I exported a 700px wide JPEG. Here’s the result:

700px wide original image

Once again, Medium has generated a new image, but if you’re viewing this article on a desktop or laptop with a standard resolution screen, you should see an improvement. This image is sharp, not blurry. The skin tone is richer and warmer too. Why? Because there’s now a 1:1 relationship between the width of the image Medium generated and the maximum width of the article layout (both 700px).

This returns improved results for inline images, but there’s a downside. By uploading an image at the exact width of the column, the image cannot be viewed in the lightbox (for Medium disables it) and a higher resolution version of the image will not be published for those reading the article on Retina/Hi-DPI screens.

Speaking of the lightbox, it actually reveals a clue as to how Medium could optimize their image publishing. That super large image we uploaded at the beginning? In addition to the 800px image, Medium also generated a 1600px version. This is the maximum image size Medium generates for use in the lightbox and for 2x images on Retina/Hi-DPI screens.

I know what you’re thinking. Export images at 1600px on their longest edge! The images look great when viewed large, but our original downscaling problem for the inline image still exists. Medium takes that uploaded 1600px image, creates an 800px copy, then we’re back in the same 100px downscale issue was saw before.

Way I see it, there a couple of ways Medium could improve their images:

  • One, change the backend image presets to 700px / 1400px. This would provide an even, 2x multiple that would publish perfectly sized inline images that look great on standard and hi-resolution displays and offer more than enough pixels for the lightbox and larger image layouts.
  • Two, change the article max-width to 800px. This extra 100px of width will then match the image preset sizes that are already being used.

If there’s an angle to this story I haven’t considered (which wouldn’t surprise me), please feel free to share your thoughts.

Like what you read? Give Todd Dominey a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.