Web Analytics Made Easy - Statcounter
Skip to content

Image

Image call reference

The Image element displays an image in your window provided they are in PNG, GIF, PPM/PGM format. JPGs cannot be shown because tkinter does not naively support JPGs. You can use the Python Imaging Library (PIL) package to convert your image to PNG prior to calling PySimpleGUI if your images are in JPG format.

A general discussion of images and image formats used in PySimpleGUI can be found in the images section.

layout = [[sg.Image(sg.EMOJI_BASE64_READING)]]

image_using_emoji

Events

If events are enabled for the Image element, then the element's key will be returned as an event when the image is clicked with the left mouse button.

Values Dictionary

No entry is in the values dictionary for Image elements.

Specifying the Image

Reminder - As discussed in the section on image formats, the tkinter port of PySimpleGUI only supports PNG & GIF format, not JPG.

There are 3 parameters that can be used to specify the image to be displayed. You can also create the Image in your layout without specifying any image to be initially displayed, and then use the update method later to display an image.

These 3 parameters specify the image:

  1. source - A "union" of the other 2 parameters. The type passed in will determine if it's a filename, Base64 string or raw image
  2. filename - A string representing the location on disk of your image
  3. data - Either a Base64 encoded byte string or a byte string (an unencoded "raw" image)

Resizing Images

While you cannot resize your image to an arbitrary size, you can increase or decrease the size of your image to be displayed. For example, if you're displaying the built-in emoji used in the example layout above, you'll find that this image has pixel size of 56 x 56 pixels. The size parameter will not scale up/down the image to a specific size, for example (200,200) pixels. The size parameter changes the size the Image element will use in your layout, but will not change the scale of the image itself.

subsample & zoom Parameters - Rough Scaling

Two parameters can be used to provide a rough scaling of your image:

  • subsample - decreases the image scale by multiplying the size by 1/subsample
  • zoom - increaes the image scale by multiplying the size by zoom

For example, if you want your image to be 1/2 the size it normally has, set subsample=2. If you want the image to be twice the size, use zoom=2. You can combine these 2 parameters as well. To get 2/3 the original size, set zoom=2, subsample=3

This layout demonstrates using these scaling parameters:

layout = [[sg.Image(sg.EMOJI_BASE64_READING)],
          [sg.Image(sg.EMOJI_BASE64_READING, zoom=2)],
          [sg.Image(sg.EMOJI_BASE64_READING, subsample=2)],
          [sg.Image(sg.EMOJI_BASE64_READING, subsample=3)],
          [sg.Image(sg.EMOJI_BASE64_READING, zoom=2, subsample=3)]]

image_scaling

Scaling to Specific Size

To resize to a specific pixel dimension, you can use the PIL package. There are numerous Demo Programs that provide code demonstrating this operation.

Images As Buttons

You can easily get a button-like behavior by enabling events for an Image element. If events are enabled, then when you click the image, you'll receive and event back from windows.read that equal to the key for the Image element.