動的画像変換サービス「imagepix」のご紹介

Transcript

1. 動的画像変換サービス imagepix のご紹介
   株式会社スマートアルゴリズム
   ※ imagepix は現在ベータテスト中です
   イメージピックス
   

   View Slide

2. ユーザーがアップロードした画像、
   どうしてますか？
   

   View Slide

3. ● ユーザーは意図するかしないかに関わらず大きなサイズの画像をアップロー
   ドする
   ● アップロードされた画像はシステム上そのままでは使わず、小さくしてから使う
   ● アップロード時に小さな画像を生成してオリジナル画像と一緒に保存してお
   き、使うときはあらかじめ生成しておいた画像を使う
   ● Core Web Vitals を考慮し、次世代フォーマットの画像（WebP）もアップロード
   時に生成する
   アップロードされた画像のよくある取り扱い
   

   View Slide

4. メリット
   ● 画像を使う際、生成しておいた画像を単純に参照するだけで済む
   ● 画像の生成処理に多少時間がかかっても問題ない
   デメリット
   ● 表示する場所やデバイスによって画像のサイズやフォーマットが異なる場合、
   様々な種類の画像を生成しておく必要がある
   ● 画像のサイズやフォーマットを変えたい場合、画像の生成処理を変更するだ
   けでなく既存のものに対しても生成する必要がある
   事前に画像を生成しておく方式の特徴
   

   View Slide

5. imagepix を使えば
   オリジナルの画像を持っておくだけでOK！
   

   View Slide

6. ● 画像を表示する箇所が多い
   ● UIを継続的に改善するため、画像の表示サイズを変える機会が多い
   ● UXやSEOを考慮し、表示する場所やデバイスによって適切なサイズ・フォー
   マットの画像を使い分けたい
   ● 次世代フォーマットの画像（WebP）を使いたいが、WebPの表示に対応してい
   ない古めの環境にも対応したい
   imagepix なら、適切な画像を手軽かつ柔軟に使えます！
   imagepix をおすすめしたいシステムの特徴
   

   View Slide

7. imagepix のアーキテクチャ概要
   imagepix お客様管理の
   ファイルストレージ
   imagepix
   CDN
   imagepix
   Converter
   Converterで一度生成した画像は
   CDNでキャッシュ 2023年1月現在、Amazon S3のみ対応
   imagepixのURLで画像にアクセス
   Amazon S3
   著作者：rawpixel.com／出典：Freepik
   ユーザーが利用する
   各種デバイス
   

   View Slide

8. ● 画像のリサイズとトリミング
   ○ fit アスペクト比を保ったままリサイズ
   ○ fill 余った部分をトリミングしつつ、指定したサイズで出力
   ○ fill_pad 足りない部分を塗りつぶしつつ、指定したサイズで出力
   ● 画像のフォーマット変換
   ○ 入力フォーマット JPEG, PNG, WebP, GIF
   ○ 出力フォーマット JPEG, PNG, WebP, GIF
   ○ WebPとGIFはアニメーションも可能
   imagepix の機能
   

   View Slide

9. GET /fit/{width}/{height}/{format}/{quality}/{path:.+}
   fit ─ アスペクト比を保ったままリサイズ
   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)
   

   View Slide

10. GET /fill/{width}/{height}/{gravity}/{format}/{quality}/{path:.+}
    fill ─ 余った部分をトリミングしつつ、指定したサイズで出力
    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 の頭文字
    

    View Slide

11. GET /fill_pad/{width}/{height}/{gravity}/{background}/{format}/{quality}/{path:.+}
    fill_pad ─ 足りない部分を塗りつぶしつつ、指定したサイズで出力
    width 横幅を 1〜1920 の数値で指定
    height 縦幅を 1〜1920 の数値で指定
    gravity
    寄せる方向を c, n, e, s, w, ne, se, sw, nw（*1）のい
    ずれかで指定
    background 塗りつぶす色を CSS color で指定
    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_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)
    *1 c, n, e, s, w はそれぞれ Center, North, East, South, West の頭文字
    

    View Slide

12. ユーザーがアップロードした画像から異なるサイズ/フォーマットの画像を
    事前に生成していたが、コンテンツや表示箇所によって使用する画像サ
    イズが異なり、UI変更に対応しきれず無駄に大きなサイズの画像を使っ
    ていた。また、WebPへの対応ができていない箇所が多くあった。
    導入事例：株式会社Vook様
    映像クリエイター向けサービス Vook（https://vook.vc）でご利用いただいています。
    imagepixを導入したことで、コンテンツや表示箇所に応じて適切なサイ
    ズの画像を使用できるようになった。また、ユーザーがアップロードした
    画像の大半を占めるJPEGやPNGの画像をWebPに変換して表示で
    き、PageSpeed Insightsのスコアも改善した。
    

    View Slide

13. imagepix 導入までの流れ
    メールにてお問い合わせいただき
    ます。imagepix がお客様のシス
    テムにマッチするかどうか
    ご担当
    者様にヒアリングさせていただき、
    ご契約となります。
    4. システムへの組み込み
    3. セットアップ
    2. アクセス情報のご提供
    1. お問い合わせ・ご契約
    imagepix がお客様管理のファイ
    ルストレージにアクセスできるよう
    に、アクセス情報をご提供いただき
    ます。
    弊社の担当者がお客様専用の環
    境をセットアップいたします。
    作業
    は通常、2営業日以内には完了
    い
    たします。
    お客様のシステムに imagepix を
    組み込んでいただきます
    。ご不明
    な点がございましたら、遠慮なく弊
    社の担当者にお問い合わせくださ
    い。
    なお、JavaScript用のクライアント
    ライブラリを用意しております。
    https://www.npmjs.com/packag
    e/@imagepix/client
    

    View Slide

14. imagepix のご利用料金
    imagepix 参考：他社サービスA
    基本料金 無料 5,500円/月
    データ転送量200GiB、リクエスト数5,000回、
    変換回数1,000回を含む
    データ転送量 1GiB あたり 30円 1GiB あたり 38.5円
    リクエスト数 10,000回 あたり 3円 10,000回 あたり 11円
    変換回数 100回 あたり 3円 100回 あたり 5.5円
    ● 料金はすべて消費税込みの金額です
    ● ご契約から30日間はトライアル期間として、すべての機能を無料 でご利用いた
    だけます
    

    View Slide

15. お問い合わせ
    メールアドレス contact@smartalgorithm.co.jp
    運営会社 株式会社スマートアルゴリズム
    代表者名 代表取締役　齋藤 和也
    営業時間 月〜金 10:00〜18:00　※土日祝日は定休日
    ホームページ https://smartalgorithm.co.jp
    imagepix についてのご質問やご相談は、メールにて受け付けております。
    下記メールアドレス宛にお問い合わせください。
    なお、土日、祝日を挟む場合、および、お問い合わせ内容によりましては、ご回答を差し上げるまでに日数が
    かかる場合がございます。予めご了承ください。
    

    View Slide