As WordPress (and other CMS apps) have evolved they have made things easier to form content into a website. Many things have been integrated directly into WordPress such as the Guttenberg editor to help format content in a more pleasing way. However, as I’ve designed many websites and have handed these off to clients there seems to always be an unavoided difficulty around how to display images correctly in a slider, a background, or a post for your site or social media. This article is written to provide some helpful tools to understand image layout and placement. In no way is this article comprehensive in altering photos, but more as tips to think about when providing images to your web design guru or for using photos for your own use in marketing your business. Before you snap the pic, make sure you consider the following.
Portrait or Landscape
This seems simple but I am always amazed how when I ask for images for a site how many portrait photos are provided for a site that only accepts landscape layout photos. In turn, I spend a lot of time in photoshop trying to make a simple photo usable when if the camera were turned 90 degrees the same photo would be perfect.
As the illustration above shows the difference in how the phone should be held, most websites require a picture taken in landscape orientation. This is to say wider than tall. Facebook posts and Instagram posts are typically square so should be taken in portrait orientation. Facebook cover photos for events or feed pages should be landscape. To make it simple, just ask is it square (portrait) or wider than tall (landscape).
Understand Composition – Give it some space!
Another web design nightmare is when you receive photos without good composition. The old ‘rule of thirds‘ was not adhered too and the photo is beautiful but the subject is so close up that there is no way to adjust the size of the photo without cropping/cutting off part of the photo to get the correct size. Inherently causing a change in the intent of what the photo represented.
The rule of thirds is a rule of thumb in photography that the picture should be divided into 9 equal parts and your subject should fall into the center (for a centered photo) giving space or background around the subject which provides more interest to the subject.
To be honest all I care about is how do I get the picture to fit into the layout of the website so if I need to crop or slice off part of the top and bottom to make this picture’s aspect ratio correct to display correctly, I don’t want to slice off the subject to do so.
Aspect Ratio – wide by tall
I always struggle trying to explain this one, but it’s the single most important thing about your images and getting them to fit into the block of space you want to put them in. In WordPress as an example, a lot of background images must be 1600×800. This simply is an aspect ratio of 2:1. A featured image is likely 800×400 again 2:1 ratio. What this means is if my aspect ratio for the background image and the featured image are the same, I can upload the large 1600×800 pixel image and reuse it as the featured image. WordPress can alter accordingly on the fly. A lot less work for me.
Conversely, let’s say our background image is 1600×800 and my feature image requirement is 800×200, I know that a fourth of my photo’s height is not going to be visible if I try to reuse it as a featured image as the aspect ratio is not 2:1 it’s now 4:1.
I typically try to adjust my images in WordPress to use the same aspect ratio or get it as close as possible. This then gives you a catalog of images that you can use anywhere in your site instead of worrying about size for a placement. Simple is better.
If you don’t use the same aspect ratio, use smarter composition so if the system only displays half the height of your photo, it’s no big deal you had plenty of space to play with.
To calculate aspect ratio, because math can be hard and time is short, use the Andrew Hedges Aspect Ratio Calculator. It’s an invaluable tool you can’t go without.
Image Sizes – Size matters.
There are two things in image size that matter on the web and that you must understand. First is DPI. DPI is dots per inch and when you use a high-end camera it produces a 300 dpi image and is print-ready. That’s right, that picture you took of Junior on the beach building a sandcastle is ready to use in National Geographic because of its dense richness in pixels but is an abhorrent waste of resources for the web.
In your photo editor, reduce the dpi to 72dpi. This is the best setting for web photos. Make sure you save the high-quality version for yourself for prints, but for the web, we want fewer pixels in order for it to load faster. So to make a larger picture of 1600×800 pixels which is huge for a website we want that at 72 dpi.
The next thing to understand is your phone versus landscape photos for the web are not equal.
An iPhone X snaps a photo in landscape orientation at 2436px x 1125px. We know we need a 1600px x 800px image for our background for our WordPress theme. Using Andrew Hedges Aspect Ratio Tool, we know that the iPhone X took a pic with an aspect ratio of 812:375 by inputting the iPhone pic dimensions into W1 and H1.
I know that I need 1600x800px so I input 1600 into W2. The calculator will then automatically compute the missing field (H2) which shows 739. That’s 61 pixels that will not show up so I will need to crop my image of that space to get it to come out correctly.
By now you are wondering, what tools I effectively crop my images with. Well, I’ll give you my top three.
Photoshop – Yes, I had to start with the best first, but isn’t free. You have to value this on how often am I going to post images and how in-depth I want to go. Photoshop does have a monthly plan for photography that won’t break the bank. But the power that Photoshop holds is like wearing Thanos’ glove combined with the complexity of Iron Man’s workshop. Odds are you just don’t need that to adjust color or crop some photos.
GIMP – GNU Image Manipulation Program – An open-source program that literally has the ability of Photoshop for web images (lacks for print) for almost everything you can imagine and it won’t cost you a cent. Well, unless you are a good person and decide to donate to your open source projects as any decent human does – see this link to donate – GIMP Donation
PIXLR – Web-based image manipulation program. It has the necessities required to do the job and because it’s web-based it runs in your browser. If you only do occasional image work, this is all you’ll need.
Images seem like the most simple part of content creation. You just stick on there and move on, right? Well, as you see there are some moving parts, and if you are aware of image size, aspect ratio, and composition you will save yourself countless hours in editing your images to make them work properly.