How to Display Images in Python Tkinter?

In this tutorial, I will explain how to display images in Python Tkinter, a GUI framework for building desktop applications. As a developer working on a project, I recently faced the challenge of incorporating images into my Tkinter application. Through extensive research and experimentation, I discovered various methods to effectively display images using Tkinter.

Integrate Images in Tkinter GUI

Tkinter is a built-in Python library that provides a set of tools for creating graphical user interfaces. It offers a wide range of widgets, including labels, buttons, and canvases, which can be used to display images. To work with images in Tkinter, we often rely on the Python Pillow package, which is a fork of the Python Imaging Library (PIL).

Read Python Tkinter On-Off Switch

Install Pillow

Before we get into the code, ensure that you have Pillow installed. You can install it using pip by running the following command:

pip install pillow

Display Images in Python Tkinter

Tkinter provides various ways to display images using the PhotoImage class (for GIF and PNG) and the PIL (Pillow) library (for JPG, PNG, and other formats).

Check out Python Tkinter notebook Widget

1. Image Button

The button widget in Python Tkinter has an image property, by providing an image variable we can place the image on the button widget. The first step in the process is to read the image and to do so we will use the PhotoImage method in Python Tkinter. In this way, an image can be placed on the button widget in Python Tkinter. The button in Tkinter has an image property, you can provide the variable assigned to PhotoImage here.

from tkinter import *
from PIL import Image, ImageTk  # Import PIL for PNG support

ws = Tk()
ws.title('PythonGuides')

# Load PNG image using PIL
img = Image.open('images/download.png')  
img = ImageTk.PhotoImage(img)  # Convert to Tkinter-compatible format

# Create Button with Image
btn = Button(ws, image=img, command=None)
btn.pack()

ws.mainloop()

I have the above example code and added the screenshot below.

In this output, Download image is added on the button. Users can click on this image to download the file.

Read Python Tkinter Events

2. Image Display

Image in Python Tkinter can be displayed either by using the PhotoImage module or by using the Pillow library. In this section, we will display images using both PhotoImage and Pillow libraries. Also, we will use the create_image method from the canvas. Canvas is used to add images or text on the application screen.

from tkinter import *
from PIL import Image, ImageTk  # Import PIL for PNG support

ws = Tk()
ws.title('PythonGuides')
ws.geometry('500x500')

canvas = Canvas(
    ws,
    width=500,
    height=500
)
canvas.pack()

# Load PNG image using PIL
img = Image.open('images/sasuke.png')  # Ensure the path is correct
img = ImageTk.PhotoImage(img)  # Convert for Tkinter compatibility

# Create image on canvas
canvas.create_image(
    10,
    10,
    anchor=NW,
    image=img
)

ws.mainloop()

I have the above example code and added the screenshot below.

Check out Python Tkinter Animation

3. Image Background

There are mainly two ways of placing background in Python Tkinter. Using Place Layout Manager we can put the background image on the label and stretch it to the screen. Using the canvas create_image method we can put the image on the screen and later using the create_text method of canvas we can place a text widget.

Out of these two methods, a second method says using Canvas is more efficient and accurate and we will recommend using Canvas. In the below example, we have created an application using Canvas. The application has a background image, text, and a button. When the user clicks on the button, he/she will be redirected to our website

from tkinter import *
import webbrowser
from PIL import Image, ImageTk  # Import Pillow for image handling

ws = Tk()
ws.title('PythonGuides')
ws.geometry('500x400')

new = 1
url = "https://www.pythonguides.com"

def openbrowser():
    webbrowser.open(url, new=new)

img = Image.open('images/sasuke.png') 
bg = ImageTk.PhotoImage(img)  

canvas = Canvas(ws, width=500, height=400)
canvas.pack(fill='both', expand=True)

canvas.create_image(0, 0, image=bg, anchor="nw")
canvas.create_text(250, 150, text='PythonGuides', font=('Arial', 50), fill="white")

btn = Button(ws, text='EXPLORE MORE', command=openbrowser, width=20, height=2, relief=SOLID, font=('arial', 18))
btn_canvas = canvas.create_window(100, 200, anchor="nw", window=btn)
ws.mainloop()

I have the above example code and added the screenshot below.

In this output, you can see that the application has a background image, text, and button. When a user clicks on the button he/she will be redirected to a website.

Read Python Tkinter Multiple Windows Tutorial

4. Image Resize

Using the Pillow library in Python Tkinter we can resize the images. to import Pillow use this code from PIL import Image, ImageTkimage.resize((w, h)) this command allows us to change the height(h) and width(w) of the image. In the below example, we have created an application in which the user can provide width and height and the image will change the size in real-time.

from tkinter import *
from PIL import Image, ImageTk

ws = Tk()
ws.title('PythonGuides')
ws.geometry('500x400')
ws.config(bg='#4a7a8c')


def resize_func():
    image = Image.open("images/sasuke.png")
    w = int(width.get())
    h = int(height.get())
    resize_img = image.resize((w, h))
    img = ImageTk.PhotoImage(resize_img)
    disp_img.config(image=img)
    disp_img.image = img


frame = Frame(ws)
frame.pack()

Label(
    frame,
    text='Width'
    ).pack(side=LEFT)
width = Entry(frame, width=10)
width.insert(END, 300)
width.pack(side=LEFT)

Label(
    frame,
    text='Height'
    ).pack(side=LEFT)

height = Entry(frame, width=10)
height.insert(END, 350)
height.pack(side=LEFT)

resize_btn = Button(
    frame,
    text='Resize',
    command=resize_func
)
resize_btn.pack(side=LEFT)

disp_img = Label()
disp_img.pack(pady=20)


ws.mainloop()

I have the above example code and added the screenshot below.

In this output, you can see that the image is resizing as per the height and width provided by the user. This is a full-fledged application created in Python Tkinter that can be used for daily activities.

Check out Python Tkinter Editor + Examples

5. Image Label

The label widget in Python Tkinter is used to display text and images on the application window. The label widget has a property image. Adding an image file to this property will set the image on the label widget.

from tkinter import *
from PIL import Image, ImageTk

ws = Tk()
ws.title('PythonGuides')

# Open the image using Pillow
img = Image.open('images/sasuke.png')

# Convert the image to a format Tkinter can handle
img_tk = ImageTk.PhotoImage(img)

# Display the image in a label
Label(ws, image=img_tk).pack()

ws.mainloop()

I have the above example code and added the screenshot below.

Read Python Tkinter Table Tutorial

6. Image Doesn’t Exist

This is a common error that is encountered by almost all the programmers working with images in Python Tkinter that says, Python Tkinter Image Doesn’t Exist.

• There are mainly three reasons for this error:
  • The image path provided is incorrect
  • You have read the image using var = Image.open(pathToImage) but you have not passed it to ImageTk.PhotoImage(var).
  • declare a global variable in case you are trying to image in function.
• _tkinter.TclError: couldn’t recognize data in image file “images/workstation.jpg”
• If you are seeing the above error code, that means you are trying to use a JPG image file using PhotoImage.
• To fix that either use a PNG image file or switch to Pillow. As Pillow module allows the use of various image extensions.

Check out Python Tkinter Quiz – Complete tutorial

Advanced Image Processing with Tkinter and Pillow

In addition to displaying images, you can perform advanced image processing tasks using Tkinter and Pillow. This includes resizing, rotating, and applying filters to images.

Here’s an example that demonstrates resizing an image:

from tkinter import *
from PIL import ImageTk, Image

root = Tk()
root.title("Image Resizer")

# Load the image
image = Image.open("united_states_map.png")

# Resize the image
resized_image = image.resize((400, 300))
photo = ImageTk.PhotoImage(resized_image)

# Create a label and display the resized image
label = Label(root, image=photo)
label.pack()

root.mainloop()

In this example, we load an image named “united_states_map.png” using Pillow’s Image class. We then use the resize() method to resize the image to a specific width and height (400×300 pixels). Finally, we create a PhotoImage object from the resized image and display it in a label widget.

You can explore other image processing operations provided by Pillow, such as rotating, cropping, and applying filters, to enhance your Tkinter applications.

Check out Python QR code generator using pyqrcode in Tkinter

Best Practices for Displaying Images in Tkinter

When working with images in Tkinter, consider the following best practices:

1. Use appropriate image formats: Tkinter supports various image formats, including PNG, JPEG, and GIF. Choose the format that best suits your needs in terms of quality and file size.
2. Optimize image sizes: Large images can impact the performance of your Tkinter application. Resize and optimize your images to ensure efficient loading and display.
3. Handle image file paths correctly: Ensure that the image file paths used in your code are correct and accessible. Consider using relative paths or providing full paths to the image files.
4. Manage image references: Keep a reference to the PhotoImage objects to prevent them from being garbage collected. Tkinter doesn’t keep a reference to the image objects, so you need to store them explicitly.
5. Use appropriate widget configurations: Customize the appearance of your image widgets using Tkinter’s configuration options, such as borderwidth, relief, and background, to enhance the visual appeal of your application.

Check out How to Create a Snake Game in Python Tkinter

Conclusion

In this tutorial, I helped you to learn how to display images in Python Tkinter. I discussed how to display images in the Python Tkinter button, image display, image background, image resize, image label, and image does not exist. I also covered advanced image processing with Tkinter and Pollow and some best practices for displaying images in Tkinter.

You may like to read:

• Python Tkinter Image + Examples
• Python Tkinter Autocomplete
• Python Tkinter Mainloop with Examples

Bijay Kumar

I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.

enjoysharepoint.com/