Dynamic Images

I believe software should be smarter than we expect it to be. People shouldn't have to think about resizing images when they're writing a blog post. They should just drag, drop, and continue writing.

So why is it that we expect users to resize their own images before uploading them? We've all been here before:

Manager: "Why is the website so slow?"

Designer: "Someone uploaded a 20MB photo to the footer."

Manager: "Ugh, why doesn't the CMS resize images automatically?"

Designer: 🤷🏻‍♂️

To be fair, this isn't a problem with all content management systems, but it plagues many of them.

Those that do address the issue tend to create multiple versions of the same image as soon as it's uploaded. They're basically guessing what sizes your visitors will need before they actually need them. Sure, it's better than nothing, but what if...🤔

A Dynamic Approach

What if you could upload photos without ever worrying about file sizes or dimensions? Thanks to a new feature called Dynamic Images, Postleaf is smart enough to take care of all this for you, ensuring visitors only see images that are optimized for their device.

This is convenient for publishers since it saves time; it's great for visitors because pages load faster; and it's especially useful for users who may not even know how to resize their own images.

With Dynamic Images, you'll never need to worry about someone uploading an image that's too big ever again.

How It Works

When an image is uploaded, it gets stored as-is in your uploads folder. Postleaf doesn't generate multiple versions of the same image at every possible size and shape. Nor does it clutter up your file system with all these variations.

With Dynamic Images, everything happens on-the-fly. Images get resized based on whatever dimensions the visitor's browser requests. Once an image is resized, the resulting file gets cached, making future requests virtually instantaneous.

You may be thinking, "how is this different from generating multiple versions of the image when I upload it?"

It's different for a number of reasons:

One, you're not limited to specific sizes with Dynamic Images. You can request any size you want (although the editor does "snap" responsive variations every 200px to improve performance and save disk space).

Two, these files don't exist in your uploads folder, making it easier to browse should you ever need to. This also reduces the size of backups considerably.

Three, you can delete the cached images anytime. If they're requested again, Postleaf will simply regenerate them.

And last but not least, the reason you're going to fall in love with Dynamic Images...

Manipulation

Since image processing is done on the fly, this opened things up for manipulation as well. This is incredibly useful for theme designers, who have never had this much control over how images are used inside of themes.

Here's what you can already do with Dynamic Images:

  • Resize
  • Crop
  • Generate thumbnails
  • Rotate
  • Flip
  • Grayscale
  • Colorize
  • Blur (especially useful for background images)
  • Color reduction
  • Specify JPEG quality

This is revolutionary. A designer can, for example, tell his theme to render a cover photo at a specific width, apply a beautiful blur effect, and tint the image a perfect shade of blue. No matter what image the user uploads, the result will always be consistent.

Sure, some of this can be done with CSS, but cross-browser inconsistencies and workarounds for background images often make CSS an undesirable option.

Performance

Images are processed and cached to disk the first time they're requested. After that, they're served directly from cache, resulting in a minimal impact on performance.

Security

The biggest concern with Dynamic Images initially was security. Since options are specified via query string, an attacker could ping your server with a ton of requests to resize images, resulting in a resource spike and potential storage issues.

I've addressed this by requiring signed URLs for all dynamic images. Requests will be denied if the URL doesn't contain a valid key, which is generated internally by Postleaf.

Dynamic Images In Content

Dynamic images in post content are automatic. Instead of this:

<img src="image.jpg">

Images will be rendered like this:

<img src="image.jpg" srcset="image.jpg?width=200 200w, image.jpg?width=400 400w, ...">

Supportive browsers will use the srcset attribute to load the most appropriate image based on the visitor's screen size. (Note: actual URLs need to be signed; signatures are omitted in this example for brevity.)

Dynamic Images in Themes

Theme designers can use the {@dynamicImage/} helper to make a normal image dynamic. For example, here's how to set a width and apply a blur effect to your website's cover photo:

{@dynamicImage src=Settings.cover width="500" blur="20"/}

The resulting URL can be used in a src attribute, a background image, or anywhere else you'd use an image in your theme.

Pretty easy, right? I think so too. I can't wait to see how you'll use Dynamic Images in your next project!