動的画像変換サービス「imagepix」のご紹介
2K Views
February 09, 24
スライド概要
東京のWebシステム開発会社です。
関連スライド
Meta XR SDK(V66-74)でQuestアプリを開発
あうぜん
1.1M
各ページのテキスト
イメージピックス 動的画像変換サービス imagepix のご紹介 株式会社スマートアルゴリズム
ユーザーがアップロードした画像、 どうしてますか？
アップロードされた画像のよくある取り扱い ● ユーザーは意図するかしないかに関わらず大きなサイズの画像をアップロー ドする ● アップロードされた画像はシステム上そのままでは使わず、小さくしてから使 う ● アップロード時に小さな画像を生成してオリジナル画像と一緒に保存してお き、使うときはあらかじめ生成しておいた画像を使う ● Core Web Vitals を考慮し、次世代フォーマットの画像（ WebP）もアップロー ド時に生成する
事前に画像を生成しておく方式の特徴 メリット ● 画像を使う際、生成しておいた画像を単純に参照するだけで済む ● 画像の生成処理に多少時間がかかっても問題ない デメリット ● 表示する場所やデバイスによって画像のサイズやフォーマットが異なる場合、 様々な種類の画像を生成しておく必要がある ● 画像のサイズやフォーマットを変えたい場合、画像の生成処理を変更するだ けでなく既存のものに対しても生成する必要がある
imagepix を使えば オリジナルの画像を持っておくだけでOK！
imagepix をおすすめしたいシステムの特徴 ● 画像を表示する箇所が多い ● UIを継続的に改善するため、画像の表示サイズを変える機会が多い ● UXやSEOを考慮し、表示する場所やデバイスによって適切なサイズ・フォー マットの画像を使い分けたい ● 次世代フォーマットの画像（WebP）を使いたいが、WebPの表示に対応してい ない古めの環境にも対応したい imagepix なら、適切な画像を手軽かつ柔軟に使えます！
imagepix のアーキテクチャ概要 ユーザーが利用する 各種デバイス お客様管理の ファイルストレージ imagepix imagepix imagepix CDN Converter Amazon S3 著作者：rawpixel.com／出典：Freepik imagepixのURLで画像にアクセス Converterで一度生成した画像はCDNでキャッシュ 2025年12月現在、Amazon S3のみ対応
imagepix の機能 ● ● 画像のリサイズとトリミング ○ fit アスペクト比を保ったままリサイズ ○ fill 余った部分をトリミングしつつ、指定したサイズで出力 ○ fill_pad 足りない部分を塗りつぶしつつ、指定したサイズで出力 画像のフォーマット変換 ○ 入力フォーマット JPEG, PNG, WebP, GIF ○ 出力フォーマット JPEG, PNG, WebP, GIF ○ WebPとGIFはアニメーションも可能
fit ─ アスペクト比を保ったままリサイズ GET /fit/{width}/{height}/{format}/{quality}/{path:.+} width 横幅を 1〜1920 の数値で指定 height 縦幅を 1〜1920 の数値で指定 format 出力フォーマットを jpeg, png, webp, gif のいずれか で指定 quality クオリティを 1〜100 の数値で指定 path s3://imagepix-demo/sample/portrait.png (427x660, image/png) s3://imagepix-demo/sample/landscape.png (736x317, image/png) https://demo.imagepix.app/fit/300/300/we bp/80/sample/portrait.png (194x300, image/webp) https://demo.imagepix.app/fit/300/300/webp /80/sample/landscape.png (300x129, image/webp) 画像のパスを指定
fill ─ 余った部分をトリミングしつつ、指定したサイズで出力 GET /fill/{width}/{height}/{gravity}/{format}/{quality}/{path:.+} width 横幅を 1〜1920 の数値で指定 height 縦幅を 1〜1920 の数値で指定 gravity 寄せる方向を c, n, e, s, w, ne, se, sw, nw（*1）のい ずれかで指定 format 出力フォーマットを jpeg, png, webp, gif のいずれか で指定 quality クオリティを 1〜100 の数値で指定 path s3://imagepix-demo/sample/portrait.png (427x660, image/png) s3://imagepix-demo/sample/landscape.png (736x317, image/png) https://demo.imagepix.app/fill/300/300/c/ webp/80/sample/portrait.png (300x300, image/webp) https://demo.imagepix.app/fill/300/300/c/we bp/80/sample/landscape.png (300x300, image/webp) 画像のパスを指定 *1 c, n, e, s, w はそれぞれ Center, North, East, South, West の頭文字
fill_pad ─ 足りない部分を塗りつぶしつつ、指定したサイズで出力 GET /fill_pad/{width}/{height}/{gravity}/{background}/{format}/{quality}/{path:.+} width 横幅を 1〜1920 の数値で指定 height 縦幅を 1〜1920 の数値で指定 gravity 寄せる方向を c, n, e, s, w, ne, se, sw, nw（*1）のい ずれかで指定 background s3://imagepix-demo/sample/landscape.png (736x317, image/png) https://demo.imagepix.app/fill_pad/300/3 00/c/red/webp/80/sample/portrait.png (300x300, image/webp) https://demo.imagepix.app/fill_pad/300/300/ c/red/webp/80/sample/landscape.png (300x300, image/webp) 塗りつぶす色を CSS color で指定 format 出力フォーマットを jpeg, png, webp, gif のいずれか で指定 quality クオリティを 1〜100 の数値で指定 path s3://imagepix-demo/sample/portrait.png (427x660, image/png) 画像のパスを指定 *1 c, n, e, s, w はそれぞれ Center, North, East, South, West の頭文字
導入事例：株式会社Vook様 映像クリエイター向けサービス Vook（https://vook.vc）でご利用いただいています。 ユーザーがアップロードした画像から異なるサイズ/フォーマットの画像を 事前に生成していたが、コンテンツや表示箇所によって使用する画像サ イズが異なり、UI変更に対応しきれず無駄に大きなサイズの画像を 使っていた 。また、WebPへの対応ができていない箇所が多くあった 。 imagepixを導入したことで、コンテンツや表示箇所に応じて適切なサイ ズの画像を使用 できるようになった。また、ユーザーがアップロードした 画像の大半を占めるJPEGやPNGの画像を WebPに変換して表示で き、PageSpeed Insightsのスコアも改善 した。
https://imagepix.app