Great Web Graphics

We work with myriad businesses that take seriously the principle that a fresh – frequently updated – website draws more visitors. Either they retain us to provide a constant flow of relevant content and graphics, or they organize it among their staff.

That can sometimes be a problem, because the trend today is toward more pictures and less text, which taxes the abilities of staff members who do posts. It’s not uncommon in business for someone to be able to string words together into cogent sentences, paragraphs, and articles. But when it comes to illustrating their articles, there are a few common mistakes that detract from the professionalism of the website – but, happily, can be easily corrected.

What could possibly go wrong?

The most common mistake we see is when it comes to making an image fit a specific size. Every graphic element has an ideal size, whether it’s an on-page image or a “featured image” (thumbnail). Keeping your image sizes consistent produces a much more orderly, uniform, and eye-pleasing page layout.

Let’s say we have a logo that is 1000 pixels wide by 189 pixels high:

But the ideal size for the image is 900 pixels wide by 400 pixels high. The easiest thing to do — and what most people do – is simply resize the image to the specific dimensions called for:

That technique produces an obviously distorted image that looks bad, but in this case, more importantly, that misrepresents the brand.

So what do we do?

Reduce the entire image to the width or height of the biggest dimension — in this case, reduce the image to 900 pixels wide — and then pad the image top and bottom to achieve the correct height:

If your background color is something other than white, make sure that you match the background color when you extend the canvas size to keep everything uniform. This:

Becomes this:

If the background is a gradient or a pattern – anything other than a solid color – it complicates the issue. Here’s a gradient background:

With a gradient, sample the color at the very top of the image, and fill in that color at the top; and then do the same at the bottom:

With a pattern background, take a color sample of the background, using a setting that allows you to sample a large section. This:

Becomes this:

There is another set of possibilities:

  • The image is smaller on every side than you need
  • You have extra space left and right rather than top and bottom
  • The background is a gradient

Let’s take each condition:

The image is small. You can reduce the size of an image, but if you increase its size is becomes jagged or blurry It’s best to pad all four sides to achieve your ideal image size.

Extra space left and right. Apply the techniques given above … except …

The background is a gradient. 

In this case, you have three choices:

Try to match the gradient. You might get lucky — or end up with an interesting effect.


Reverse the gradient.

Use a compatible border color. This works if there is space on all four sides, less well if you have space only left and right.

There are other types of originals and myriad fill options for each. Feel free to experiment, but never violate these cardinal rules:

  1. Never stretch an image in one direction only.
  2. Never make an image larger than the original.

If you need assistance with an image, contact me and I’ll be happy to help.

The “Over the Top Sports” logo was created in-house for this post. Logos are a specialty of ours, and we’d be delighted to help you create a great brand. Click here for more information.


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.