please help with image resizing and image transparency !

[magnus28]

hello All

I'm using ChatGPT to help me make a program.

🔍 Tkinter Image Transparency & Resizing Issue (Catch-22 Situation)
We're building a custom UI in Tkinter for a damage simulator project, and we've run into a catch-22 when trying to overlay images with transparent backgrounds — specifically, a frame (frame.png) and a dragon (dragon.png) over a blue background.png.

🎯 Goal:
Display frame.png with a transparent cutout over a combat log box.

Show dragon.png (also transparent) on the right side.

Load a full-screen blue background.png underneath everything.

Ensure all images are resized to fit the GUI layout.

🚫 The Core Problem:
Tkinter provides two different ways to load images — and they conflict in what they support:

Method Supports Transparency (Alpha)? Supports .subsample() Resizing?
tk.PhotoImage(...) ❌ Limited / Broken ✅ Yes
ImageTk.PhotoImage(...) ✅ Yes (Full PNG Alpha) ❌ No .subsample() available

So we’re stuck in a loop:
tk.PhotoImage(...).subsample(...) lets us shrink the image, but then loses PNG transparency — it renders transparent areas as black or opaque.

ImageTk.PhotoImage(...) preserves transparency, but does not support .subsample(), and there's no clean way to resize using Tkinter-native tools that respect alpha.

🧪 Tests We've Done:
Verified that the PNG cutout areas are truly transparent using external editors.

Displayed background.png (solid blue) to check whether images properly reveal what's behind them.

Loaded dragon.png (confirmed transparent) using .subsample() — and it appeared opaque, not transparent.

Tested using .place() and z-ordering, confirming layering works, but transparency does not render with .subsample.

❓ Why It Matters:
We need to shrink high-res assets to fit a 1600×960 GUI layout without breaking transparency, especially for overlays like the metal frame that wraps the combat log window. Currently, no method allows both resizing and transparency in one go using Tkinter’s built-in tools.

📌 Summary:
Tkinter’s native PhotoImage supports .subsample() for resizing but kills transparency.
ImageTk.PhotoImage supports PNG alpha but won’t resize natively.
This creates a catch-22 — we can’t have transparent AND resized image overlays using either method alone.

[magnus28]

just am going to provide 2 Screenshots so you all can geta visual idea of what problems i'm facing.

image


this picture here shows the dragon with a black background, the logo with a white background, and the combat frame (with center cut-out) opaque as well! I confirmed in multiple programs that all three have Alpha channels, RGBA and verified that they indeed have transparent backgrounds.

image

[deanhystad]

I don't know if you've tried this:

Do all the resizing and overlaying as an Image in PIL. Use imageTk.PhotoImage to convert the resulting image to a tk compatible image.

Next time post the code you are running.

[magnus28]

I don't know if you've tried this:

Do all the resizing and overlaying as an Image in PIL. Use imageTk.PhotoImage to convert the resulting image to a tk compatible image.

Next time post the code you are running.

We're trying to load high-res .png images with transparency and shrink them to fit our GUI. This is what we're using now:


frame_image_raw = tk.PhotoImage(file=frame_path).subsample(2, 2)
frame_label = tk.Label(root, image=frame_image_raw, bg="black", bd=0)
frame_label.image = frame_image_raw
frame_label.place(x=600, y=180)

We’re using .subsample(2, 2) because without it, the full-res image is massively oversized in the GUI — even when the image itself is already 700x760 px. For some reason, either Tkinter, PIL, or Windows display scaling seems to treat the image like it's 2× or 3× larger than expected unless we manually shrink it using .subsample.

The problem is .subsample() only works with tk.PhotoImage, which breaks transparency — any transparent region in the PNG becomes black or opaque when rendered.

The Catch-22 We’re Dealing With
tk.PhotoImage: Supports .subsample() → ✅ resize works, ❌ transparency lost

ImageTk.PhotoImage: Supports full PNG alpha → ✅ transparency works, ❌ no .subsample() or easy resizing

We've verified our PNGs have proper alpha transparency (confirmed in GIMP and Photoshop), and that the cutout areas are truly empty.

We even tried loading the original-size images directly, but they get blown up and overflow the window — likely due to DPI scaling or how Tkinter interprets native resolution.


What We Need
A reliable way to resize the image to 50% scale

Preserve alpha transparency

Display it in a tk.Label using .place(...) over a background

If we use PIL’s .resize(...), it doesn't seem to shrink proportionally when displayed — or the image positioning goes off.

Anyone know the best way to do both without losing transparency or proper GUI alignment?

try:
frame_image_raw = tk.PhotoImage(file=frame_path).subsample(2, 2)
frame_label = tk.Label(root, image=frame_image_raw, bg="black", bd=0)
frame_label.image = frame_image_raw
frame_label.place(x=600, y=180)
except Exception as e:
log_debug(f"[ERROR] Failed to load frame.png: {e}")

try:
dragon_image_raw = tk.PhotoImage(file=dragon_path).subsample(2, 2)
dragon_label = tk.Label(root, image=dragon_image_raw, bg="black", bd=0)
dragon_label.image = dragon_image_raw
dragon_label.place(x=1340, y=100)
except Exception as e:
log_debug(f"[ERROR] Failed to load dragon.png: {e}")

[Pedroski55]

So, actually, the problem is merging the two images into 1 image?

Can you post the 2 images?

[magnus28]

So, actually, the problem is merging the two images into 1 image?

Can you post the 2 images?

no, that's not what I said at all.

And I did post two SS.

please read what I wrote, I explained the problem in detail.

[Pedroski55]

Aha, a testy chappy!

The images you posted are screen shots of an entire window. I cut out the riveted frame with a black rectangle, and the black rectangle with the white dragon, saved these images.

Then I made black transparent and saved the images as .png

After that, it is very easy using PIL to resize the dragon and paste it over the frame:

What We Need
A reliable way to resize the image to 50% scale

from PIL import Image, ImageDraw, ImageFilter

im1 = Image.open('/home/peterr/Downloads/frame.png')
im2 = Image.open('/home/peterr/Downloads/dragon.png')
im1size = im1.size # (521, 565)
im1.mode # 'RGBA'
im2size = im2.size # (123, 187)
im2.mode # 'RGBA'

# resize im2 it is too small
# Specify the target width (lets say 2 x 123 =250)
target_width = 250

# Calculate the aspect ratio
aspect_ratio = im2.width / im2.height

# Calculate the target height to maintain the aspect ratio
target_height = int(target_width / aspect_ratio)

# Resize the image
resized_image = im2.resize((target_width, target_height))

# don't alter the original image
back_im = im1.copy()
back_im.paste(resized_image, (140, 90)) # size and position determined manually by trial and error here
back_im.show()
back_im.save('/home/peterr/Downloads/frame+dragon.png', quality=95)

im3 = Image.open('/home/peterr/Downloads/frame+dragon.png')
im3.mode # 'RGBA'

You can do this with cv2 too.