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

Transcript

1. 動的画像変換サービス imagepix のご紹介 株式会社スマートアルゴリズム ※ imagepix は現在ベータテスト中です イメージピックス
2. ユーザーがアップロードした画像、 どうしてますか？
3. • ユーザーは意図するかしないかに関わらず大きなサイズの画像をアップロー ドする • アップロードされた画像はシステム上そのままでは使わず、小さくしてから使う • アップロード時に小さな画像を生成してオリジナル画像と一緒に保存してお き、使うときはあらかじめ生成しておいた画像を使う • Core Web Vitals を考慮し、次世代フォーマットの画像（WebP）もアップロード 時に生成する アップロードされた画像のよくある取り扱い
4. メリット • 画像を使う際、生成しておいた画像を単純に参照するだけで済む • 画像の生成処理に多少時間がかかっても問題ない デメリット • 表示する場所やデバイスによって画像のサイズやフォーマットが異なる場合、 様々な種類の画像を生成しておく必要がある • 画像のサイズやフォーマットを変えたい場合、画像の生成処理を変更するだ けでなく既存のものに対しても生成する必要がある 事前に画像を生成しておく方式の特徴
5. imagepix を使えば オリジナルの画像を持っておくだけでOK！
6. • 画像を表示する箇所が多い • UIを継続的に改善するため、画像の表示サイズを変える機会が多い • UXやSEOを考慮し、表示する場所やデバイスによって適切なサイズ・フォー マットの画像を使い分けたい • 次世代フォーマットの画像（WebP）を使いたいが、WebPの表示に対応してい ない古めの環境にも対応したい imagepix なら、適切な画像を手軽かつ柔軟に使えます！ imagepix をおすすめしたいシステムの特徴
7. imagepix のアーキテクチャ概要 imagepix お客様管理の ファイルストレージ imagepix CDN imagepix Converter Converterで一度生成した画像は CDNでキャッシュ 2023年1月現在、Amazon S3のみ対応 imagepixのURLで画像にアクセス Amazon S3 著作者：rawpixel.com／出典：Freepik ユーザーが利用する 各種デバイス
8. • 画像のリサイズとトリミング ◦ fit アスペクト比を保ったままリサイズ ◦ fill 余った部分をトリミングしつつ、指定したサイズで出力 ◦ fill_pad 足りない部分を塗りつぶしつつ、指定したサイズで出力 • 画像のフォーマット変換 ◦ 入力フォーマット JPEG, PNG, WebP, GIF ◦ 出力フォーマット JPEG, PNG, WebP, GIF ◦ WebPとGIFはアニメーションも可能 imagepix の機能
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)
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 の頭文字
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 の頭文字
12. ユーザーがアップロードした画像から異なるサイズ/フォーマットの画像を 事前に生成していたが、コンテンツや表示箇所によって使用する画像サ イズが異なり、UI変更に対応しきれず無駄に大きなサイズの画像を使っ ていた。また、WebPへの対応ができていない箇所が多くあった。 導入事例：株式会社Vook様 映像クリエイター向けサービス Vook（https://vook.vc）でご利用いただいています。 imagepixを導入したことで、コンテンツや表示箇所に応じて適切なサイ ズの画像を使用できるようになった。また、ユーザーがアップロードした 画像の大半を占めるJPEGやPNGの画像をWebPに変換して表示で き、PageSpeed Insightsのスコアも改善した。
13. imagepix 導入までの流れ メールにてお問い合わせいただき ます。imagepix がお客様のシス テムにマッチするかどうか ご担当 者様にヒアリングさせていただき、 ご契約となります。 4. システムへの組み込み 3. セットアップ 2. アクセス情報のご提供 1. お問い合わせ・ご契約 imagepix がお客様管理のファイ ルストレージにアクセスできるよう に、アクセス情報をご提供いただき ます。 弊社の担当者がお客様専用の環 境をセットアップいたします。 作業 は通常、2営業日以内には完了 い たします。 お客様のシステムに imagepix を 組み込んでいただきます 。ご不明 な点がございましたら、遠慮なく弊 社の担当者にお問い合わせくださ い。 なお、JavaScript用のクライアント ライブラリを用意しております。 https://www.npmjs.com/packag e/@imagepix/client
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日間はトライアル期間として、すべての機能を無料 でご利用いた だけます
15. お問い合わせ メールアドレス contact@smartalgorithm.co.jp 運営会社 株式会社スマートアルゴリズム 代表者名 代表取締役　齋藤 和也 営業時間 月〜金 10:00〜18:00　※土日祝日は定休日 ホームページ https://smartalgorithm.co.jp imagepix についてのご質問やご相談は、メールにて受け付けております。 下記メールアドレス宛にお問い合わせください。 なお、土日、祝日を挟む場合、および、お問い合わせ内容によりましては、ご回答を差し上げるまでに日数が かかる場合がございます。予めご了承ください。