Opacity is different from brightness, even though a heavily faded image can look similar to a darkened one at first glance. A dark pixel is still fully opaque and will block anything behind it, while a pixel at 40 percent opacity lets 60 percent of whatever sits underneath show through. That distinction matters the moment the faded image is placed over another photo, a coloured background or a video, which is exactly the situation this image opacity changer is built for.
Everything happens locally. The photo is decoded in your browser, redrawn onto a transparent canvas with the chosen alpha value applied, and encoded straight back out as PNG without a single request leaving your device. A design mockup or a personal photo never has to be uploaded just to have its transparency adjusted.
When you would use an image opacity changer
Faded background images behind a headline or a card of text are one of the most common uses, since text stays legible against a photograph that has been pushed down toward 20 or 30 percent opacity rather than fighting a full strength image. A subtle watermark logo placed across a document benefits from the same treatment, visible enough to deter reuse without dominating the page underneath it.
Overlaying two photographs to compare them, such as a before and after pair or two exposures of the same scene, is easier to judge when one layer is set to roughly 50 percent so both images remain visible at once. Presentation slides and video overlays use the same trick to layer a translucent graphic on top of moving footage without hiding it completely.
- 10 to 30 percent for a background image sitting behind text that has to stay readable.
- 40 to 60 percent for comparing two overlapping photographs at a glance.
- 70 to 90 percent for a watermark or logo that should be visible but clearly secondary.
- 0 percent to test a fully transparent placeholder before deciding on a final value.
Why the output must be PNG
JPEG has no alpha channel at all, so it cannot represent a semi transparent pixel under any circumstances, and a format that tried to store one would simply have nowhere to put that information. This image opacity changer always exports PNG for exactly that reason: PNG has supported a full 8 bit alpha channel since its original specification, which means every pixel keeps the precise transparency value the slider set for it.
If the source photo was a JPEG with no transparency of its own, the output still becomes a PNG with the alpha channel added uniformly across the whole image, since a JPEG's implicit full opacity is just the starting value before the slider changes it.
How this image opacity changer applies the effect
The mechanism is a single canvas property, globalAlpha, set once before the photo is redrawn onto a blank canvas. Every pixel that gets painted while that property is active is scaled by the chosen value, so a globalAlpha of 0.3 makes the entire photo 30 percent as opaque as it originally was, uniformly across the whole image rather than in any one region.
Because the destination canvas starts fully transparent rather than filled with a background colour, the parts of the image that were already transparent, such as the corners around a circular logo, stay transparent, and the parts that were solid become exactly as translucent as the slider says. There is no compositing against white or black hidden anywhere in the process.
Checking the result before you download
The preview sits on a checkerboard pattern rather than a solid colour, which is the standard way image editors show transparency so a faded photo does not get mistaken for one that simply failed to load. If the checkerboard shows through evenly across the whole image, the opacity has been applied correctly and uniformly rather than to only part of the photo.
People searching for a way to make an image transparent are usually looking for exactly this kind of uniform fade rather than a masked cutout, and moving the slider to reduce image opacity gradually shows the effect building in real time before anything is rendered to a file. The same slider works just as well to fade an image online for a slideshow transition or a loading placeholder as it does for a permanent overlay graphic.
Because the change applies to the whole photo at once, this is best thought of as a way to adjust photo transparency globally rather than to soften just one corner or object within the picture.
How to change an image's opacity
- 1
Add your photo
Drag an image onto the drop area or click it to choose a PNG, JPG or WebP file.
- 2
Move the opacity slider
Drag from 0 to 100 percent. The live preview updates against a checkerboard background.
- 3
Check the preview
Confirm the level of transparency looks right for where the image is going to be used.
- 4
Apply and download
Press the button to render the result, then download it as a transparent PNG.
Related tools worth bookmarking
Sources and further reading
- MDN: CanvasRenderingContext2D.globalAlphaThe browser property this tool uses to scale every pixel's opacity uniformly when the photo is redrawn.developer.mozilla.org
- W3C: Portable Network Graphics specificationThe official PNG specification describing the alpha channel that stores per pixel transparency in the output file.w3.org
- WHATWG: HTML canvas specificationDefines the canvas compositing model, including how a transparent destination canvas behaves before anything is drawn onto it.html.spec.whatwg.org
Frequently asked questions
Common questions about the image opacity changer.
PNG is the only common web format with a full alpha channel, so it is the only format able to store a partially transparent pixel at all. JPEG and most other formats always assume every pixel is fully opaque, which would throw away the entire effect this tool applies.
Not directly. File size in PNG depends mainly on how compressible the pixel data is, not on the alpha value stored alongside it. A faded image can end up slightly smaller or larger than the original depending on the photo's content, but opacity itself is not a compression setting.
This tool applies one opacity value uniformly across the whole photograph. For a gradual fade across part of an image, or a mask that only affects one region, you would need a layered editor rather than a single global alpha adjustment.
No. Setting globalAlpha and calling drawImage once is the entire operation, and both act directly on a bitmap the browser has already decoded into your tab's memory. Dragging the slider re runs that same local pair of calls each time, so there is no round trip to anywhere for the preview to wait on.
Brightness changes how light or dark each pixel looks while leaving it fully solid, so it still completely blocks anything placed behind it. Opacity controls how much of whatever is behind the image shows through, which only matters once the image is placed over something else, such as a background colour or another photo.
No. At 100 percent every pixel keeps its original colour and full opacity, so the output is visually identical to the source photo, just re encoded as a PNG with an explicit alpha channel rather than an implicit fully opaque one.