$30 off During Our Annual Pro Sale. View Details »

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

mokichi
October 12, 2022

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

mokichi

October 12, 2022
Tweet

More Decks by mokichi

Other Decks in Technology

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

    View Slide