Images
NOTE - You cannot use JPEG images in the tkinter port of PySimpleGUI. They must be converted to PNG or GIF
Images are used in 2 ways in PySimpleGUI
- With the Button, ButtonMenu, Graph, Image, Tab, Titlebar, and Tree Elements
- For the Window's icon
This is the section to cover 3 major image points....
1.The TWO image representation within PySimpleGUI - filenames and base64 encoded images
2. Image formats - PNG, GIF...... never JPG (must use PIL)
3. Icons - how the format matters on EACH operating system (HINT - Base64 encoded PNGs work on ALL of them)
Specifying Images
"Specifying" in this context means how you get the data to PySimpleGUI. Note that this is different than the image format (PNG or GIF). These 2 concepts are mutually exclusive.'
There are 3 ways you can pass your image data to PySimpleGUI:
- The filename
- A Base64 encoded byte-string of the image data
- The raw image data (as read right from the file)
Filename
The filename is simply the name of the file on your system. Be sure and use the correct path to your file. If you are struggling to get your program to run using a relative path such as 'image.png'
, then try using the full absolute pathname, which will look more like r'c:\temp\image.png'
Base64 Encoded
Base64 Encoded strings are a great way to work with images in PySimpleGUI if your images are static and will be distributed with your application. Specifying your image in this manner enables you to include the image directly in your source code, thus minimizing the number of files and reducing potential lost files. PySimpleGUI itself is able to include a large number of images in the single PySimpleGUI.py file by utilizing this encoding.
You can easily convert your images to Base64 by using the PySimpleGUI project's utility psgresizer
. See the Utilities section psgresizer utility for more information on this tool.
A Base64 string will look something like this:
icon = b'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'
Raw Image Data
If you've already read the data from a file, have downloaded the data, or obtained the image data in some other method, then you can pass the data directly to the Element or function. Use the same parameter as the Base64 data would normally use. For example, the data
parameter of the Image
element. Note that the format of the data still needs to be in one of the formats supported by tkinter or the other underlying GUI framework.
Image Formats
The tkinter port of PySimpleGUI does not support the JPEG image format. Instead you'll need to supply the image in the PNG or GIF formats (PGM and PPM are also supported). Given a choice of PNG or JPG images formats, we're fortunate that PNG is the supported format. PNG is superior to JPG in 2 ways. First is the PNG is a lossless format. The second, and more important reason is that PNG includes an alpha channel in addition to the pixel color data.
If you want to display a JPG image, then you can use a package such as PIL to convert the image to the PNG format and pass the converted image to PySimpleGUI.
Alpha Channel
The alpha channel specifies the level of transparency for the pixel. This transparency feature is what enables you to use images that appear to have no background.
This simple example will show you why having an alpha channel is so important. This image has a background with pixels that are set to being completely transparent.
https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png
Because of this, you can place it onto any background and it will "blend" with the background. If the image was in JPG format, a specific background color would be part of the image and you would be limited to using it only as a rectangular image on a solid background.
Icons
Icons are shown on the titlebar of windows and on the taskbar as well. The most portable image format to choose for specifying a window's icon is PNG. Using an Operating System specific image file format is possible, but it will limit the use of your application. For example, on Windows, you can use an ICO file format, but this will not work on Linux nor the Mac.
PySimpleGUI and the utilities published by the PySimpleGUI project use Base64 encoded PNG files that are included in the source code. This minimizes the problem of the icon file being lost.