Imagine something better

Bad Image Grid Screenshot

Adding images in WordPress is easy. Adding images in a grid takes a little bit more effort.

Index pages are a great way to help your visitors find the pages that they want to see. On a website like this one, images are really just a form of decoration, but for many websites they are much more important. A retail website would be poor without images. We like to see what we are buying.

A directory page of images in a grid is a great feature, but it needs an important design decision. Do you adopt fixed or variable image sizes?

Many WordPress themes will use the thumbnail image that is automatically generated whenever you upload an image. The default is a 150 by 150 square image that crops any excess height or width. That is OK if it does not crop something important. Half a face can give a poor impression. A worse impression comes from trying to resize images of varying perspectives into a fixed size grid.

Take a look at this example of a bad image grid:

Bad Image Grid Screenshot
Bad Image Grid

The screenshot shows three equal images in a grid, which is a good layout, but with problems, and hidden waste. It’s nice to see three images in a grid, but I’ve seen this girl. She is beautiful, yet the first picture looks alarmingly scary, and the second two make her look dumpy. There are more problems of presentation with wasted opportunities. Let me list all the problems, then we will see how to fix them.

Bad Image Grid Problems

I’ve mentioned how bad the images look, but let me explain why.

The image grid displays three images across the page at a fixed width of 210px so that they neatly share the content width. This is good, but what about the source images? The bad news is that images of varying sizes and proportions have been squeezed into the display space.

Never do this.

Upload images that have been scaled to the space available. In this case, the height is also fixed, so the alignment works well. I prefer this in most cases. It really depends what look you want to achieve. The alternative is to display images at their original proportions, with variable borders. There is no right and wrong here. Decide if you want to display fixed or variable proportions, but never squeeze variable proportions into a fixed space.

Speaking of squeezing, even without the proportion problem, we have a size issue. Or more correctly, a speed issue. This is not the worst example I’ve seen, but it’s still significant. The 3 images total over 180 KB. If they were loaded at the displayed size, they would be less than 25 KB, and could be optimized to be even smaller. This matters. Loading images that are larger than normal slows page loading. This is a bad visitor experience. In the worst cases, visitors will not wait, and look elsewhere. Google recognizes this problem, and penalizes slow load times in search results.

Besides these obvious issues, there are other missed opportunities. The hidden waste I mentioned includes:

  • No branding. Image search is popular. Why not brand your images to increase exposure?
  • No image description. WordPress gives every image a page that can be indexed and appear in search results. Why not use that to boost your target page and target related searches?

People pay lip service to Search Engine Optimization (SEO), without really understanding what it is. It’s all about improving your visitor experience. Pretty pop-up graphics might seem appealing, but do they increase revenue? Does your target audience seek bells and whistles, or will good information make it easier to make a sale?

That is why I start all web businesses with clarifying intentions. You must know your target audience, and you must design your content to attract relevant visitors. With 3 extra pages, 1 for each image, you have 3 extra opportunities to target more visitors. Think about your main target audience, and 3 subsidiary markets, and in my next article I will explain how to turn the following weaknesses into strengths:

  • Badly stretched images
  • Bloated images
  • No branding
  • Missed target markets

A simple webmaster task such as displaying images presents lots of technical opportunities. There are hundreds of plugins to prettify image presentation. If you are a photographer, art gallery, or similar business that relies on great presentation, then these are important. If you just need images to decorate your page and help you convert visitors to customers, you should focus on avoiding the 4 failings I listed above.

Leave a Reply