On Recipeyak, users upload images for recipes and we display them throughout the app.

For pages with many images, we don’t want to show full size images if they only display at 200 pixels wide. Browsers are slow to render many large images.

The solution is to use smaller images.

Generating smaller images

We could resize our images into a set of predefined sizes. But we’d need to figure out those sizes ahead of time. Also, if we need other sizes in the future, we’d need to backfill older uploads.

A simpler solution is to use an on demand image optimization service, like Imgix.

With Imgix, we can request any image size we want at request time via a query parameter. So if we wanted our image to be 100x100px, we can rewrite our URL with this query parameter:

https://example.com/image_4032.jpeg?h=100&w=100

This works great for all the various image sizes we display throughout the app.

size (px) page
25x25 calendar
40x40 nav search
48x48 home (schedule, recently viewed, recently added)
60x60 schedule modal
100x100 comment image thumbnail
244x180 list recipes
620x413 recipe
~1200x900 gallery (full page image)
1200x910 Open Graph

In reality we only use a few image sizes in the app, but Imgix makes it easy to experiment and add new variants.

  • 1200 pixels wide
  • 200 pixels wide
  • 1200x910 pixels

Improving caching

Imgix takes a noticeable amount of time to generate an image variant. With their caching this is less of an issue, but I’ve found the cache expires too quickly. So I placed Bunny.net in front and enabled PermaCache, to ensure that image variants are cached forever.

Finding a cheap solution

Imgix has excellent docs and works well, but the free tier has a relatively small limit of 1000 source images.

For Recipeyak we have over 1,200 images now and recently hit this free tier limit. With the basic plan of $75/month way outside our cheap budget for Recipeyak, we needed an alternative.

Imagekit.io was the first contender. With drop-in support for Imgix’s API and a generous free tier, it worked great. Until we uploaded a JPEG 2000 (.jp2) image, which Imagekit doesn’t support.

Now we’re using Twicpic, which doesn’t have as nice of an API as Imgix, but has a decent free tier and supports all of our image formats.