{"id":21336,"date":"2015-12-10T11:57:48","date_gmt":"2015-12-10T11:57:48","guid":{"rendered":"http:\/\/how_to_dynamically_distort_images_to_fit_your_graphic_design"},"modified":"2025-02-22T14:52:30","modified_gmt":"2025-02-22T22:52:30","slug":"how_to_dynamically_distort_images_to_fit_your_graphic_design","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/how_to_dynamically_distort_images_to_fit_your_graphic_design","title":{"rendered":"How To Distort Images Dynamically to Fit your Graphic Design"},"content":{"rendered":"

How to Distort images in the cloud<\/h2>\n

It can be quite a challenge to graphically design a website or mobile application that displays images in very precise shapes and orientations. Product customization<\/a> can take the form of warping 2D pictures to have a 3D perspective, placing images in precise shapes or overlaying images in specific locations within another image, for example: overlaying an image over the screen of a smartphone.<\/p>\n

\nHowever, it’s important to note that image distortion isn’t limited to graphic design purposes. In photography, image distortion can occur unintentionally due to lens characteristics, especially with different camera lenses and wide-angle lenses, causing straight lines to appear curved or deformed. This perspective distortion is a common issue in photography that designers and photographers need to address. \n<\/p>\n

Whether the desire is to display an image with 3D perspective, or fit an image into an irregular shape, such creativity normally comes with the large overhead of tweaking every image that needs to be displayed. If a website hosts a large number of images, or also wants to reshape user uploaded pictures, the challenge can quickly outweigh the reward or even become insurmountable.<\/p>\n

\n Loading code examples<\/span>\n <\/cld-code-widget>\"smartphone<\/a><\/p>\n

The solution is to use a tool that can dynamically do the transformations for you, based on predefined parameters. This blog post will show you how to accomplish this with two new effects Cloudinary has added to its considerable repertoire of image transformation features: distort<\/code> and shear<\/code>.<\/p>\n

Transforming images using the distort effect<\/h2>\n

In order to make it easy to consistently shape your images, Cloudinary has introduced support for a transformation effect<\/code> called distort<\/code> (e_distort<\/code> in image transformation URLs) that allows you to dynamically customize your images to fit any quadrilateral shape. A quadrilateral (also known as a quadrangle or tetragon) is any polygon with four edges (or sides) and four vertices (or corners). The effect distorts an image by giving each of the four corners of the image new coordinates, and then mapping every pixel in the image in proportion to the new shape of the quadrilateral.<\/p>\n

The distort effect parameter accepts 8 values separated by colons (:<\/code>), as each of the 4 corners needs to be represented by both an x and a y coordinate. The new coordinates for each of the 4 corners is given in a clockwise direction, starting with the top left corner, and the value of each new coordinate can be one of the following values:<\/p>\n