As WordPress (and other CMS apps) have evolved, they have made it 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 always to be an unavoided difficulty around how to display images in website design correctly in a slider, a background, or a post for your site or social media.
This article is written to provide some helpful tools for understanding image layout and placement. In no way is this article comprehensive in altering photos, but it is more as tips to think about when providing images in website design or for using photos for your own use in marketing your business. Before you snap the pic, make sure you consider the following.
Tips for Using Images in Website Design
Portrait or Landscape
This seems simple, but I am always amazed how, when I ask for images for a site, 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 they should be taken in portrait orientation. Facebook cover photos for events or feed pages should be landscape. To make it simple, ask if it is square (portrait) or wider than tall (landscape).
Understand Composition – Give it some space!
Another ‘images in website design’ nightmare is when you receive photos without good composition. The old ‘rule of thirds‘ was not adhered to, 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: the picture should be divided into nine 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 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, a 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 be altered 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 on your site instead of worrying about size for 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 have plenty of space to play with.
To calculate the 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 for images in website design.
Two things in images in website design size matter on the web that you must understand. The 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 72 dpi. 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.
Image Tools of the Trade
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 it isn’t free. You have to value this on how often I am 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 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 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 in website design seem like the most simple part of content creation. You 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. For web design services, we recommend TOPSweb, LLC.