Design Your Wedding Photographer Website: Part 3 - Images
We’ve all heard the saying, “A picture is worth a thousand words.”
But on your wedding photography website, your photos are invaluable.
As a photographer, every photo on your website demonstrates your skill and ability. Each photograph is an opportunity to impress potential clients.
The photos and graphics on your website are of paramount importance.
In part 3 of our blog series, we’re talking about how to correctly use images when designing your wedding photographer website.
Images
Images on your website can be broken into two categories: photos and graphics.
For the sake of this blog post, graphics are computer-designed or sketched images that add additional visual interest to your website.
Let’s begin by talking about best practices for all images (both graphics and photos) on your website.
Image File Size & Format
When sizing images for your website, keep the image size as close to 500KB as possible. As you go above 500KB you run the risk of reduced page load times. Slow load times reduce user experience and can result in visitors leaving your website. It can also lead to search engine penalties.
You will want to keep your resolution around 72 DPI.
Keep your images in JPEG or PNG format.
Image Ratios
A big rule of thumb for website design is that all stacked or side-by-side images should be cropped to the same aspect ratio. The ratio itself doesn’t matter (1:1 vs 4:3 vs 3:2), but they should be consistent when it is easy for the eye to compare them.
Please note – this does not mean that every image on your website needs to be the same aspect ratio.
Instead, as a general rule: all images within a website section should be the same aspect ratio.
Accessibility
When placing any sort of image on your website, ensure that the image has an appropriate Meta Tag and Alt Text (can also be called alt description). This is for accessibility and allows page readers to “share” what is in the image.
It also provides an SEO boost (especially when you lightly sprinkle in keywords) by allowing search engine web crawlers to “read” the image.
Meta Tag: overall image name
This usually auto-populates from the image name you applied on your computer desktop.
To reduce busywork, appropriately name each image before uploading it to your website platform!
Alt Text: description of the image
This is a brief description (under 300 characters) of what the image is.
This must be entered within your web platform.
A note on Alt Text:
There is some back-and-forth debate about if every image on your website needs an Alt Text description. The traditional thought was that every image that provided context to the web page required alt text, but decorative images (that could be removed without changing the page impact) did not.
The trend is now shifting to including Alt Text on every image, regardless of context status, to improve your website’s accessibility.
I know as a wedding photographer your time is fleeting and valuable.
My recommendation is this: if you have the time and ability to add Alt Text to every image, then do it (especially for the SEO boost). If it is too time-consuming or overwhelming, only apply Alt Text to context-relevant images. Then, as you have time, go back and add Alt Text to unlabeled images as you’re able.
Graphics
I’m not going to spend too much time discussing graphics in this post. I want to spend more time focusing on the photographs, as that is more relevant to wedding photographers. But here are my general thoughts.
First, remember: your website isn’t for you, it’s for your clients. Will additional graphics appeal to your ideal clients? If you think they will:
Choose graphics that match your brand style and vibe.
Choose graphics that will elevate your brand's professionalism and credibility.
Only use matching sets of graphics that work cohesively together. No mix-and-match.
Use them sparingly.
Make sure your graphics don’t create too much visual clutter or overwhelm.
Photographs
Let’s get into the main topic for your website: choosing and using photographs correctly.
Photo Quality
When selecting images for your website, you want to focus on the “best of the best” images you’ve taken.
Each image should earn its place on your website.
Think quality over quantity. In terms of design (and client psychology), it is much more valuable to have 20 high-octane images across your website than 50 mediocre images. Is it going to impress website visitors or just be average? If it’s average, don’t include it.
Image Style
When couples visit your website, they want to know exactly what style of photography and editing you offer.
Select images that showcase only what you’re going to provide, whether that’s ethereal, bold, saturated, or moody photography.
Not sure what to choose? Consider which style is going to make you happy to photograph and edit over and over again, and choose that style. (And remember, you can always evolve your style and change it in the future, but for now, consistency is key).
Image Content
Your Wedding Photography
When selecting images for your website, try to choose images that show what sets you apart.
Do you utilize unique techniques or editing styles?
What about special props, poses, or framing?
Do you have unique equipment that allows for different photography?
It’s okay to include “tried and true” photography techniques and poses, but remember - we want to show how you’re different than your competition. What’s your “wow” factor?
Photographs of You
I know, I know. You prefer to be behind the camera. But it is vitally important that your website – especially your About page – contains at least a few photographs of you. Couples want to know just who is behind the lens. Photographs of you help make a connection.
Here are a couple of photos I recommend you have:
3-5 professional headshots
5-8 photos of you “at work” - both staged (smiling at the camera) and natural (focused on work).
Photographing weddings
Talking with the bride and groom
Editing on your computer
Any other unique ways you can be shown in your “natural environment.” =)
Installing Photographs on Your Website
Pixel Width
In addition to the image size, resolution, and aspect ratios mentioned above, pay attention to these pixel widths for your photographs:
Here are my go-to pixel widths for photographs:
Banner images that extend the full width of the web page: 2,500 px. wide
Images that take up ½ of a web page width: 1,000 px. wide
Images that take up ¼ to ⅓ of a web page width: 600 px. wide
Images less than ¼ of a web page width: 400 - 600 px. wide
Image Placement
Place images on your website that compliment your website copy (text). For example, if you’re introducing yourself – you need a photo of yourself. If you’re talking about a unique technique or editing style, include photos that demonstrate it.
Then, lightly sprinkle photos throughout your web pages. Pay attention to your white space use (learn more here - Design Your Wedding Photography Website: Part 2 - Spacing) and don’t overdo it. Remember, each photo should earn its place and contribute to the page.
Avoid placing more than 3-4 photographs side by side on your main web pages. Photographs should complement the text, not be stand-alone sections, with the exception of your portfolio page.
To learn how to select and curate your Portfolio Page, grab my freebie on curating a professional portfolio to attract your dream clients!
Keep reading … ⬇️
Banner Images
The last type of photograph I want to touch on is your banner images. Banner images are images that extend across the entire width of your web page.
These images are “hero” images and should be your absolute best-of-the-best photographs.
Banner images should be images shot in landscape (not portrait) to preserve their clarity.
Banner images can be used as dividers between sections of text. You can also use banners behind headlines and taglines.
Keep reading … ⬇️
When placing a banner image behind text, here are a few guidelines I recommend when choosing and editing your image.
Use simple photographs.
Avoid heavily-detailed, busy photographs.
Choose photographs with large areas of little detail to provide high contrast.
Pay attention to the subject matter behind your text.
Avoid putting text over faces.
Avoid putting text over text within the image (signs, etc.).
Ask yourself - does it look natural? Is it overly busy or cluttered?
Always determine if it adds to or detracts from the quality of your website.
To increase contrast and smooth out a busy background use a solid-color overlay.
Here are a few examples!
Careful use of small space.
White overlay to increase contrast.
Using the sky as a solid text background.
Lastly - I advise using extreme caution when placing blocks of “paragraph text” directly over a photo.
When done correctly, it can have an elevated, classy appearance. But when done poorly – it can greatly detract from a website’s credibility and design by making a web page look cluttered and overly busy.
It can also make your text very difficult to read and distract from the actual photo you may want displayed.
If you really want to place paragraph text over a photo, place the text over an area of the photo that has minimum detail. Make sure you have high contrast between the text and background. Follow your white space guidelines and make sure your text doesn’t sit directly next to the primary focus of the photo.
Placing the correct images on your website can make or break your website’s marketing impact and credibility. If you don’t want to spend time designing and fiddling with your own website, it’s time to hire a professional.
My Peach and Pine Experience is a comprehensive, custom website build including powerful copywriting, aesthetic web design, and web strategy. You can get started by learning about the experience, getting to know your designer, or scheduling your complimentary consultation!
If you have questions or an idea for a future blog post - send me a message!
As always, I’m cheering for you!
Kylee
You may like these other blog posts!
Don’t want to miss when a new blog post gets shelved?
Join my inbox community and receive the Peach and Pine Post, a twice-monthly newsletter with links to recently published blog posts plus tips, tricks, and insider info about marketing, SEO, web design & strategy, copywriting, managing a small business as a real human being, and so much more! See you there!
