PNG quality deteriorated on converting dataframe into and HTML element

As we cannot view PNGs in a column of DataFrames or AG-grid using Streamlit, I converted the DataFrame into an HTML element which worked successfully but the PNG files in the DataFrame on the Streamlit application (HTML element) have very low quality as compared to the original PNG files.

It would be very helpful if someone could explain the reason behind this and let me know if there’s a solution for the issue.

Thanks,
Nishant

Hi @nishantseth,

Just to clarify, you’re converting from DataFrame to HTML to .png? Are you using a library to do that conversion?

Caroline

Hi,
Thank you for your response. I have already solved this issue and will close this topic.
Just for anyone reading with the same issue I’d like to reply to this with the solution as well.

Pre-requisite:
dfGeoC[‘ImageColumn’] has the saved PNGs as a sorted list.

Step 1: I have PNGs saved in a folder in my system. I added those to a DataFrame (each PNG in a different column)
Streamlit does not display those images but just the binary when the DataFrame is rendered in the application.

dfGeoC[‘File’] = dfGeoC.ImageColumn.map(lambda pngFile: f"{path}/{pngFile}")

Step 2: I used the .map() method with a method get_thumbnail to render these binaries into images

dfGeoC[‘Image’] = dfGeoC.File.map(lambda imPng: get_thumbnail(imPng))

get_thumbnail(path)

i = Image.open(pathGt)
i.resize((150, 150), Image.LANCZOS)
return i

Step 3:

dfNew[‘ImageColumn’] = dfGeoC[‘Image’]

Step 4: Convert this into an HTML element

dfNew= HTML(
dfNew[[‘ImageColumn’]].to_html(formatters={‘ImageColumn’: image_formatter},
escape=False))

image_formatter(im):

return f'<img src="data:image/png;base64,{image_base64(im)}" width = "300">'

Problem & Solution: -
The problem was that the images in the rendered HTML element (DataFrame) were of super low quality.
The solution was in step 2 in the get_thumbnail() function, where instead of “i.resize” function, I was using “i.thumbnail”.

Another possible solution for someone facing the same issue but not able to solve using the above solution, could be the “Image.LANCZOS” part from the same function. LANCZOS from my understanding is a type of filter used in image processing. The guide of PIL(Image) library has a great explanation of all the possible filters that can be used instead of this.

Thanks again for your reply and I hope the above solution is useful for someone facing a similar problem while trying to render images using Pandas and Streamlit.

Best Regards,
Nishant