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

イメージピックス 動的画像変換サービス imagepix のご紹介 株式会社スマートアルゴリズム ※ 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でキャッシュ 2024年2月現在、Amazon S3のみ対応

• https://jp.freepik.com/free-vector/_4122518.htm#query=device mockup&position=24&from_view=search&track=sph

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) 画像のパスを指定

• https://demo.imagepix.app/fit/300/300/webp/80/sample/portrait.png
• https://demo.imagepix.app/fit/300/300/webp/80/sample/landscape.png

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 の頭文字

• https://demo.imagepix.app/fill/300/300/c/webp/80/sample/portrait.png
• https://demo.imagepix.app/fill/300/300/c/webp/80/sample/landscape.png

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 の頭文字

• https://demo.imagepix.app/fill_pad/300/300/c/red/webp/80/sample/portrait.png
• https://demo.imagepix.app/fill_pad/300/300/c/red/webp/80/sample/landscape.png

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

• https://vook.vc

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

• https://www.npmjs.com/package/@imagepix/client

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日間はトライアル期間として、すべての機能を無料 でご利用いた だけます

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

• https://smartalgorithm.co.jp