Rosaleen asks…

Hello, I’m creating a professional training website where one of the pages will be dedicated to the bios of the trainers. What size and resolution photos should I ask the trainers to send me? Thanks in advance for any advice.

Kristy Lee answers…

The answer to this question is a bit tricky, as the different sizes will look better or worse depending on the real estate you are working with. Generally, images come in pixels. Pixels are a unit of measurement that is standard amongst graphics. A good thumbnail is 150 pixels high and 150 pixels wide. If you want something a bit bigger and clearer, 300px x 300px is also a good size.

To give you an example, see the photo on the left sidebar of me wearing a cowboy hat? That photo is 250px wide and 140 pixels high. I chose this size because it was the size of my sidebar. If you are putting the photo within the body of the content, you have more flexibility and more room so I would probably go with 300px wide.

Secondly, you don’t necessarily need a square image. Most photos are rectangle shaped and it is customary to design according to the width. So if you designate that you want photos of 300px wide, the bio holder can choose the height based on the aspect ratio of the photo.

In regards to resolution, as long as the image is clear to the naked eye, you are fine. I wouldn’t worry too much about it. Because these images are smaller and will be the exact size you need, resolution is less of a factor. If you were adding photos to a gallery or using them for artwork, it would make a difference. But in this case, it is not so important.

The main objective here is that the photo adds to the content without dominating the design. You won’t want your photo to take over the page and get in the way of other content! Nor do you want it to be so small you have to strain to see it.

Lastly, keep in mind that search engines cannot read images or text on images. Don’t forget to add alt tags to your images with your keywords and add good on page text for those search engines!

Categories: Blog