How can we help?
< All Topics
Print

Adding GIFs to Power BI

The HTML VizCreator custom visuals for Power BI allow you to embed HTML content, including GIFs, directly within your reports. Embedding GIFs can be a useful way to enhance the multimedia experience of your report viewers. Here are two options to add GIFs to a Power BI report using the HTML VizCreator custom visual:

Option 1: Load GIF from a Public Website (Only works with the HTML VizCreator Flex visual)

  1. Create a measure with the following code:
    GIF Measure = "<img src='https://example.com/mygif.gif'>"
    Replace "https://example.com/mygif.gif" with the URL of your GIF.
  2. Assign the newly created measure to the "HTML" field in the HTML VizCreator visual.
  3. Preview your report to see the embedded GIF in action.

Option 2: Convert GIF to Base64 (Also works with the Microsoft-certified HTML VizCreator Cert visual)

  1. Go to https://bisamurai.com/converter and convert your GIF file into a measure.
  2. Assign the newly created measure to the "HTML" field in the HTML VizCreator visual.
  3. Preview your report to see the embedded GIF in action.

Note that when you embed GIFs within your Power BI report, you should consider the file size and the impact on the report's performance.

Overall, embedding GIFs within your Power BI report can enhance the multimedia experience for your viewers. By using the HTML VizCreator custom visuals and creating measures with the appropriate HTML code, you can easily embed GIFs directly within your Power BI reports.

In the video below, you can see both options.

Demo Report

Download Demo PBIX Report

Related HTML Knowledge

Image/GIF embedding uses the HTML "img" element which has several attributes:

  • src: source of the image or GIF, is the URL (location of the file on the internet) (e.g. src='https://bisamurai.com/example.jpg')
  • alt: alternative text, if the src could not be loaded. Always recommended (e.g., alt='BI Samurai Logo')
  • width: specify the width of an image. This could be in pixel or %. Recommended to scale the image to the exact size effectively used in the report, which gives you the best quality
  • height: same as width above

You find the full list of attributes and more examples in the Mozilla Developers Docs.

 

Next up, you could learn how to create an image slide show in Power BI report.