If you missed them, read Part 1: Getting Photos and Part 2: Photo Storage, Collaboration & Organization.
You’re finally taking and collecting amazing photos! But it can be frustrating when you go to use the photos on your website or on social media and things aren’t working right or don’t look good. This guide, full of lots of tips, will help you take the images that you need so that they work with your digital platforms and not against them.
As you go through your collection of photos, or even as you’re taking photos, have an idea of the end-goal. Where is this photo going to end up, and what does that space, the actual container that the photo is going to sit in, look like?
Orientation is the direction your photo lies. The most common orientations are horizontal, otherwise known as landscape; vertical, otherwise known as portrait; and square.
Horizontal, or landscape, images are often used as full-width background images, in page title header areas, as featured images for events and posts, and in-content. They’re likely going to be the most common image orientation that you’ll need, so it’s a good idea to have a large variety of good quality horizontal images at your fingertips.
Most non-phone cameras will take horizontal photos when holding the camera in its normal, natural position. TIP: To take a horizontal image with your phone, you’ll need to turn it sideways before taking the image. If you have a vertical image that has to go into a horizontal space, then you’ll have to manually crop off the top and/or bottom of the photo before uploading it so that it’s the correct orientation. So if you’re taking vertical photos that might end up becoming horizontal ones, back up or zoom out! Leave plenty of room around the main subject of your photograph so that you can crop accordingly.
Vertical, or portrait, images are primarily going to be used in the main body content of your website, so you don’t need many. One of the most common uses of vertical images is the head shots used on your staff or leadership page.
For non-phone cameras, turn the camera sideways to take a vertical photo. If you’re using a phone, keep it in its normal, upright position. If you have a horizontal image that you absolutely need to use in a vertical space, you’ll need to crop the left and/or right sides of the image before uploading it to your website.
Square images are an excellent way to give fair treatment to both horizontal and vertical images. They can be found on staff pages or as featured images on events and posts. TIP: Squares can sometimes be disguised as circles, which are just square photos with rounded corners! You’ll almost always need to crop an original image in order to make it square – they don’t come naturally off of a camera. On your website, the boxes containing square images are often coded specifically to do so. If you upload a non-square photo to that space, the website will crop it for you.
Figure out what size images (in pixels) are coming directly off of the devices that you’re using. Either look at the specs and/or settings for that device, or run some tests and get that information from the photos once they’re on your computer.
It’s also important to know what software and programs you’re using and whether or not they’re resizing images when you upload/download. For instance, Google Photos has quality settings so that you can save on storage, and if you upload there for organizational purposes, you might not be getting the original size when you go to download a photo. Email service providers also will often resize photos so that you can send/receive them more easily. Hardware storage rather than software storage is the best way to go if you’re concerned at all about losing quality or size; but if you’re using software, just make sure to check all of the settings so that you’re not losing quality, and know that you will likely have to pay for storage long-term.
Once you have photos of a decent size, figure out the largest space (within reason) that your image might need to fill and size your photo accordingly before uploading to your website. If you need help figuring out the size of a specific space on your website, reach out to us!
As phone cameras get better and better, images are getting larger and larger, both in “physical” size (measured in pixels in the online world) and in file size. On the one hand, this is great news because it means you’re starting from the best possible place! However, for quicker load times and for long-term storage, you want your photos to be uploaded to your site at the smallest needed size, which involves a little bit of work.
As a good rule of thumb, a full-width background image on your site would be the largest space that you’d need to fill. TIP: We recommend a minimum of 1600px wide for background images, and a maximum of 3200px. Anything larger than that should be down-sized before uploading to save on space and to help with load times.
At the other end of the size spectrum, make sure your photos are large enough. If you have a photo that is originally at a width of 300px, and you’re trying to put it into a 1600px width space, the image either won’t fill the space or it will have poor resolution and will look blurry or grainy. And unfortunately, there’s not a magical solution to scale up a photo successfully (without paying good money!) – usually these photos are unusable or usable only in specific scenarios. TIP: Go back to the original owner of the photo and ask if they have a larger version.
Aspect ratio is related to both orientation and size. It tells you the relative width to height ratio.
On your website, there may not be a “normal.” In some cases, no particular size or aspect ratio is specified in the design of your site, and the space will take on the size or aspect ratio of what you upload. But in other cases, a size or aspect ratio might be coded, in which case the image will likely crop accordingly. If a size is specified, it might not have a “common” ratio – sometimes just the width or height is specified, and the other adjusts accordingly. And to make matters even more confusing, your site is mobile responsive, so in some cases, the aspect ratio changes dynamically depending on the screen size of the device on which you are viewing the website.
If you’re finding that most of your photos are falling into a specific aspect ratio, and you’d like help designing a website to use that ratio everywhere, reach out to us and become a partner!
Not only do you sometimes have a vertical image that needs to go into a horizontal space, or vice versa, you might also have a very specific size or aspect ratio being used on your website that results in a cropped image. This happens most often in background images behind page titles, which can be very wide and narrow. When you upload a photo to these locations, the website will typically arbitrarily crop your image to fit. However, you may not like what it chooses to crop. We highly recommend using photos of people on your website, but if the website crops off someone’s head, that might not be ideal.
In these situations, you’ll want to pre-crop your images before you upload them. If you know the orientation of the space as well as the size and aspect ratio needed to fill that space, then you can open the image in a photo editor, re-size it, then crop it the way that you’d prefer. (We’ll talk about the specifics of how to crop in our next post on editing).
But not all photos can be cropped to fit any given space. For example, if you have a photo of a really tall person and a really short person, and the original photo is zoomed in tight on them, then you may not have anything to work with to crop – someone’s head in one direction or another will be cropped out. TIP: It REALLY helps if you give some extra room around your subject matter when you’re taking photos.
How your photos come across to someone who is visiting your website is just as important as your images’ orientation, size, ratio, and crop. Who and what are in your photos? Are your photos dark, blurry, not straight? These are all things that you should think about and address before putting an image on your website.
Sometimes there are things wrong with images that you can’t do anything about. If an image is blurry or grainy, you probably won’t be able to fix it. Occasionally, you still can use these photos as background images since they’re not the focus of what a visitor to your website would be looking at, but most of the time, you won’t be able to use them at all.
If someone comes to your website, and all of your photos are dark, that may give the wrong impression. Sometimes photos have a dark overlay on them by necessity so that you can read text on top of them, but any photos not in that category should be bright and vibrant. While there are ways to edit existing photos to brighten them, it doesn’t always work or look good. Outdoor photos are a great way to get great lighting naturally. The “golden” hour can be a magical time, just after sunrise and just before sunset. Check the lighting of interior spaces at different times of the day and in different seasons – there might be a perfect moment to grab the perfect shot, especially if your interior lighting isn’t great.
Follow the lines! Check any vertical and horizontal lines in your image and make sure your image is straight. Remember that perspective can skew things. Find an object, like a tree or a cross, that should be straight, and use that as your guide. If it’s not straight, pre-edit the photo and rotate it – it often doesn’t take much to straighten out an image. TIP: If you have a straight-on photo of your sanctuary, check the stairs in the middle or where the pulpit area meets the floor or where the top of the wall meets the ceiling. If these horizontal lines aren’t straight, pre-edit the photo before uploading and rotate it a little until they are.
Sometimes overly busy photos can be distracting, especially if an image is being used as a background image with text behind it. Make sure your images have a little (or a lot of!) breathing room. Also give them a focal point – something that your eye is drawn to – and then ensure that where and how an image is being used on the website doesn’t detract from that.
The subject matter of your photos will say a LOT about your church or organization. Pay attention to all of the details!
Some things to think about:
If you need some help and advice as you get a grasp on how photos and your website interact, current partners can reach out to us any time via a support ticket or by email. Interested in becoming a partner? Get started now!
Copyright © 2008 - 2024. Worship Times. All rights reserved.
