Qiita is a web portal that empowers software engineers with user-generated knowledge bases, blogs, and forums. Founded in 2011 by Hiroshige Umino, it includes Qiita Jobs, a recruiting service, and Qiita Team, an internal information sharing service. The portal serves one of the largest engineer communities in Japan.

Japanese software engineers go to the Qiita web portal to share their collective knowledge and render up to 2.5M images a month — from graphics for blogs to profile avatars and OGP content. This can amount to an average of 14TB of bandwidth for over 300M CDN requests.

“As a primary source of best practices for the developer community, it is vital that Qiita is at the cutting edge of web performance with the fastest possible page downloads and the best user experience.”

- Toshifumi Kiyono, Product Development Manager

Qiita uses Ruby on Rails as its web-app framework and React scripts to configure its frontend. For its image content, they had implemented AWS CloudFront with Lambda@Edge as their CDN and Camo as their SSL image proxy for HTTPS conversion. URL query parameters enabled dynamic image resizing and compression.

Qiita wasn’t getting the performance they needed for a number of reasons. Lambda@Edge wouldn’t handle images greater than 1MB, and their uploads regularly included files 10 – 20 times larger. It took too much time for Lambda@Edge to discern browser types and file formats (WebP or not) and to add lossless compression. To avoid 1+ second load times for any image that lacked a cache, Qiita had to configure CloudFront to generate one.

“Our users were not seeing optimized images at all,” says Kiyono. The images that did appear weren’t sized or cropped well and took too long to download. The poor graphic quality and slow page loads resulted in poor website performance overall: low cache hit rates, low SEO rankings, and low conversion rates.

"Our developers were spending so much time trying to make image transformation work, we really needed a reliable, easy-to-implement service for this."

- Toshifumi Kiyono, Product Development Manager

The team at Qiita considered first optimizing all the images used in an article and then saving them to S3, but if later they needed to reduce the image size, they’d need to re-optimize all of them as well as update their URLs. Recognizing that generating and maintaining a solution in-house would require too much operational overhead, they looked for a third-party SaaS answer.

‍

To improve the customer experience by reducing page weights, speeding page loads, and optimizing image quality, Qiita migrated to the imgix integrated processing and delivery CDN that combines worldwide reach and advanced image optimization and processing via a URL API. They quickly integrated the solution in their native Ruby environment using imgix-rb, a client library for generating image URLs.

"imgix documentation and SDKs are very intuitive, we had things online very quickly, and the imgix Rendering API is much more robust than what other CDNs offer."

- Toshifumi Kiyono, Product Development Manager

Qiita stores its source images in Amazon S3 and simply passes the bucket name and the identity and access management (IAM) key for access. These graphics include blog post images and user avatars, and the imgix-rb Ruby library works seamlessly with Open Graphics Protocol (OGP) content as well.

According to Kyonno, “Our first step with imgix-rb was to enable using the srcset attribute for all our images instead of serving images statically from our server.” Implementing this best practice for responsive images was just the beginning, and the Qiita team quickly learned about and took advantage of other imgix functions including the most-used functions listed below:

• s adds a layer of security to Qiita images by blocking unauthorized altering of URLs.
• gif imgix supports animated and static gifs, and Qiita uses these across the website.
• fm sets a number of lossy, lossless, and transparent output formats such as WebP, png32, and JPEG.
• q enable setting output quality lower than the default when serving high-DPR images.
• fit resizes an image to fit the target size.

Kiyono says, “Moving forward, I’m sure we will start using the <picture> element and we may experiment with lazy loading using the imgix.js lazysizes scripts.”

With the imgix CDN and its image transformation capabilities, Qiita is able to distribute large (>1MB), high-quality image files with much faster page loads. In a recent test run, a 23MB image was "Fully Loaded" in 3.51s after a nearly 23-1 reduction in data. Before imgix, the load took 40.67s. This automated compression is especially important for presenting Qiita’s progressive web apps (PWA) with virtually no time lag.

Qiita can now return WebP-formatted graphics in 200ms – 300ms to supported browsers and doesn’t slow down sending progressive .jpgs to browsers that don’t. It also adds lossless compression without missing a beat, and responds five times faster (from 1000ms to 200ms) than their previous CDN when there’s no cache.

"Other image transformation products can do some of the same basic optimizations, but the imgix API includes many more very important capabilities."

- Toshifumi Kiyono, Product Development Manager

Qiita was able to add multiline text and overlays, among other things. Kiyono also cited imgix’s extensive documentation, illustrative example images, and well-written sample code. What’s more, Qiita developers aren’t spending time working on backend functionality that can be done better and more economically by specialized imgix SaaS.