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:
This works great for all the various image sizes we display throughout the app.
|home (schedule, recently viewed, recently added)
|comment image thumbnail
|gallery (full page image)
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
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.