{"id":38839,"date":"2025-10-18T11:07:57","date_gmt":"2025-10-18T18:07:57","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=38839"},"modified":"2025-10-18T11:07:59","modified_gmt":"2025-10-18T18:07:59","slug":"how-to-invert-an-image-using-code","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/questions\/how-to-invert-an-image-using-code\/","title":{"rendered":"How to Invert an Image Using Code?"},"content":{"rendered":"\n

You see it in dark-mode mockups, retro filters, and quick accessibility fixes: color inversion. A recent dev thread asked how folks invert images across web and backend stacks without shipping bloated binaries or degrading quality. <\/p>\n\n\n\n

Question:<\/h2>\n\n\n\n

How to invert an image using code?<\/em>
I need a simple, reliable way to invert image colors for thumbnails and previews. Ideally, I want examples for JavaScript (browser and Node), and Python. I also care about preserving alpha transparency, avoiding unnecessary re-encoding, and doing this in batches. Any gotchas with formats or color spaces I should know about?<\/em><\/p>\n\n\n\n

Answer:<\/h2>\n\n\n\n

Inversion flips each color channel so that new_value = 255 – old_value for 8-bit sRGB. Keep the alpha channel unchanged. Let\u2019s break down some simple examples.<\/p>\n\n\n\n

Quick display-only option (no file rewrite)<\/h3>\n\n\n\n

If you only need the inverted look in the UI, use CSS:<\/p>\n\n\n

\/* Affects on-screen rendering only *\/<\/span>\nimg<\/span>.invert<\/span> {\n\u00a0 filter<\/span>: invert<\/span>(1<\/span>);\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
This is fast and GPU-accelerated, but it does not produce a new file.<\/p>\n\n\n\n
In the browser with Canvas (creates a new bitmap)<\/h3>\n\n\n
const<\/span> img = new<\/span> Image();\nimg.crossOrigin = 'anonymous'<\/span>; \/\/ needed for cross-origin images<\/span>\nimg.onload = ()<\/span> =><\/span> {\n\u00a0 const<\/span> canvas = document<\/span>.createElement('canvas'<\/span>);\n\u00a0 canvas.width = img.width;\n\u00a0 canvas.height = img.height;\n\u00a0 const<\/span> ctx = canvas.getContext('2d'<\/span>);\n\u00a0 ctx.drawImage(img, 0<\/span>, 0<\/span>);\n\n\u00a0 const<\/span> imageData = ctx.getImageData(0<\/span>, 0<\/span>, canvas.width, canvas.height);\n\u00a0 const<\/span> data = imageData.data; \/\/ [R, G, B, A, R, G, B, A, ...]<\/span>\n\n\u00a0 for<\/span> (let<\/span> i = 0<\/span>; i < data.length; i += 4<\/span>) {\n\u00a0 \u00a0 data[i] \u00a0 \u00a0 = 255<\/span> - data[i]; \u00a0 \u00a0 \/\/ R<\/span>\n\u00a0 \u00a0 data[i + 1<\/span>] = 255<\/span> - data[i + 1<\/span>]; \/\/ G<\/span>\n\u00a0 \u00a0 data[i + 2<\/span>] = 255<\/span> - data[i + 2<\/span>]; \/\/ B<\/span>\n\u00a0 \u00a0 \/\/ leave data[i + 3] (alpha) unchanged<\/span>\n\u00a0 }\n\n\u00a0 ctx.putImageData(imageData, 0<\/span>, 0<\/span>);\n\n\u00a0 \/\/ get a data URL or blob here<\/span>\n\u00a0 const<\/span> url = canvas.toDataURL('image\/png'<\/span>);\n\u00a0 document<\/span>.body.appendChild(canvas);\n};\nimg.src = 'input.png'<\/span>;<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Node.js with Sharp<\/h3>\n\n\n\n
Sharp uses libvips under the hood, which is very fast and memory efficient. This is ideal for batch processing.<\/p>\n\n\n
const<\/span> sharp = require<\/span>('sharp'<\/span>);\n\nasync<\/span> function<\/span> invert<\/span>(<\/span>) <\/span>{\n\u00a0 await<\/span> sharp('input.png'<\/span>)\n\u00a0 \u00a0 .negate({ alpha<\/span>: false<\/span> }) \/\/ do not invert alpha<\/span>\n\u00a0 \u00a0 .toFile('output.png'<\/span>);\n}\n\ninvert().catch(console<\/span>.error);<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Python with Pillow<\/h3>\n\n\n\n
Pillow\u2019s ImageOps makes inversion straightforward. If your image has transparency, split out alpha, invert only RGB, and merge back.<\/p>\n\n\n
from PIL import Image, ImageOps\n\nimg = Image.open('input.png'<\/span>).convert('RGBA'<\/span>)\nr, g, b, a = img.split()\n\nrgb = Image.merge('RGB'<\/span>, (r, g, b))\ninv_rgb = ImageOps.invert(rgb)\u00a0 # invert only color channels<\/span>\n\nr2, g2, b2 = inv_rgb.split()\nresult = Image.merge('RGBA'<\/span>, (r2, g2, b2, a))\nresult.save('output.png'<\/span>)<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
If you plan to save programmatically in different formats, these tips on file handling can help: 6 ways to save images in Python<\/a>.<\/p>\n\n\n\n
Format and color notes<\/h3>\n\n\n\n