Images pack a big punch online. They stand out and draw attention.
So, you’ve found the perfect image. What now? Most small business owners will simply upload the image. Woohoo, you’re done, right? Not exactly. These are the five essential steps you should take when uploading a new image to your website. Yes, the extra work is a little annoying at first, but following these steps will improve your site’s SEO and web accessibility conformance. Aka — these steps help turn your image into a client magnet, helping to bring new eyes to your business even when no one’s looking at it.
Naming your images
Yes, what your image file is called matters. It may seem like something no visitor to your site will see (unless they download your image) but the file name is another way to let search engines know what’s in that image, which improves your search ranking. There are some simple rules to follow when naming your images.
- Use all lowercase characters.
- Don’t use spaces or underscores to separate words.
- Use hyphens to separate words.
- Don’t use any other special characters except hyphens.
- Don't use prepositions (e.g. for, in) or definite articles (e.g. the).
- Don’t try to stuff keywords in, just describe the picture as efficiently as possible.
Keep these image names short. Search engines like Google will only pay attention to the first five words.
Here's an example. I downloaded this image from Pexels. The file name is pexels-emma-bauso-358579.jpg
I don’t mind keeping the photographer’s name, or even pexels in there because I want to give credit, but it’s not the primary information, so I’ll put that at the end. So this image’s new name is: wedding-rings-antique-books-emma-bauso-pexels.jpg
Batch renaming
To save time, you can batch rename images aka rename a bunch of images at once. I’ll usually start by batch re-naming images by group. So if you have a whole gallery of images from one wedding, you might rename them as a group with numbers at the end. e.g. “eleanor-aj-wedding-01”
If you’re a photographer, you may already do this in Lightroom. But you don’t need fancy software to do it. You can batch rename on a mac and rename multiple files on Windows.
Tip: I often include the photographers name at the end of my image names as an extra way to credit them. This is especially useful for things like background images that don’t offer a built in caption on most website builders.
Resizing images
Images should be as small as possible while still looking good. A super high-res image is great, but they’re often too big.
What does image size refer to — the pixel width and height or the amount of storage space they require (like GB, MB, and KB)? Yes.
That is, the size of an image, measured in bytes, is impacted by the pixel width and height.
Ideally, your images are smaller than 500KB, but I use 1MB as my upper limit. I pay more attention to the pixel width and height of banner or fullscreen images. For any image that’s going to span the full width of the browser, look for an image that’s 2000px wide. (Or larger, then you can resize it down.)
If you’re on a MacOS, you can resize images using Preview. When the image is open, go to Tools > Adjust Size. From here, you can resize based on pixel width. For most images, a longer side of 1000px is good.
Or, use a bulk image resizing tool like Red Ketchup. You can choose to resize based on file size.
Image named and <1MB? You’re ready to upload.
It’s the middle step. You’ve done it before. You’ll do it again. Hang in there, two to go.
Writing alt text
Alt text stands for Alternative Text, and is sometimes referred to as alt tags or alt descriptions. This is the text that is read by screen readers, displayed if an image doesn't load, and can also be read by search engines.
Ideal Alt Text for an image is 125 characters or less, and get to the point of what the image is depicting and how it's functioning within the site.
As an example, the image we renamed has some pretty straightforward alt text: "Wedding rings displayed on stack of antique books used as an example image." You don't always need to be as explicit as "used as an example image," but here it works.
When describing your work, feel free to get more poetic. A florist may have 10 images of wedding centerpiece arrangements. The alt text for each could be "Centerpiece floral arrangement" but you can give more details — color palette, vibe, inspiration, season, specific flowers. Think about why you included that image when writing alt text. Learn more about when and how to write good alt text.
Photo credits
Last, but not least, is photo credit. (Wedding photographers, I’m sure this is the end of your reading this article because, well, you know. Thanks for reading!)
Photographers each have their own rules regarding how they should be credited, so check with them first! But typically, credit involves listing their name and sometimes also a link to their website or instagram.
Where to include credit.
- on social (tag them in the photo / in your caption)
- in a caption (on your website)
- in the footer or in the text of the section / page.
- on a separate page you link out to
Creating a credits page where you list all the photographers and any other pros whose work is on your website (e.g. web designer, graphic designer, copywriter, videographer, etc.) can be a good way to give credit if you have a bunch of decorative images.
What about stock photos?
As wedding industry professionals, there’s less of a need for stock photography, but you may turn to Unsplash or Pexels (this sample image is from Pexels, and it was taken by Emma Bauso) for background imagery or textures. Images from these sites can be used without photo credit, but it’s still nice to keep a list and link out to the photographers who work you use.
So, once again, the five steps are:
- Name your image
- Resize your image
- Upload the image!
- Write alt text
- Photo Credit
These steps will make your images true assets — working behind the scenes as well as offering visual impact.
