Qiita 是一個入口網站，為軟體工程師提供使用者生成的知識庫、部落格和論壇。該公司由 Hiroshige Umino 於 2011 年創立，包括招聘服務 Qiita Jobs 和內部資訊共享服務 Qiita Team。該入口網站為日本最大的工程師社區之一提供服務。

日本軟體工程師前往 Qiita 入口網站分享他們的集體知識，並每月渲染多達 250 萬張圖像 - 從部落格圖形到個人資料頭像和 OGP 內容。對於超過 300M CDN 請求，這相當於平均 14TB 的頻寬。

“作為開發者社區最佳實踐的主要來源，Qiita 處於網絡性能的最前沿，提供最快的頁面下載和最佳的用戶體驗，這一點至關重要。”

- Toshifumi Kiyono，產品開發經理

Qiita 使用 Ruby on Rails 作為其 Web 應用程式框架，並使用 React 腳本來配置其前端。對於其圖像內容，他們實施了 AWS CloudFront，其中 Lambda@Edge 作為其 CDN，Camo 作為用於 HTTPS 轉換的 SSL 映像代理。 URL 查詢參數啟用動態圖片調整大小和壓縮。

由於多種原因，Qiita 沒有獲得他們所需的性能。 Lambda@Edge 無法處理大於 1MB 的圖像，而且他們上傳的檔案通常要大 10 - 20 倍。 Lambda@Edge 花了太多時間來識別瀏覽器類型和檔案格式（WebP 或非 WebP）並添加無損壓縮。為了避免任何缺少快取的映像載入時間超過 1 秒，Qiita 必須配置 CloudFront 來產生快取。

“我們的用戶根本沒有看到優化的圖像，”Kiyono 說。確實出現的圖像尺寸或裁剪不當，並且下載時間太長。糟糕的圖形品質和緩慢的頁面載入導致網站整體效能不佳：快取命中率低、SEO 排名低、轉換率低。

“我們的開發人員花費了大量時間來嘗試使圖像轉換發揮作用，我們確實需要為此提供可靠且易於實施的服務。”

- Toshifumi Kiyono，產品開發經理

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 現在可以在 200 毫秒至 300 毫秒內向支援的瀏覽器傳回 WebP 格式的圖形，並且不會減慢向不支援的瀏覽器發送漸進式 .jpg 的速度。它還增加了無損壓縮，不會失去任何節拍，並且在沒有快取的情況下，反應速度比以前的 CDN 快五倍（從 1000 毫秒到 200 毫秒）。

“其他圖像轉換產品可以進行一些相同的基本優化，但 imgix API 包含許多更重要的功能。”

- Toshifumi Kiyono，產品開發經理

Qiita 能夠添加多行文字和疊加層等。 Kiyono 還引用了 imgix 的大量文件、說明性範例圖像和編寫良好的範例程式碼。更重要的是，Qiita 開發人員不會花時間開發後端功能，而這些功能可以透過專門的 imgix SaaS 更好、更經濟地完成。