OpsLevel Logo
Product
Developer portal
Software catalog
Understand your entire architecture at a glance
Standards
Your guide to safe, reliable software
Developer self-service
Empower developers to move faster, risk-free
Integrations
Connect your most powerful third-party tools
Use Cases
Ownership
Build accountability and clarity into your catalog
Standardization
Set and rollout best practices for your software
Developer Experience
Free up your team to focus on high-impact work
Customers
Resources
All Resources
Our full library of resources
Pricing
Flexible and designed for your unique needs
Podcast
Podcast
Conversations with technical leaders
Blog
Blog
DevOps resources, tips, and best practices
Demo
Demo
Videos of our product and features
Tech talk
Tech talk
Our POV on technical topics
Guide
Guide
Practical resources to roll out new programs and features
DocsLog In
Talk to usTry for free
No items found.
Share this
Table of contents
 
Resources
Blog

Ultra-Fast Thumbnail Generation with Jekyll and libvips

Product
DevX
Developer
Ultra-Fast Thumbnail Generation with Jekyll and libvips
Kenneth Rose
|
May 10, 2021
Ultra-Fast Thumbnail Generation with Jekyll and libvips

How we started: thumbnails with smartcropper

In the very early days of OpsLevel, our marketing website was powered by WordPress.  Even though our site then was small, WordPress was a pretty big moving part that required more maintenance than it was worth.  We found ourselves spending time on upgrading both WordPress and its plugins, debugging when things broke, and managing performance.  We also found that drafts were not a great workflow for previewing or staging changes as the live production site wouldn’t always look the same as a draft edit.

In mid-2019, we hopped aboard the Jamstack train and rebuilt our site (this site you’re reading now) using Jekyll.

One feature we wanted for our blog posts was automatic thumbnail generation.  Every blog post has a hero image (like the speedometer above) and we wanted smaller versions of this image for the blog index page.

We found Kari Silvennoinen’s blog post which describes a mechanism for using the smartcropper gem in a Jekyll generator.

We refactored things a bit for our use case (we generate multiple thumbnail sizes and also allow selectively overriding thumbnails).  However, the main call to smartcropper was nearly identical to Kari’s:

At the time, this change increased the build time of our site slightly.  Building the entire site would take about 10 seconds in devlocal and a few minutes to build on Netlify for production.  Not terrible and hey, we’re generating thumbnails, so obviously that’s going to take some time.

Bigger Site, Slower Build

Fast forward two years and we now have a lot more blog posts, which meant more thumbnails to generate.  During this period, the build time of our site creeped up to 30s - 40s for devlocal and 12+ minutes on Netlify.  Developing or changing our site was painful.  95% of the time was spent generating thumbnails, so we investigated to see if there was a better way.

Under the covers, smartcropper uses RMagick, which is Ruby interface for ImageMagick.

After some research, we found jekyll_picture_tag, which is based on libvips.  libvips bills itself as:

 libvips is a demand-driven, horizontally threaded image processing library. Compared to similar libraries, libvips runs quickly and uses little memory.

That sounds promising.  Let’s put it to the test.

libvips supports the same entropy-based cropping as smartcropper, so it was a straightforward replacement in our generator.  Here’s our new implementation of crop_and_scale:

libvips is fast

We profiled site build time with both smartcropper and libvips.

This is the output of jekyll build --profile:

🤯

Generating thumbnails with libvips is nearly 10x faster than smartcropper.

Ten.  Times.  Faster.

Full site builds now take < 4 seconds in devlocal and < 60 seconds on Netlify for production.  In addition, using Jekyll’s --incremental option in devlocal makes editing nearly instant.

The full implementation

Here’s our full implementation for generating thumbnails in Jekyll.

It’s pretty simple, but supports generating multiple thumbnails from a single image.  It also supports overriding thumbnails with an explicit file.

Put the following in _plugins/post_thumbnail_generator.rb:

‍

To specify the various thumbnail dimensions, add or customize the following in your _config.yml:

‍

In your posts, you can set thumbnail in the front matter.  For example, here’s this post’s front matter:

‍

Check us out

If you’re interested in performance, microservices, or helping teams adopt DevOps and service ownership, check out our open roles.

More resources

Blog
September 19, 2023
by
Fernando Villalba
The OpsLevel Developer Experience (DevEx) series. Part 1: What is DevEx?

Great developer experience (DevEx) is what you get when developers can easily achieve and maintain flow state at work. This article begins a series where we tackle all of the areas that affect flow state and impair your developer experience at your company and provide example metrics and suggestion to help you operate like a potential future unicorn.

Blog
August 31, 2023
by
OpsLevel
August 2023 release notes

This month included an update to our Service Maturity features—to give you even more flexibility—plus more sorting and syncing improvements. Read on to learn more!

Blog
May 31, 2023
by
Haley Hnatiw
May 2023 release notes

See what we’ve shipped in the month of May.

OpsLevel Logo
Subscribe
Join our newsletter to stay up to date on features and releases.
By subscribing you agree to with our Privacy Policy and provide consent to receive updates from our company.
SOC 2AICPA SOC
Product
Software CatalogMaturityIntegrationsSelf-serviceRequest a demo
Company
About usCareersContact UsCustomersPartnersSecurity
Resources
Docs
Blog
Demo
© 1999 J/K Labs Inc. All rights reserved.
Cookie Preferences
Terms of Use
Privacy Policy
Responsible Disclosure
By using this website, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View our Data Processing Agreement for more information.
Okay!