How automatic background image sizing works

Shmeppy tries to figure out how many columns and rows there are in a background image when you upload it.

If it succeeds, the image will appear correctly sized in Shmeppy and you’ll just have to nudge it into place (by shift+dragging it). If it fails you’ll have to size it yourself (either using the popup that appears when you double-click the images or by shift+dragging the edges/corners).

There are three distinct steps Shmeppy takes when figuring out the size of the image:

  1. Look for dimensions in the filename.
  2. Detect the dimensions via a computer vision algorithm.
  3. Fallback to using a fixed pixel density.

I’ll describe each step in more detail.

1. Look for dimensions in the filename

Many images contain the row and column counts in their file names. Shmeppy looks for them in the format COLUMNSxROWS (ex: stream crossing 23x16.jpg).

Sometimes an image will contain the resolution in its filename rather than the row and column count (ex: stream crossing 1472x1024.jpg). So Shmeppy will only use these row and column counts if both image_width / columns and image_height / rows are greater than 3 (this is the pixel density of a cell, ex: a pixel density of 1 means each pixel in the image consumes an entire cell in Shmeppy’s grid).

If Shmeppy couldn’t find a suitable value from this, it’ll move onto the next step.

2. Detect the dimensions via a computer vision algorithm

Computer vision is a field in math/engineering that deals with extracting information from an image. OCR programs that read text in images are examples of computer vision algorithms.

I’ve created an algorithm that tries to count the number of vertical and horizontal grid lines in an image. My algorithm works for many images with grid lines, but not all of them. It may provide an incorrect answer or no answer at all.

If my algorithm provides an answer (incorrect or not) Shmeppy will use it. Otherwise it’ll move onto the next and final step.

3. Fallback to using a fixed pixel density

At this point, Shmeppy has no idea how many columns and rows are in the image. But some answer is needed, otherwise Shmeppy can’t place the background image into the map at all. So Shmeppy just assumes a pixel density of 60.

This means that the number of columns will be image_width / 60 and the number of rows will be image_height / 60. If either value is less than 2, 2 is used instead.

And that’s it! This step can’t fail, it will always provide an answer.

I hope this was useful! Feel free to ask any questions here.

Thanks for working on Shmeppy! Super excited for the next update.

1 Like