An image truly does say 1000 words. More importantly, an image conveys a message far quicker than words which is why we are drawn to them on the page first. WordPress has the support for themes to use featured images. This allows you to add an image to a post or page and the theme to make use of this within archive lists and headers.
To have the most impact for your featured images they need to have similar styles and a similar look. This does not mean they all need to be a certain colour or style but they do all need to look ‘right’ when seen together. The biggest issue is, therefore, their size and the aspect ratio between their width and height. Images of different sizes rarely ever look right on the page together. Furthermore, when these pages are shared on social media, I would expect the featured image to be carried across as well. So, things need to be set up correctly to make sure this happens.
Although you need to agree on rules for how your featured images will be created and displayed, once these are set up things are much easier. It is honestly impossible to give one rule that will work for any design, but here are a few principles that you may wish to apply to your website.
Initial size
The size of the image you upload to your website needs to be the largest size that you expect it to be displayed on the site. Any bigger pounds you are using resources and slowing your site down, any smaller, and the image will look distorted when displayed at full size.
Thumbnail
This is the name given to the smallest image which is the one that your theme will use most often as their headline image or image within an archive of posts. Often now referred to as the ‘featured iamge’, both terms refer to the same thing. WordPress helps us by allowing the theme to code with a deciated php function with the dimensions of not only this thumbnail but a medium and large size of the image. Unfortunately, this size is a global figure, there have been times when I wish I could have separate sizes for posts and pages and other post types.
Resizing your image
When you upload an image to WordPress, it will also create for you thumbnail and other sizes of the image your theme has defined. However, it is at this point that we have potentially a major problem. WordPress has two ways of resizing your image. It can use a soft resize which will mean that the image will be resized so that it fits within the width and height as specified. The problem with this approach is that you will end up with thumbnail images that are different sizes where the aspect ratios (ratio height to width) are different. The second way to resize your images is to use a hard edit. This will reduce the image to fit the size required in one direction and then crop the image to bring it in line with the other. The problem with this approach is that you may lose important information of the edge of your image. It is possible at least to tell WordPress whether you wanted to crop to the top to the left or to the right of the centre, but I see too many posts were an image contains a message which has had letters cropped off each end and ceases to make sense.
The best approach
Good preparation can make things far easier. We have a template image size for each web project which we use as a guide for all the images we upload. As we do a lot of work with presentations and videos we have set up the aspect ratio of an HD video. Small changes in the height of images do not cause a problem to our theme design and so we allow WordPress to do a soft edit, which means that all images have the same width and almost the same height.
Style helps
In order to make out images ‘pop’ from the screen, we have given them a thin border and a shadow effect. The images are also responsive, so they will shrink on smaller devices, when required. We also use style commands to change the width of the image in certain screen sizes. All part of the bootstrap framework approach.
