Displacement Warp

Name: Displacement Warp
Brand: Cloudinary
Rating: 4.5 (30 reviews)

Warp an image with a displacement map using our free online tool. Upload your image, bend and distort it, and download in just a few clicks.

🖼️ Scaling millions of product images? 💡Automate, optimize, and deliver faster. 👉 Talk to a Media Expert

Upload a Photo to Warp

Or drag your image here

JPG, PNG, WebP, HEIC or AVIF · Max 20MB

Drag to compare

Original Warped

Rendering...

This is the exact image you will download. Cloudinary moves every pixel according to a displacement map, it is not a filter drawn over the photo.

Warp style

Warp

Strength 4%

Direction

Trim blank edges

Strength is a share of the photo width, so the preview and the full size download warp the same way. Pixels pulled in from outside the frame are blank, and trimming crops them off and scales back to the original size.

Output

Format

Quality

★★★★★

4.5 (30 reviews)

Looking to warp an image at scale?

Free Online Displacement Warp

Bend and distort any image with a displacement map in seconds.

Why use our Displacement Warp tool?

Warp your image with a displacement map for liquid, glass, and ripple effects, right in the browser, free.

Built for the browser

Works right in your browser, free, with no software to install and no watermarks.

Displacement mapping

Use a map to push and pull pixels for real, organic distortion.

Adjustable intensity

Go from a subtle ripple to a heavy, abstract warp.

Quality preserved

Cloudinary keeps your output crisp and true to the original.

Do it at scale

Process one file or thousands with our free API and warp an image automatically, with no manual steps.

Format versatility

Works with all major formats, so your result fits right into your workflow.

How to warp an image in 3 steps

Warp your image in 3 simple steps. Upload your image, apply the warp, and download.

Upload your image

Drag and drop your image into the browser, or upload it from your device.

Apply the warp

Choose the displacement and set how strong it is.

Download

Save your result, with no watermarks.

Go beyond a flat, undistorted image

Explore more free distortion and effect tools: Perspective Warp, Image Theme Swap, Add Texture Effect.

A woman and a golden retriever in the mountains. They're sitting, facing away from the camera while the dog noses the woman. They're surrounded by natural splendor including majestic mountains, puffy clouds, and evergreen-studded hills. — An un-cropped image overlaid with a cropping window showing how it would be cropped by Cloudinary.

Original: 18 MB
We’re showing a resized version of the original asset to avoid slow loading speeds. View the original.

JPEG: 135 KB
WebP: 135 KB
AVIF: 90 KB
JPEG XL: 94 KB

Original: 18 MB
We’re showing a resized version of the original asset to avoid slow loading speeds. View the original.

JPEG: 135 KB
WebP: 135 KB
AVIF: 90 KB
JPEG XL: 94 KB

Duration: 1:42

Duration: 0:15

URL:

/ar_0.5,c_fill,g_auto,w_433/q_auto/f_auto/hiking_dog_mountain.jpg

cloudinary.image("hiking_dog_mountain.jpg", {transformation: [
  {aspect_ratio: "0.5", gravity: "auto", width: 433, crop: "fill"},
  {quality: "auto"},
  {fetch_format: "auto"}
  ]})

new CloudinaryImage("hiking_dog_mountain.jpg")
  .resize(
    fill()
      .width(433)
      .aspectRatio(0.5)
      .gravity(autoGravity())
  )
  .delivery(quality(auto()))
  .delivery(format(auto()));

new CloudinaryImage("hiking_dog_mountain.jpg")
  .resize(
    fill()
      .width(433)
      .aspectRatio(0.5)
      .gravity(autoGravity())
  )
  .delivery(quality(auto()))
  .delivery(format(auto()));

new CloudinaryImage("hiking_dog_mountain.jpg")
  .resize(
    fill()
      .width(433)
      .aspectRatio(0.5)
      .gravity(autoGravity())
  )
  .delivery(quality(auto()))
  .delivery(format(auto()));

new CloudinaryImage("hiking_dog_mountain.jpg")
  .resize(
    fill()
      .width(433)
      .aspectRatio(0.5)
      .gravity(autoGravity())
  )
  .delivery(quality(auto()))
  .delivery(format(auto()));

CloudinaryImage("hiking_dog_mountain.jpg").image(transformation=[
  {'aspect_ratio': "0.5", 'gravity': "auto", 'width': 433, 'crop': "fill"},
  {'quality': "auto"},
  {'fetch_format': "auto"}
  ])

(new ImageTag('hiking_dog_mountain.jpg'))
	->resize(Resize::fill()->width(433)
->aspectRatio(0.5)
	->gravity(
	Gravity::autoGravity())
	)
	->delivery(Delivery::quality(
	Quality::auto()))
	->delivery(Delivery::format(
	Format::auto()));

cloudinary.url().transformation(new Transformation()
  .aspectRatio("0.5").gravity("auto").width(433).crop("fill").chain()
  .quality("auto").chain()
  .fetchFormat("auto")).imageTag("hiking_dog_mountain.jpg");

cl_image_tag("hiking_dog_mountain.jpg", transformation: [
  {aspect_ratio: "0.5", gravity: "auto", width: 433, crop: "fill"},
  {quality: "auto"},
  {fetch_format: "auto"}
  ])

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .AspectRatio("0.5").Gravity("auto").Width(433).Crop("fill").Chain()
  .Quality("auto").Chain()
  .FetchFormat("auto")).BuildImageTag("hiking_dog_mountain.jpg")

cloudinary.image('hiking_dog_mountain.jpg').transformation(Transformation()
	.resize(Resize.fill().width(433)
.aspectRatio(0.5)
	.gravity(
	Gravity.autoGravity())
	)
	.delivery(Delivery.quality(
	Quality.auto()))
	.delivery(Delivery.format(
	Format.auto())));

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setAspectRatio("0.5").setGravity("auto").setWidth(433).setCrop("fill").chain()
  .setQuality("auto").chain()
  .setFetchFormat("auto")).generate("hiking_dog_mountain.jpg")!, cloudinary: cloudinary)

MediaManager.get().url().transformation(new Transformation()
  .aspectRatio("0.5").gravity("auto").width(433).crop("fill").chain()
  .quality("auto").chain()
  .fetchFormat("auto")).generate("hiking_dog_mountain.jpg");

cloudinary.image('hiking_dog_mountain.jpg').transformation(Transformation()
	.resize(Resize.fill().width(433)
.aspectRatio(0.5)
	.gravity(
	Gravity.autoGravity())
	)
	.delivery(Delivery.quality(
	Quality.auto()))
	.delivery(Delivery.format(
	Format.auto())));

cloudinary.image {
	publicId("hiking_dog_mountain.jpg")
	 resize(Resize.fill() { width(433)
 aspectRatio(0.5F)
	 gravity(
	Gravity.autoGravity())
	 })
	 delivery(Delivery.quality(
	Quality.auto()))
	 delivery(Delivery.format(
	Format.auto())) 
}.generate()

new CloudinaryImage("hiking_dog_mountain.jpg")
  .resize(
    fill()
      .width(433)
      .aspectRatio(0.5)
      .gravity(autoGravity())
  )
  .delivery(quality(auto()))
  .delivery(format(auto()));

Frequently Asked Questions

What is the Displacement Warp tool?

It warps an image using a displacement map, pushing pixels around for liquid, glass, and ripple effects.

How does it work?

Upload an image, pick a displacement and strength, and the tool distorts it accordingly.

Is it free to use?

Yes, it’s free to use online. Just upload your image, apply the warp, and download the result.

Can developers warp images programmatically?

Yes. Developers can use Cloudinary’s API to apply displacement warps automatically.

What can I use it for?

Posters, album art, abstract backgrounds, and glass or water effects.