Add text, badges, and logos to any image, right from the URL

Badges and headlines that look designed

Layouts that hold up at every size

Attach a second image to any side

Also new

Stack text, logos, and textures on a single image

Until now, an Imgix image URL could carry one text layer and one watermark. Anything more complex, like a headline with a subhead and a logo, meant composing the image somewhere else first.

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

Multi-layer text, watermarks, and blends

txt[1]=

A single URL can now stack up to 20 text layers, 4 watermarks, and 4 blend layers. Set shared text styles once and override them per layer, so a headline, a subhead, and a date line can each have their own size, color, and position. Longer text can wrap into a paragraph, or wrap and shrink to fit the space you give it.

Because every layer is a URL parameter, you can fill the text in from your CMS or product feed. Every article gets its own social card and every product its own tile, with no design pass in between.

The same text and watermark parameters already work on Imgix Video, so your images and video share one way of doing it.

Also in this group

Placeholder · still

Multi-line text

txt-fit=wrap

Wrap text into a paragraph at txt-width, or use wrapmax to wrap and then shrink it to fit the space you give it.

Placeholder · still

Watermark and blend layers

mark[1]=

Place up to 4 watermarks and 4 blend layers on one image, each positioned and styled on its own.

Badges and headlines that look designed

Plain text on a photo rarely looks finished. A sale badge needs a colored background and rounded corners, and a campaign headline might need a gradient to match the rest of the creative.

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]

Text styling and gradient text

txt-bg=

Image text now supports background boxes, rounded corners all the way to a pill shape, rotation, transparency, weight and italic controls, hard or soft shadows, and right-to-left text for languages like Arabic and Hebrew. Gradient text blends 2 to 16 colors across the whole text block at any angle, including text that wraps across several lines.

Build one badge template and apply it to every discounted product, with the text driven by your price data.

Also in this group

Placeholder · still

Pills and boxes

txt-radius=

Put text on a background box with txt-bg, round it into a pill with txt-radius, and tilt it with txt-rotate.

Placeholder · still

Gradient text

txt-gradient=FF2E93,C9A8FF

Blend 2 to 16 colors across a text block and set the direction with txt-gradient-angle.

Placeholder · still

Weight, italic, and shadows

txt-style=italic

Control weight and italics with txt-weight and txt-style, fade a layer with txt-alpha, and soften shadows with txt-shad-blur.

Placeholder · still

Right-to-left text

txt-dir=rtl

Set Arabic and Hebrew captions right to left, or let txt-dir=auto detect the direction.

Layouts that hold up at every size

A badge positioned 20 pixels from the corner looks right at one size and wrong at the next. Responsive sites serve the same image at many widths and pixel densities, and fixed pixel values don’t scale with them.

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

Phone 240x300, Tablet 480x360, Desktop 720x405

relative lengths

switch to fixed pixels, tuned for the desktop tile, and watch the smaller sizes break.

Same URL at three sizes and three shapes. Only `w` and `h` change. Generative fill extends the scene to each aspect ratio, the price pill is anchored to the top-right corner with `mark-anchor`, and every margin, size, and radius is a fraction of the frame.

Same layout with fixed pixel values tuned for the 720×405 desktop tile. On smaller tiles the price pill falls off the frame and the material details get cut off.

Relative lengths and layer anchors

pad=0.05

Positions, padding, borders, and corner radii now accept fractions of the image. A value like 0.05 means 5% of the image at whatever size it’s served, while whole numbers still mean pixels. New anchor controls let you choose which point of a watermark lands on the position you set, so centering a logo on an exact spot takes one parameter.

One template now covers every breakpoint, instead of one URL per size.

If you already use decimal values: a value between 0 and 1 in these parameters now means a fraction of the image rather than pixels. The Rendering API docs explain how to tell the two apart.

Also in this group

Placeholder · still

Layer anchors

mark-anchor=center

Choose which point of a layer sits at its x and y coordinates, so a logo can be centered on an exact spot.

Attach a second image to any side

Need a second image next to the first? Image append attaches it to any side, with control over alignment and the gap between them, and grows the canvas to fit.

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

Image append

append-side=right

Add an agent card beside a listing photo, or put a before and after side by side, in one URL. The appended image can carry its own parameters, so it can be resized or styled before it’s attached.

Also in this group

No items found.

Also new

16:9

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

ThumbHash placeholders

fm=thumbhash

ThumbHash placeholders give you a compact preview of any image to show while the full image loads, and unlike BlurHash, they keep transparency.

Also in this group

Placeholder · still

TIFF, BMP, and ICO output

fm=tiff8

TIFF, BMP, and ICO output now produce true files, including palette TIFFs with your choice of compression and multi-size favicons from a single source image.