Imagine looking at a grid of images and gray ghostlike blobs appear on your screen. This isn’t a hallucination, it’s what users see when the hermann grid illusion takes effect. It occurs when a grid of images have equal margins of more than 2 pixels. Users will see gray ghostlike blobs at the intersections of the grid. But when they focus on the intersection, they won’t see anything.
At the intersections, white light floods most of the retina’s receptive field. This causes strong lateral inhibition which results in an area that appears gray. Looking directly at an intersection activates the fovea. It causes little lateral inhibition because it has the smallest receptive fields and the highest number of photoreceptor cells. [source]
Better Ways to Align Images in a Grid
It’s common for websites to align images in a grid with 10 pixel margins or more. But this creates the hermann grid illusion, which can annoy users when they’re scanning images. The gray blobs aren’t easy on the eyes, but here are a few ways you can make them disappear.
2 Pixel Margins
Aligning the images in a 2 pixel margin grid is one way to make the gray blobs disappear. Some other benefits are that it saves space and the margins become thin, subtle lines.
Another approach is to align images with different sized widths or heights together. This creates ragged margins that make the gray blobs disappear.
Larger Row Margins
Making the row margins larger than the column margins also make the gray blobs disappear. Doing this guides the user’s eyes to scan the images row by row.
Instead of changing the size of the margins, you could change the grid’s background color. Any colored background can make the gray blobs disappear.
It’s interesting how the human eye plays tricks on us. The hermann grid illusion deceives the user’s vision and distracts them from their task. But through proper image alignment you can decrease the visual noise. Image grids are a common layout choice for websites. Next time you decide to use one, remember what users could see.