The moment a visitor lands on your website, they’re deciding whether or not they should stick around.
You need to do whatever you can to grab your attention. One great way to do that is with stunning website images.
The online space is becoming increasingly visual from apps like Instagram, to the prevalence of YouTube. We like to look and watch more than ever.
Websites that contain big blocks of text aren’t very interesting. But, you don’t want just to throw up random images either.
To capture your visitor’s attention, you want high-quality and relevant images.
Below you’ll learn seven different photo editing tips that you can apply to your photos. By the end of this post, you’ll have a few tricks that you can apply to your new or existing photos to help make them more engaging and higher quality.
The Importance of Stunning Website Imagery
Today you’d be hard-pressed to find a website that’s just text and nothing else. Humans are visual creatures, and images will help to draw your readers into your website.
Why else do you think photo-based apps like Instagram have taken over the world?
It’s a battle for attention out there, and you need to use every tool at your disposal to hook your visitors and encourage them to keep reading.
Images help to break up walls of text and give your readers context for what they’re reading.
Your images can be exciting, weird, or just plain interesting. You can use screenshots, or explainer images. You can even get real crazy and start incorporating GIFs into your content.
Only one thing is certain: you need images on your website, and they need to look good.
7 Photo Editing Tips to Transform Your Site’s Photography
There are a lot of ways to transform boring and dull photos into something engaging and interesting. Good news: you can do it without having to become a professional photographer.
Below you’ll find seven different tips that you can implement to improve the overall look and quality of your photos, as well as other intangibles like elevating site performance and improving search engine rankings.
1. Go For Quality Above All Else
Attention spans are shorter than ever. This means that you need to do everything in your power to try and grab your visitor’s attention.
Well-written content will help. But, stunning imagery can go a long way towards keeping your readers hooked. In fact, nearly 70 percent of people say that a website’s imagery was very important when it comes to purchasing products.
This isn’t directly related to editing your photos, but it can help with choosing the right images for your content, product pages, sales pages, and more.
Images that are high-quality and provide value or context to your content will help to elevate the quality of your site as a whole. Plus, quality images will make your visitors stay on your site longer, which will help increase conversions and boost your onsite metrics.
Sometimes it can be worth it to hire a professional photographer, like for company headshots, about page photos, and even product photos. But often you can get away with using high-quality stock photos.
Today, there are all kinds of quality stock photo sites that have photos from professional photographers.
Here are a few that are worth exploring:
There are also a ton of premium stock photo sites out there as well, but the above resources will be more than enough to get started.
2. Choose the Right Filetype
Once again, this tip isn’t directly related to making edits to your photos, but it’s crucial as it will affect the editing process and what you’re able to do with your photos.
The first distinction is between PNG and JPEG files. If you’ve never edited photos before then, you probably view these as the same thing. But, they’re actually very different.
Understanding the difference between image types will also help with image optimization. Your goal here is to reduce your image file size without having to compromise quality. Images that are smaller in size will load quicker and positively impact site performance as a whole.
PNG images will contain more image information and thus be greater in size. Overall, PNG images will be higher in quality because they contain more colors and image data. This helps if you need to do extensive editing work, but for some pictures, it might be overkill.
JPEG images will be lower quality in general but still pack enough of a punch for most images. There will be fewer colors, and it’ll be more difficult to do extensive editing work with, but it will be fine for basic images. However, when you do compress JPEG images, the quality will decrease at a faster rate.
Overall, if you require images that have greater detail, or you need to make more edits, then go with PNG. However, make sure that you run your images through a compression tool like TinyPNG before you upload them to your site.
One final point to make about your images is the filename. It can be tempting to name your photo '˜image1.jpg’. But, you should give some thought into what you name your images.
The name of your images can help them rank better in Google image search. Plus, it’ll help give the search engines more page context when scanning your site, which can help your SEO overall. Read this post for more tips on image SEO best practices.
3. Know How the Rule of Thirds Works
Finally, we’re getting into our first photo editing tip: the rule of thirds. The rule of thirds deals with photo composition and what makes a good photo. Embrace this simple rule, and you’ll see the quality of your own images soar.
Here’s an example of a photo with the rule of thirds grid laid over the top:
Notice in the image above how the key elements of the photos are at the intersections of the lines. This helps to give your photos greater balance and makes them look more professional.
If you have existing photos that aren’t following the rule of thirds, then try to edit or crop them to the grid and see what it does to the overall composition of the photo.
This rule isn’t 100% true, but more often than not photos that follow this rule will have better composition and be more pleasing to the eye.
4. Consider Your Own Photo Style
When you consider all the images across your site taken as a whole, does anything stand out? Is there a unique style that you can call your own?
Just like how your website has a unique style that matches your brand, your images should do the same thing.
If you don’t know where to start, then spend some time browsing Instagram. Since it’s a photo-based app, you’ll be able to find interesting photo aesthetics you can take inspiration from.
Once you have a general idea of the type of photography style you’re going for, use the tips below to make that style a reality:
Use Different Colors to Set the Mood
The temperature of your photos can help to invoke a certain feeling. For example, seeing the sun set will invoke a different feeling than seeing the sun high in the afternoon sky.
Even certain colors can invoke different moods. Bright colors like oranges, reds, and yellows are vibrant and associated with high energy. Meanwhile, colors like blues and purples are more calm and relaxing.
You can add these color elements to your own photos to help create a certain vibe.
For example, you can practically feel the fun emanating off this photo:
Or, how about this one? The cool blue hues and darker colors give this photo a relaxed, yet chilly feeling:
Consider Using Pre-set Filters
If you’re trying to give your photos a different vibe, but don’t want to spend hours adjusting colors and settings, then you can always use a filter.
You’re probably already familiar with filters from uploading photos to Instagram. But, you can use filters on virtually any kind of photo. There are all kinds of online editing tools that have built-in filters, just like Instagram.
Just upload your photo and browse through the selection of filters until you find the one that’s right for your photo. The best thing about filters is that you can use the same filter for all of your photos to bring a sense of cohesiveness to all the photos on your site.
5. Crop to Highlight Important Details
Once you take or upload a photo, your work isn’t complete. One of the quickest edits you can make to elevate the quality of your pictures is using the cropping tool.
When you crop an image, you can help to bring out the details that you want to highlight, and you’re making the image more impactful.
Check out the difference in the images below:
The first image is great, but let’s say we wanted to only use the '˜Toronto’ portion of the photo. With a crop we can bring the focus into exactly where we want it to be:
The cool thing about cropping is that it’s such a simple edit, and you won’t need a fancy image editing tool either. Most computers will have a built-in tool that lets you crop images.
Or, if you’re using WordPress, you can crop images from within your dashboard as well. When you upload an image you’ll have the ability to change the size of the photo, crop it, and add image information.
6. Whitespace Can Be Your Friend
Embracing whitespace is a fundamental web design principle. Just like your website needs to have whitespace to avoid feeling cluttered, so do your images.
The use of whitespace is effective because it allows you to place your visitor’s attention where you want it to be. Think about Apple. They use tons of whitespace throughout their designs and photography, and it helps to create a feeling of elegance and minimalism.
Use whitespace to guide your reader’s eyes around your website and provide them with much-needed relief from the often overstimulating online world.
Keep in mind: whitespace doesn’t have to be white either. As long as it’s a generally flat color that contrasts with the image, it will help to draw your visitors attention.
7. Get Your Colors Straight
Color correction is a bit of a more intermediate skill, but with a little practice, it’s something that can really elevate the quality of your photos. Color-correction can be used whenever, for some reason, your pictures don’t look quite right.
This could be due to low lighting, or the colors just don’t match the vibe you’re going for.
When you’re adjusting colors you’ll have a lot of different things to work with, but the main things you’ll be adjusting are how light and dark the image is, the level of saturation, and the overall contrast of your image.
For example, with just a few quick tweaks we can turn this photo…
…into something that resembles an old photograph:
There’s a lot you can do, just by making a few simple tweaks in your preferred editing tool.
In Closing: Becoming a Photo Optimization and Editing Pro
Hopefully, by now, you have a better understanding of how to edit your website photos. The information above should be enough to help you get started. There’s a whole world of photo editing and skills you can develop.
Like most things, learning how to edit your website photos is all about trial and error. Test out different color corrections, filters, cropping methods, and more. In time, you’ll be able to quickly edit photos to the exact specifications you’re going for.
Remember, before you upload your photos to your website, you’ll want to optimize them for the web. This involves making sure the dimensions are correct. So, if your content width is 1200px, then make sure the images are no larger than this.
Next, you’ll want to compress the images to reduce the overall file size without impacting image quality. You can do this before you upload by running your images through a tool like TinyPNG, or if you’re running a WordPress site, install a plugin like Smush Image Compression, which will automatically optimize your images as you upload them.
Once you master a few photo editing basics you’re on your way towards becoming an editing professional. Hopefully, the tips offered in this post will help you make your website photos pop.
Kevin Wood writes about technology and human potential. You can find him at his virtual homes Wooden Writing and Counter Culturist.