Ways to display images in a data table

Question

I have data table to show, some columns are of type "image".

Airtable, for example, displays images directly in the cells, but it makes the rows very thick :

That thickness is not required for other fields here.

Another option would be to put an image icon in each cell and show the image in a popover when hovering the icon.

What are the best ways to display images in data tables?
If using an icon inside the cell, which icon would fit best ?

Thanks !

[Edit] Context

This is for a no-code tool similar to Airtable. You can specify the different database models you want, and which fields are in each database model with this ui :

Now, we need to add a way for users to add some data in these tables. It's not done yet but fields will have different possible types: string, number, boolean, file, image.

The insertion of data is just for test data useful to test the app, that can be inserted manually, it's not supposed to be filled with large volumes (>30 items).

If we use a table for the display and edition of this data, what would be the best way to display images without having thick rows ?

Answer 1

These are great questions and while we’re not 100% sure of the context, background and users of your scenarios you're working with, we thought of a few ideas that could be explored further.

1. Offer an imaged based browsing experience

Your table cells could be turned into cards if users are adding images and prefer browsing this way.

Additionally, the following image could be a viable option for when your users require a comparison feature:

What if you have multiple images?

We also thought about how users might incorporate a carousel-like feature to add multiple images to a single cell in the data table or card view.

2. If using an icon inside the cell, which icon would fit best?

For simplicity we can use a simple image icon like the following:

Here are a few links to some great resources for icons:

• Google Fonts
• Font Awesome
• The Noun Project

3. What would be the best way to display images without having thick rows?

Adding a sizing scale, like Gmail's density settings, would allow users to dynamically adjust the size of their images, which is one solution we considered for dealing with the thick rows.

Good defaults

If you're going to let users tailor their experience, you should collect useful data about their preferences so you can improve the default view.

Image Sizes

Consider limiting the image sizes. A huge image will cause usability issues for the user. The image might take up their entire screen, which will cause some scrolling issues especially if there is scroll snapping with the data cells.

Aspect Ratios

• How will you handle tall/wide images?
• Will you crop the images?
• Will you add a buffer area to make the size fit correctly?
• Will you consider different aspect ratios of the images?

Final Thoughts

In summary, hopefully these ideas and questions spark a conversation with your team or within yourself to explore the multitude of factors revolving around your users.

Thanks for reading! I hope it helps! Take care and have a lovely day :)

Answer 2

Make the images much smaller, slightly larger than the thumbs up icon's outer border, and then make it enlargeable upon a user's click/tap to either within its row/column (to its current size or slightly larger), or in an overlay/modal.

Answer 3

The question is quite interesting. I would advise you to see how other products cope with this task. A great example is Trello and Notion.

My advice, you can use the following options for your images:

• Use widgets. Make one or two versions of the widget (or card) that will have a fixed size and the same display logic regardless of the size and shape of the image.
• Use manual setting. Let the user customize the image inside the widget. For example: change position, size, rotate, etc.
• Determine the order. Create multiple order options for your new widgets. That is, determine the maximum number of widgets that can be in a section, how they will be arranged (one by one, tile, list ...), etc.