Tips for displaying photos in pop-ups

When displaying photos or other images in ArcGIS Online web map pop-ups it’s sometimes the small things that can make a big difference in the user experience. A small project recently completed for the Montgomery Botanical Center is an example of how you can do some minor tweaks to optimize your photos in pop-ups, and put your best pop-up forward.

For this project we received the locations of trees within the Center in a spreadsheet, along with photographs of each tree. The photographs were quite large – over 5 MB each.

In our first iteration we placed the photos at a web location and added a column to our spreadsheet that included the URL to each photo so we could configure them into our pop-up. Here’s the raw pop-up after we first dragged and dropped the spreadsheet onto our map:

The field called PHOTO contains the link to the image. We used it twice to both display in the pop-up window and also to provide a link to the full-size photo. Here’s our configured image pop-up media dialog:

We also hid unwanted fields, and used aliases to change CAPS to lower case to be a little more friendly.

This gave us pretty good results, but we noticed two things straight off. The first was that there was white space (see arrows below) around the photo in the pop-up, since the photo is best-fitted within the allotted space.

The second thing we noticed is that even though we were displaying a very small image in the pop-up compared to the original, it took a few seconds to display the first time. The reason of course is that we were still accessing the full 5MB image to display in the pop-up.

The solution was easy. We made a smaller sized version of all images to fit the pop-up exactly (200 pixels by 150 pixels) and added that to our spreadsheet in a thumbnail field (PHOTO_TH shown by arrow below) to use in our new image configuration:

The new thumbnails were only a few kilobytes each, so they were much faster to display. And now the photo filled the entire frame – much nicer!

So with a few simple tweaks both the pop-up performance and aesthetics were improved.