← 最新情報一覧

あらゆる画像に、テキスト、バッジ、ロゴをURLから追加

https://ix-marketing.imgix.net/logo-forme.png?rect=320,150,4,4&fit=fillmax&fill=solid&w=2400&h=1350&fill-color=0B0E14&blend=https%3A%2F%2Fix-marketing.imgix.net%2Flogo-forme.png%3Frect%3D320%2C150%2C4%2C4%26fit%3Dfillmax%26fill%3Dsolid%26w%3D1792%26h%3D931%26fill-color%3D3C3E43%26mask%3Dcorners%26corner-radius%3D61%26fm%3Dpng&blend-mode=normal&blend-x=549&blend-y=59&blend-w=1792&blend-h=931&blend[1]=https%3A%2F%2Fix-marketing.imgix.net%2Flogo-forme.png%3Frect%3D320%2C150%2C4%2C4%26fit%3Dfillmax%26fill%3Dsolid%26w%3D1784%26h%3D923%26fill-color%3D0B0E14%26mask%3Dcorners%26corner-radius%3D57%26fm%3Dpng&blend-mode[1]=normal&blend-x[1]=553&blend-y[1]=63&blend-w[1]=1784&blend-h[1]=923&mark=https%3A%2F%2Fix-marketing.imgix.net%2Fronnie-george-z11gbBo13ro-unsplash.jpg%3Fw%3D1200%26h%3D800%26fit%3Dcrop%26append%3Dhttps%253A%252F%252Fix-marketing.imgix.net%252Flogo-forme.png%253Frect%253D320%252C150%252C4%252C4%2526w%253D400%2526h%253D800%2526fit%253Dfillmax%2526fill%253Dsolid%2526fill-color%253DF8F5F2%2526mark%253Dhttps%25253A%25252F%25252Fix-marketing.imgix.net%25252Fjsb-co-3PPiIrulKjM-unsplash.jpg%25253Fw%25253D600%252526h%25253D600%252526fit%25253Dcrop%252526crop%25253Dfaces%252526mask%25253Dellipse%252526fm%25253Dpng%2526mark-w%253D0.62%2526mark-align%253Dcenter%2526mark-y%253D0.275%2526txt-font%253DHelveticaNeue-Bold%2526txt-align%253Dtop%252Ccenter%2526txt%253DMarcus%252520Bell%2526txt-size%253D0.05%2526txt-color%253D0B0E14%2526txt-y%253D0.615%2526txt%255B1%255D%253DL%2525E2%252580%2525AFI%2525E2%252580%2525AFS%2525E2%252580%2525AFT%2525E2%252580%2525AFI%2525E2%252580%2525AFN%2525E2%252580%2525AFG%2525E2%252580%2525AF%2525E2%252580%2525AF%2525E2%252580%2525AFA%2525E2%252580%2525AFG%2525E2%252580%2525AFE%2525E2%252580%2525AFN%2525E2%252580%2525AFT%2526txt-font%255B1%255D%253DHelveticaNeue-Medium%2526txt-size%255B1%255D%253D0.024%2526txt-color%255B1%255D%253D7A746D%2526txt-y%255B1%255D%253D0.685%2526fm%253Dpng%26append-side%3Dright%26mask%3Dcorners%26corner-radius%3D40%26fm%3Dpng&mark-w=1722&mark-x=584&mark-y=94&mark[3]=https%3A%2F%2Fix-marketing.imgix.net%2Flogo-forme.png%3Frect%3D320%2C150%2C4%2C4%26fit%3Dfillmax%26w%3D1600%26h%3D900%26fill%3Dsolid%26fill-color%3D0B0E14%26mark%3Dhttps%253A%252F%252Fix-marketing.imgix.net%252Fkarolina-grabowska-PLipdxBY5WE-unsplash.jpg%253Fw%253D1350%2526h%253D900%2526fit%253Dcrop%2526crop%253Dfocalpoint%2526fp-y%253D0.55%2526blend%253Dhttps%25253A%25252F%25252Fix-marketing.imgix.net%25252Flogo-forme.png%25253Frect%25253D320%25252C150%25252C4%25252C4%252526fit%25253Dfillmax%252526w%25253D1350%252526h%25253D900%252526fill%25253Dgradient%252526fill-gradient-type%25253Dlinear%252526fill-gradient-linear%25253D000B0E14%25252C000B0E14%25252C800B0E14%25252CE60B0E14%252526fill-gradient-linear-direction%25253Dright%252526fm%25253Dpng%2526blend-mode%253Dnormal%2526mask%253Dhttps%25253A%25252F%25252Fix-marketing.imgix.net%25252Flogo-forme.png%25253Frect%25253D320%25252C150%25252C4%25252C4%252526fit%25253Dfillmax%252526w%25253D1350%252526h%25253D900%252526fill%25253Dgradient%252526fill-gradient-type%25253Dlinear%252526fill-gradient-linear%25253DFFFFFFFF%25252CFFFFFFFF%25252CFFFFFFFF%25252CFFFFFFFF%25252C00FFFFFF%252526fill-gradient-linear-direction%25253Dright%252526mask%25253Dcorners%252526corner-radius%25253D45%25252C0%25252C0%25252C45%252526fm%25253Dpng%2526fm%253Dpng%26mark-x%3D0%26mark-y%3D0%26txt-align%3Dtop%2Cleft%26txt-x%3D960%26txt%5B1%5D%3D30%2525%2520off%26txt-font%5B1%5D%3DHelveticaNeue-Light%26txt-size%5B1%5D%3D104%26txt-x%5B1%5D%3D957%26txt-y%5B1%5D%3D244%26txt-color%5B1%5D%3DF8F5F2%26txt%5B2%5D%3DEverything%26txt-font%5B2%5D%3DHelveticaNeue-Bold%26txt-size%5B2%5D%3D104%26txt-x%5B2%5D%3D955%26txt-y%5B2%5D%3D349%26txt-color%5B2%5D%3DF8F5F2%26txt-gradient%5B1%5D%3DFF2E93%2CC9A8FF%26txt-gradient-angle%5B1%5D%3D90%26txt-gradient%5B2%5D%3DFF2E93%2CC9A8FF%26txt-gradient-angle%5B2%5D%3D90%26txt%5B3%5D%3DTake%2520a%2520seat.%2520Ends%2520Sunday.%26txt-font%5B3%5D%3DHelveticaNeue%26txt-size%5B3%5D%3D46%26txt-color%5B3%5D%3DA8A5A1%26txt-y%5B3%5D%3D488%26txt-style%5B3%5D%3Ditalic%26txt%5B5%5D%3D%25C2%25A0%25C2%25A0%25C2%25A0N%25E2%2580%25AFE%25E2%2580%25AFW%25C2%25A0%25C2%25A0%25C2%25A0%26txt-font%5B5%5D%3DHelveticaNeue-Medium%26txt-size%5B5%5D%3D24%26txt-color%5B5%5D%3D0B0E14%26txt-x%5B5%5D%3D978%26txt-y%5B5%5D%3D150%26txt-pad%5B5%5D%3D18%26txt-bg%5B5%5D%3DF8F5F2%26txt-radius%5B5%5D%3D34%26mark%5B1%5D%3Dhttps%253A%252F%252Fix-marketing.imgix.net%252Flogo-forme.png%253Finvert%253Dtrue%2526mono%253D0B0E14%26mark-w%5B1%5D%3D210%26mark-alpha%5B1%5D%3D55%26mark-x%5B1%5D%3D90%26mark-y%5B1%5D%3D80%26mask%3Dcorners%26corner-radius%3D45%26fm%3Dpng&mark-w[3]=1600&mark-rot[3]=8&mark-x[3]=185&mark-y[3]=443&auto=format,compress

今回のリリースでは、テキストとウォーターマークの重ね合わせ、デザイン性の高いバッジとグラデーション見出し、あらゆる画面サイズに合わせて拡縮するレイアウトに加え、ThumbHashプレースホルダーと新しい出力フォーマットが登場しました。

商品タイルには今週のセールバッジが必要で、来週はまた別のバッジに差し替えます。記事ごとに見出し入りのソーシャルカードが必要で、物件写真の隅には必ずロゴを入れたい。しかも、サイトが配信するすべてのサイズで正しく見えなければなりません。そのために、デザインチームへの依頼待ちや別の画像生成サービス、あらゆるバリエーションを事前に書き出すバッチ処理に頼っているケースも少なくないでしょう。

画像へのテキストやブランド要素の追加は、1回なら簡単でも、1,000回となれば大きな負担です。今回のリリースで、そのすべてをURLから直接行えるようになりました。1枚の画像にテキスト、ロゴ、テクスチャを重ね、テキストをデザインされたように仕上げ、各レイヤーのサイズを画像に対する割合で指定して、どの幅でもレイアウトを保てます。新機能をご紹介します。

1

1枚の画像にテキスト、ロゴ、テクスチャを重ねる

これまで、ImgixのイメージURLに載せられるのは、テキストレイヤーとウォーターマークがそれぞれ1つまででした。見出しにサブ見出しとロゴを組み合わせるような複雑な構成は、まず別の場所で画像を作り込む必要がありました。

backpack-isolated.png?txt[1]=Weekend%20Sale&txt-fit=wrap&txt[2]=FALL%20GEAR%20EVENT&txt[3]=SHOP%20THE%20SALE&txt[4]=Online%20and%20in%20stores.%20Ends%20Sunday%20at%20midnight.&txt-rotate[5]=352&mark[1]=logo-forme.png&blend[1]=teal-glow.png
16:9
https://ix-marketing.imgix.net/logo-forme.png?rect=320,150,4,4&w=1600&h=900&fit=fillmax&fill=gradient&fill-gradient-type=linear&fill-gradient-linear=0B0E14,0B0E14&fill-gradient-linear-direction=bottom&mark=https%3A%2F%2Fix-marketing.imgix.net%2Fbackpack-isolated.png%3Fbg-remove%3Dtrue%26fm%3Dpng%26w%3D1127%26h%3D1127&mark-x=662&mark-y=-119&mark-w[1]=210&mark-alpha[1]=45&mark-x[1]=126&mark-y[1]=110&txt-font=HelveticaNeue&txt-color=BCB9B6&txt-align=top,left&txt-x=126&txt-size=52&txt-y=462&txt=Up%20to%2040%25%20off%20outdoor%20gear%20through%20Sunday&txt-width[1]=939&txt-font[1]=HelveticaNeue-Bold&txt-size[1]=110&txt-y[1]=309&txt-color[1]=B5DB2A&blend-mode[1]=screen&blend-alpha[1]=55&txt-size[2]=29&txt-y[2]=262&txt-size[3]=26&txt-color[3]=0B0E14&txt-bg[3]=F8F5F2&txt-pad[3]=26&txt-radius[3]=42&txt-x[3]=150&txt-y[3]=648&txt-size[4]=22&txt-alpha[4]=55&txt-y[4]=826&txt-width[4]=900&txt[5]=%C2%A0%C2%A0%C2%A0Now%20%2489%C2%A0%C2%A0%C2%A0&txt-size[5]=30&txt-font[5]=HelveticaNeue-Bold&txt-color[5]=0B0E14&txt-bg[5]=B5DB2A&txt-pad[5]=18&txt-radius[5]=34&txt-x[5]=1340&txt-y[5]=150&txt-width=662@txt-fit&txt[2]=F%E2%80%AFA%E2%80%AFL%E2%80%AFL%E2%80%AF%E2%80%AF%E2%80%AFG%E2%80%AFE%E2%80%AFA%E2%80%AFR%E2%80%AF%E2%80%AF%E2%80%AFE%E2%80%AFV%E2%80%AFE%E2%80%AFN%E2%80%AFT&txt[3]=%C2%A0%C2%A0%C2%A0S%E2%80%AFH%E2%80%AFO%E2%80%AFP%E2%80%AF%E2%80%AF%E2%80%AFT%E2%80%AFH%E2%80%AFE%E2%80%AF%E2%80%AF%E2%80%AFS%E2%80%AFA%E2%80%AFL%E2%80%AFE%C2%A0%C2%A0%C2%A0&mark[1]=https%3A%2F%2Fix-marketing.imgix.net%2Flogo-forme.png&blend[1]=https%3A%2F%2Fix-marketing.imgix.net%2Flogo-forme.png%3Frect%3D320%2C150%2C4%2C4%26w%3D1600%26h%3D900%26fit%3Dfillmax%26fill%3Dgradient%26fill-gradient-type%3Dradial%26fill-gradient-radial%3D11ABC0%2C000000%26fill-gradient-radial-x%3D0.74%26fill-gradient-radial-y%3D0.42%26fill-gradient-radial-radius%3D0.95

マルチレイヤーのテキスト、ウォーターマーク、ブレンド

txt[1]=

1つのURLで、最大20のテキストレイヤー、4つのウォーターマーク、4つのブレンドレイヤーを重ねられるようになりました。共通のテキストスタイルを一度設定し、レイヤーごとに上書きできるので、見出し、サブ見出し、日付行それぞれに異なるサイズ、色、位置を指定できます。長いテキストは段落として折り返すことも、折り返したうえで指定したスペースに収まるよう縮小することもできます。

すべてのレイヤーがURLパラメーターなので、テキストはCMSや商品フィードから流し込めます。記事ごとのソーシャルカードも、商品ごとのタイルも、デザイン作業を挟まずに生成できます。

同じテキストとウォーターマークのパラメーターはImgix Videoでもすでに使えるため、画像と動画を同じ方法で扱えます。

このグループのその他の機能
プレースホルダー · 静止画

複数行テキスト

txt-fit=wrap

txt-width の幅でテキストを段落として折り返すか、wrapmax で折り返したうえで指定したスペースに収まるよう縮小できます。

ドキュメント →
プレースホルダー · 静止画

ウォーターマークとブレンドレイヤー

mark[1]=

1枚の画像に最大4つのウォーターマークと4つのブレンドレイヤーを配置し、それぞれ個別に位置とスタイルを指定できます。

ドキュメント →
2

デザインされたようなバッジと見出し

写真にプレーンなテキストを載せただけでは、なかなか完成度の高い仕上がりにはなりません。セールバッジには色付きの背景と角丸が必要ですし、キャンペーンの見出しには他のクリエイティブに合わせたグラデーションが求められることもあります。

gallery-chair.jpg?txt-gradient[1]=FF2E93,C9A8FF&txt-style[3]=italic&txt-bg[5]=F8F5F2&txt-radius[5]=34
txt-style[3]
16:9
https://ix-marketing.imgix.net/logo-forme.png?rect=320,150,4,4&fit=fillmax&w=1600&h=900&fill=solid&fill-color=0B0E14&mark=https%3A%2F%2Fix-marketing.imgix.net%2Fkarolina-grabowska-PLipdxBY5WE-unsplash.jpg%3Fw%3D1350%26h%3D900%26fit%3Dcrop%26crop%3Dfocalpoint%26fp-y%3D0.55%26blend%3Dhttps%253A%252F%252Fix-marketing.imgix.net%252Flogo-forme.png%253Frect%253D320%252C150%252C4%252C4%2526fit%253Dfillmax%2526w%253D1350%2526h%253D900%2526fill%253Dgradient%2526fill-gradient-type%253Dlinear%2526fill-gradient-linear%253D000B0E14%252C000B0E14%252C800B0E14%252CE60B0E14%2526fill-gradient-linear-direction%253Dright%2526fm%253Dpng%26blend-mode%3Dnormal%26mask%3Dhttps%253A%252F%252Fix-marketing.imgix.net%252Flogo-forme.png%253Frect%253D320%252C150%252C4%252C4%2526fit%253Dfillmax%2526w%253D1350%2526h%253D900%2526fill%253Dsolid%2526fill-color%253D00FFFFFF%2526mark%253Dhttps%25253A%25252F%25252Fix-marketing.imgix.net%25252Flogo-forme.png%25253Frect%25253D320%25252C150%25252C4%25252C4%252526fit%25253Dfillmax%252526w%25253D1030%252526h%25253D900%252526fill%25253Dsolid%252526fill-color%25253DFFFFFFFF%2526mark-x%253D0%2526mark-y%253D0%2526mark%255B1%255D%253Dhttps%25253A%25252F%25252Fix-marketing.imgix.net%25252Flogo-forme.png%25253Frect%25253D320%25252C150%25252C4%25252C4%252526fit%25253Dfillmax%252526w%25253D320%252526h%25253D900%252526fill%25253Dgradient%252526fill-gradient-type%25253Dlinear%252526fill-gradient-linear%25253DFFFFFFFF%25252C00FFFFFF%252526fill-gradient-linear-direction%25253Dright%2526mark-x%255B1%255D%253D1030%2526mark-y%255B1%255D%253D0%2526fm%253Dpng%26fm%3Dpng&mark-x=0&mark-y=0&txt-align=top,left&txt-x=960&txt[1]=30%25%20off&txt-font[1]=HelveticaNeue-Light&txt-size[1]=104&txt-x[1]=957&txt-y[1]=244&txt-color[1]=F8F5F2&txt[2]=Everything&txt-font[2]=HelveticaNeue-Bold&txt-size[2]=104&txt-x[2]=955&txt-y[2]=349&txt-color[2]=F8F5F2&txt[3]=Take%20a%20seat.%20Ends%20Sunday.&txt-font[3]=HelveticaNeue&txt-size[3]=46&txt-color[3]=A8A5A1&txt-y[3]=488&txt[5]=%C2%A0%C2%A0%C2%A0N%E2%80%AFE%E2%80%AFW%C2%A0%C2%A0%C2%A0&txt-font[5]=HelveticaNeue-Medium&txt-size[5]=24&txt-color[5]=0B0E14&txt-x[5]=978&txt-y[5]=150&txt-pad[5]=18&mark[1]=https%3A%2F%2Fix-marketing.imgix.net%2Flogo-forme.png%3Finvert%3Dtrue%26mono%3D0B0E14&mark-w[1]=210&mark-alpha[1]=55&mark-x[1]=90&mark-y[1]=80&txt-gradient-angle[1]=90@txt-gradient[1]&txt-gradient[2]=FF2E93,C9A8FF@txt-gradient[1]&txt-gradient-angle[2]=90@txt-gradient[1]

テキストスタイルとグラデーションテキスト

txt-bg=

画像上のテキストで、背景ボックス、ピル型までの角丸、回転、透明度、ウェイトとイタリックの指定、くっきりした影やソフトな影、アラビア語やヘブライ語などの右から左へのテキストに対応しました。グラデーションテキストは、2〜16色をテキストブロック全体に任意の角度でブレンドでき、複数行に折り返したテキストにも適用されます。

バッジのテンプレートを1つ作れば、価格データから流し込んだテキストで、すべての値下げ商品に適用できます。

このグループのその他の機能
プレースホルダー · 静止画

ピル型とボックス

txt-radius=

txt-bg でテキストに背景ボックスを付け、txt-radius でピル型に丸め、txt-rotate で傾けられます。

ドキュメント →
プレースホルダー · 静止画

グラデーションテキスト

txt-gradient=FF2E93,C9A8FF

2〜16色をテキストブロック全体にブレンドし、txt-gradient-angle で方向を指定できます。

ドキュメント →
プレースホルダー · 静止画

ウェイト、イタリック、シャドウ

txt-style=italic

txt-weight と txt-style でウェイトとイタリックを指定し、txt-alpha でレイヤーを半透明にし、txt-shad-blur で影をやわらげられます。

ドキュメント →
プレースホルダー · 静止画

右から左へのテキスト

txt-dir=rtl

アラビア語やヘブライ語のキャプションを右から左に組めます。txt-dir=auto を使えば方向を自動判定します。

ドキュメント →
3

どのサイズでも崩れないレイアウト

角から20ピクセルの位置に置いたバッジは、あるサイズでは正しく見えても、別のサイズでは崩れてしまいます。レスポンシブなサイトは同じ画像をさまざまな幅やピクセル密度で配信しますが、固定のピクセル値はそれに合わせて拡縮しません。

arc-side-chair.jpg?w={w}&h={h}&fit=fill&fill=gen&txt-x=0.06|43&txt-size=0.055|22&mark-x=0.94|677&mark-anchor=top,right&corner-radius=0.06
1:1
https://ix-marketing.imgix.net/david-underland-SSMI-q3VPhA-unsplash.jpg?txt-font=HelveticaNeue-Bold&txt-color=F8F5F2&txt-align=top,left&txt-y=0.08|32&txt=Arc%20Side%20Chair&txt[1]=Saddle%20leather&txt-font[1]=HelveticaNeue&txt-size[1]=0.03|12&txt-color[1]=E6E2DC&txt-y[1]=0.84|340&txt[3]=Powder-coated%20steel&txt-font[3]=HelveticaNeue&txt-size[3]=0.03|12&txt-color[3]=E6E2DC&txt-y[3]=0.88|356&mark=https%3A%2F%2Fix-marketing.imgix.net%2Flogo-forme.png%3Frect%3D320%2C150%2C4%2C4%26w%3D192%26h%3D92%26fit%3Dfillmax%26fill%3Dsolid%26fill-color%3D00000000%26txt%3D%25C2%25A0%25C2%25A0%2524340%25C2%25A0%25C2%25A0%26txt-font%3DHelveticaNeue-Bold%26txt-size%3D40%26txt-color%3D0B0E14%26txt-bg%3DF8F5F2%26txt-pad%3D22%26txt-radius%3D48%26txt-align%3Dmiddle%2Ccenter%26fm%3Dpng&mark-h=0.085|34&mark-y=0.065|26&mask=corners&fm=png
スマートフォン 240x300, タブレット 480x360, デスクトップ 720x405
relative lengths
固定ピクセル値(デスクトップ用タイルに合わせて調整)に切り替えて、小さなサイズで崩れる様子を確認してください。
同じURLを3つのサイズと3つの形で表示しています。変わるのは `w` と `h` だけです。生成塗りつぶしで各アスペクト比に合わせてシーンを広げ、価格ピルは `mark-anchor` で右上の角に固定し、余白、サイズ、角丸はすべてフレームに対する割合で指定しています。
720×405のデスクトップ用タイルに合わせた固定ピクセル値で、同じレイアウトを表示しています。小さなタイルでは価格ピルがフレームからはみ出し、素材の詳細が切れてしまいます。

相対値指定とレイヤーアンカー

pad=0.05

位置、余白、ボーダー、角丸の値に、画像に対する割合を指定できるようになりました。たとえば 0.05 は、配信されるサイズにかかわらず画像の5%を意味し、整数はこれまでどおりピクセルを意味します。新しいアンカー指定では、ウォーターマークのどの点を指定した位置に合わせるかを選べるため、ロゴを特定の位置の中央にぴったり配置するのもパラメーター1つで済みます。

サイズごとに別のURLを用意しなくても、1つのテンプレートですべてのブレークポイントに対応できます。

すでに小数値を使っている場合:これらのパラメーターで0から1の間の値は、ピクセルではなく画像に対する割合として扱われるようになりました。両者の見分け方はRendering APIのドキュメントで説明しています。

このグループのその他の機能
プレースホルダー · 静止画

レイヤーアンカー

mark-anchor=center

レイヤーのどの点を x と y の座標に合わせるかを選べるため、ロゴを特定の位置の中央にぴったり配置できます。

ドキュメント →
4

2枚目の画像を好きな辺に連結

1枚目の画像の隣に、もう1枚並べたいときはありませんか。画像の連結(Image append)を使えば、好きな辺に画像を連結し、配置位置と間隔を指定でき、キャンバスも自動で広がります。

listing.jpg?append=agent-card.png&append-side=right&append-gap=24
append-side
16:9
https://ix-marketing.imgix.net/ronnie-george-z11gbBo13ro-unsplash.jpg?w=1000&h=800&fit=crop&auto=format,compress&append=https%3A%2F%2Fix-marketing.imgix.net%2Flogo-forme.png%3Frect%3D320%2C150%2C4%2C4%26w%3D400%26h%3D800%26fit%3Dfillmax%26fill%3Dsolid%26fill-color%3DF8F5F2%26mark%3Dhttps%253A%252F%252Fix-marketing.imgix.net%252Fjsb-co-3PPiIrulKjM-unsplash.jpg%253Fw%253D600%2526h%253D600%2526fit%253Dcrop%2526crop%253Dfaces%2526mask%253Dellipse%2526fm%253Dpng%26mark-w%3D0.62%26mark-align%3Dcenter%26mark-y%3D0.275%26txt-font%3DHelveticaNeue-Bold%26txt-align%3Dtop%2Ccenter%26txt%3DMarcus%2520Bell%26txt-size%3D0.05%26txt-color%3D0B0E14%26txt-y%3D0.615%26txt%5B1%5D%3DL%25E2%2580%25AFI%25E2%2580%25AFS%25E2%2580%25AFT%25E2%2580%25AFI%25E2%2580%25AFN%25E2%2580%25AFG%25E2%2580%25AF%25E2%2580%25AF%25E2%2580%25AFA%25E2%2580%25AFG%25E2%2580%25AFE%25E2%2580%25AFN%25E2%2580%25AFT%26txt-font%5B1%5D%3DHelveticaNeue-Medium%26txt-size%5B1%5D%3D0.024%26txt-color%5B1%5D%3D7A746D%26txt-y%5B1%5D%3D0.685%26fm%3Dpng

画像の連結

append-side=right

物件写真の横にエージェントカードを添えたり、ビフォーとアフターを並べたりするのも、1つのURLで実現できます。連結する画像にも独自のパラメーターを指定できるため、連結前にサイズ変更やスタイル調整が可能です。

このグループのその他の機能
No items found.
5

その他の新機能

16:9
https://cdn.prod.website-files.com/6705f4b15aee7ca914fff083/6adbc2eefc3d225a6fa1bd23_release-text-layout-thumbhash-compare.jpg

ThumbHashプレースホルダー

fm=thumbhash

ThumbHashプレースホルダーは、本来の画像の読み込み中に表示できるコンパクトなプレビューです。BlurHashと異なり、透明度も保持します。

このグループのその他の機能
プレースホルダー · 静止画

TIFF、BMP、ICO出力

fm=tiff8

TIFF、BMP、ICOの出力が本来のファイル形式で生成されるようになりました。圧縮方式を選べるパレットTIFFや、1枚の元画像から作る複数サイズのファビコンにも対応しています。

ドキュメント →

URLで画像を仕上げる、その他の方法

被写体認識クロップは、どのアスペクト比でもメインの被写体をフレーム内に収めます。ドキュメント →

AI Image Editは、1つのパラメーターで写真のクリーンアップ、リステージング、ライティング調整を行います。ドキュメント →

動画へのテキストとウォーターマークは画像と同じパラメーターを使うため、1つのテンプレートで両方に対応できます。ドキュメント →

これらはすべて、今回のリリースの機能と組み合わせてご利用いただけます。1つのプラットフォームで、URLもAPIもそのままです。

さっそく始めましょう

すでにImgixをご利用中の方は、ドキュメントをご確認いただくか、導入のサポートが必要な場合はカスタマーサクセス担当者までお問い合わせください。

あわせて読みたい
No items found.