Admit it…you’ve never really given placing images on your website too much thought. You found some “good” ones, popped them on, maybe resized them, and called it a day.
Sure, they may not have been the best in quality, but they got the job done.
But now you’ve realized that to take your website to the next level, it’s time to rethink your visuals.
A picture is worth a thousand words. But don't let it cost you thousands. Click To Tweet
Because choosing the right images to put on your website can elevate your brand, portray professionalism, and demonstrate credibility. And that’s what we all want, right?
So if you’re (re)designing your website, read on to learn what image options are available to create your visual style, and tips to make sure placing images on your site actually helps your SEO (not hurts it!).
Part I: Know Your Options
Alright! So before you decide what your visual style should be, you’ll need to understand your image options.
In the most general sense, I’ve referred to three types of “images” you can have on your website:
- Photos
- Graphics
- Icons
1. Photos
Pretty basic, but these are images shot with a camera. Whether your iPhone, a DSLR, or even an old Polaroid camera, they portray what was shot in the lens realistically (unless later Photoshopped…).
And for your business website, they would be great at showing off you, your office, your employees, your city, etc. Anything relevant to your business.
There are two general types of photos you might want on your website.
Custom Photos
These are photos taken that are not available online for public use. Like photos you’ve taken or your photographer has taken.
The most important aspect with having custom photos on your website is quality.
- Nowadays, your smartphone can do a pretty good job, but just make sure the quality is there. People can usually distinguish a high-quality photo from an amateur one, so if you go this route, make sure your photos display professionalism in its quality.
- The other option would be to hire a professional photographer to do a photoshoot for you. We’ll go over more tips for this later, but just know this can run a few hundred dollars at a minimum.
Stock Photos
Sometimes it may make sense to use stock photos on your website. These are photos available for public use, so they aren’t exclusive to you or your website.
If you’re looking for a cheaper alternative than a photographer, they’re great to use.
But for your business website, don’t use stock photos that represent your company’s people. For example, don’t place a stock photo of four smiling employees at the top of your home page. Everyone can recognize it as a stock photo. And then you risk site visitors thinking your business isn’t real or credible enough.
Of course, there are always exceptions to this rule. Your business might be fine using a lot of stock photos, and it makes sense to use stock photos in blog posts.
If you decide to use stock photos, you can get some from various sites (like iStockphoto or Pixabay). Some sites, like the former, require you to pay for photos, while others like the latter, are free to use.
But don’t forget, you’ll want to make sure you comply with copyright law.
Because…
- Some photos are not allowed to be used under any circumstance.
- Some photos are allowed to be used as long as you give correct attribution (ex. The author’s name and/or website).
- And some photos can be used without having to provide attribution.
If you go to a stock photo website, they will usually list the Creative Commons version for that photo. And if you read it, it will tell you what you need to do in order to use the photo legally.
However, you can use Pixabay for free photos that you don’t have to provide attribution.
Tip:
Know that you can’t just take a photo from someone’s website and link it as your own. That’s illegal and called hotlinking. You could be sued by the photographer for using their photos without permission and/or attribution.
2. Graphics
In the most basic sense, graphics are illustrations created by a computer or maybe drawn in real life and uploaded digitally.
They can be complex and even look like a photo, but for the most part, you can tell they are created by a digital artist.
Here’s an example of what custom graphics looks like on a website:
Good quality graphics can portray professionalism and add creativity to your website. Click To Tweet
They are also great to use when displaying a process or idea, as illustrations are better comprehended sometimes.
If you aren’t a graphic artist or don’t have a design member in your business, you can hire out some projects with freelancers or a design firm.
Some places to look:
And of course, the cost will depend on your project and artist.
3. Icons
And lastly, we have icons. These are a subset of “graphics” that usually accompany text to illustrate the concept better (ex. a phone next to a phone number).
These are symbols that are usually available to use in your website’s theme. They can be easily inserted in your site with some clicks or some code.
The most popular icon set today is FontAwesome, with over 675 icons from which to choose. They’re easy to use and free. Win-win.
So where should you use icons?
You can pretty much use them anywhere you could add a graphic representation.
Like in your contact section in your footer (ex. Phone, address marker, email symbol).
Or you can use social media icons to link to your accounts.
Or for sections of your website where you can represent your services or products.
Here’s how Capterra does it:
Of course, you can put as few or as many as you see fit. They just add another minor level of professionalism to a website.
Part II: Choose Your Images
Alright, so now that you know what your options are, it’s time to decide what style or look you’re going for in your website in relation to your budget.
Maybe you want all high-quality custom photos, but if you only have a few hundred dollars to spend, you probably can’t afford them.
So decide which mix of image types you want on your website, and what images you can afford.
If you already have a list of web pages you want on your site, look through them to see what images would best accompany the words on the page.
And if you don’t have a clear website page plan, you can read how to make one…
Start making a list of pages and what kind of image(s) you want.
Also think about the fact that some images might be stand-alone photos, and others might be background photos with text over them.
So make sure you make note of them.
If you’ve decided you want professional photos taken of you or your company, here are some steps to take:
- Make a list of what photos you want (ex. Your office building, your desk, talking with a client, etc.). Brainstorm what photos would work best for the pages you have and look at other web sites for inspiration. Make sure you note the background – is it blurred or is it also in focus. That can have a major impact on how professional a photo looks.
- Then decide what style of photo you want. Do you want your photos to be bright and clean or dark and striking? This should fit into the tone of your business and website color scheme. (ex. If your color scheme is bright, dark or black and white photos might not work).
- Figure out your budget for the photo shoot. If you participate in a barter program, you may be able to find a photographer to save money there.
- Research photographers. Ask around to see if anyone in your network knows a good one or use the internet to find ones. Make sure you see their portfolio to see if their pictures are what you want. And show them examples of how you want your photos to look so they can know how to shoot you.
Design Tip:
If you want a photo of you or your product with no background, you’ll need to Photoshop it out or find someone who can do this. Check sites like Fiverr or even your photographer may be able to do it for an added fee.
Part III: Putting Images on Your Website
Ok, so you’ve learned what your options are for putting images on your website and decided what you wanted.
Now let’s go over how to put the images on your website (assuming you’ve gotten all your images ready to go)! These tips are best practices for SEO, as they help with it.
Step 1: Remove any Exif Data
If you have photos you want on your website, you might want to consider removing any exif information before you upload them to the world.
This data can contain the exact location the photo was taken or even the photographer’s name.
So to protect your privacy, you can google “remove exif” and either install a program to remove the data or upload your photos to a website to do it.
Step 2: Reduce the File Size
Ok, so now we need to optimize your photos. Because large photos (over 1 MB) can take longer to load on your website, which hurts your page speed and SEO.
So, you can either download an image optimizer plugin for WordPress (like EWWW Optimizer) or run your photos through a free site like Optimizilla. I prefer the latter as I don’t like installing unessential plugins (as they can slow your site down and be a security vulnerability).
Optimizilla is super easy – just click which photos you want and then download the optimized version. The file size is usually drastically reduced but the quality very similar.
Step 3: Rename Your Photos
Face it, IMG_0023 says nothing about the photo (apart from the fact that it was the 23rd photo you’ve taken).
And it says nothing to Google, which can hurt your SEO. Search engines don’t just crawl the text on your website looking for matches to a keyword query, they look at your image files too.
Not having keyword-rich image file names can hurt your search ranking. Click To Tweet
So to improve your SEO, rename your photo with a description of what the photo is and include any keywords you want found. And if you have all your photos together on your computer, just take some time and crank them all out at once.
And here’s a tip, click the photo’s name and then F2 to rename it faster on Windows.
Step 4: Upload Your Images
Now, you can do the actual upload of your images to WordPress.
Once you log in to your WordPress dashboard, select Media > Add New. You can drag or click the images you want.
Step 5: Add “Alt” Descriptions
After you’ve uploaded all your images, you’ll want to do the last step of adding an “alt” description to them.
In WordPress, when you click the image, a window pops up with the file’s information on the right hand side.
There is a field for Alt, where you can write in the description.
You can basically write a description for the image, including any keywords. This will show up if your image can’t be displayed for some reason and is also used for SEO.
To learn more about boosting your site ranking with SEO, check out this post:
Bonus Step: Correct Your Image Sizes
After you’ve inserted your images in the right pages, you should analyze each page via GTMetrix. It tells you how fast your site is and how to improve its performance.
And there might be suggestions related to your images. If you’ve forgotten to optimize them, you can download optimized versions to re-upload to your site.
But many times, the image you uploaded is bigger than necessary. This means it’s taking more time than needed to display the image to your visitors. This slows your site down.
The best part is that GTmetrix gives you the recommended size the image should be. So, you can resize it either via Photoshop, WordPress, or with a free online program like PicResize.
Conclusion
Now you’ve learned what your image options are, decided on your visual style, and have uploaded your images correctly to improve your SEO.
Whew, that was a lot…good job!
Just know you may want to change up your visual style every few years or so. That way your site doesn’t look dated.
Got a second? Leave a comment below with what image style you’re going for. Any takeaways you’ll use from this post?
And if you’ve found this post helpful, please share it with your friends so they can also choose their best images!
20 thoughts on “How to Pick and Place Your Website Images Correctly”
I love the in-depth of information!!! Great advise and tips – thanks so much for sharing!
Thanks, Anna. Glad I could help!
I really like the visual impact your site makes. It looks so clean and adds credibility to your post. I appreciate all of the information. I find the image part of my website to be the hardest part. I have been relying on free stock photos and it is not always easy to find these. Prior to starting to learn about blogging, I was not aware that you could not just use pictures from the internet. I figured that since people were putting the pictures out there, those pictures could be used. I then read about people being sued for using these pics and I erased them all from my Facebook! There is a lot to learn and I appreciate your detailed information. I am subscribed to your blog, great stuff!
Hi Marlena,
Thanks for the compliments on my site. I’m glad as that was the aesthetic I was going for. Yeah, understanding copyright on images can be a shock to learn the first time! Glad you scrubbed them from your Facebook. And thanks for subscribing!
Thank you so much for taking the time to share these awesome tips. I know I needed this and I’m sure many others do as well!
Thanks for stopping by Christina! And glad I could help.
As a professional photographer who’s had countless images “borrowed” by well-meaning folks who for the most part really didn’t know better, I LOVE the information you’re providing here! So, so helpful.
Hi Aimee,
Yep, most folks starting out don’t realize all images are free. At least they liked your photos enough to steal them (if that’s a silver lining lol). Thanks for commenting!
Wow this was really informative, thanks for the tips!
Thanks for stopping by Christina! Glad you found this post useful.
Great tips! I am working on creating better images for my blog. Making progress, but still have a ways to go!
Thanks Sheila! Yep, it’s a whole process but good job on making progress! I’d love to check your site out when you’re done.
So helpful! Thanks for the in-depth explanation! 🙂
Thanks for stopping by Karina! Glad you found it helpful.
Really enjoyed your article since I’m questioning myself about my pictures on my website -thanks!
Hi Marie,
Glad you enjoyed my article! Hope it helps you pin down your image style.
Ali,
I just loved your stuff. I landed here via Pinterest and I can say that you are providing amazing stuff.
Cheers Nekraj
P.S Just pinned this article.
Thanks Nekraj! That means so much to me!! And thank you for sharing on Pinterest. Love that platform! Thanks for stopping by.
Thanks so much for the awesome tips!
Very helpful post! Thanks. Saving for later!