Every single website needs a few good photos. A website without a picture on it is like a summer day with no sunshine – yucky and dark.
When you go to add pics to your site, finding them is the first step. Once you’ve got them, you’ve got to make sure they look good on your website without slowing it down to a snail’s pace.
The official name to get this done is called “image optimization.”
All that means is that you will shrink the image files before you put them on your site. That’s it.
So, let’s start at the beginning of this photo journey.
#1) Find great photos for your site!
To get photos, you’ve got a few options, take them yourself (cuz you’ve got a kick-ass camera in your pocket at all times), hire a photographer, or get them from a site that allows you to use them for free or a small fee.
There are a slew of websites where you can find great photos that you can use for free. Here are a few of my favs:
These sites all have gorgeous photos free for you to use, but the files tend to be HUGE. You shouldn’t put them on your website as is.
#2) Make Sure You Can Use the Photos for Commercial Purposes
For this one, you’ve gotta read the fine print. There are so many photo sites out there, that it’s smart to take a sec to read the terms.
You want to make sure you don’t inadvertently violate copyright by not giving proper attribution to a photographer if it’s required. Or, you download an image that’s not allowed for use on a commercial or business website.
I’ve read all of the terms on the sites that I’ve recommended above. They all allow commercial use for their photos.
If you think that reading the terms sounds like a chore, it actually doesn’t take long because they’re not filled with tons of legal-ese. When you’re downloading images from any of the numerous photo sites out there, you want to make sure that the terms on the site say something like this, as found on Pexels.com:
Or, language like this from Unsplash:
You want to make sure that the photos are free to use for commercial purposes. If they’re not, and you put them on your business website, you’re opening yourself up to copyright infringement which means scary letters and lawyers. Yuck – while I’ve not experienced this I’ve read plenty of blog and social media posts from people who have. Much better to be safe than sorry.
#3) Take a screenshot of the photo on the website
If you really want to protect yourself and prove that you did in fact get the photo from a site that allows for commercial use, take a quick screenshot of the photo on that website before you download it.
File it away. If somebody does at some point try to go after you for copyright infringement, you have a bit of proof as to where you sourced the image.
#4) Set up a Site Credits page
This isn’t necessary but if you’d like to give the photographers credit for their photos, creating a Site Credits page and linking to it in your footer is an easy way to do that. This is also necessary if you’ve downloaded a photo from a site that requires photographer attribution.
You can also give shout-outs to any other businesses or service providers who helped you with your site such as your brand or portrait photographer, copywriter, coach, or even your super supportive partner (just cuz being kind always wins).
#5) Figure Out What Image Sizes You Need
This is one of those tasks that can take for-ev-er and send you down a rabbit hole of screen sizes. Think about it. There are giant desktop screens, smaller desktop sizes, laptops, tablets, and a gazillion different sizes of phones.
Then, add in both vertical AND horizontal orientations for tablets and phones, each of which have different sizes. And, we haven’t even touched retina screens….
Yeah, a seriously overwhelming rabbit hole.
Here are the rough guidelines that I use.
For a header image on a larger screen, if you want the image to be able to be full-width, which means it touches both sides of the screen, your picture should be at least 1500 px wide, but 2000 px or even 2500 px is a safer bet for larger screens.
For a header image that covers the whole screen from top to bottom, with no white space or text visible underneath it, make it at least 800-1200 px high.
If you want to have space below the header image, a height of 400 px works.
For a blog post, the image needs to be the width of a post, whatever that is on your site. My post width is around 800 px, so if I want an image to run the width of my post, I set it for that width (watch the vid below to see exactly how I do this).
Your theme might also have documentation as to what image sizes work best for that specific theme.
On a final note, it’s wise to make smaller versions of your images for mobile screens if you’re using a theme that you can adjust for smaller screen sizes. In Beaver Builder you can set those images to show in your responsive settings. One of the “mantras” in the design world is to design for mobile first since so many people will visit your site from their phones or tablets. Always double check to make sure your images “work” on phones as well as on your computer.
One more quick tip is to make sure the images are as large or slightly larger than you need them, not smaller. Websites do much better making images smaller for screens. Images look pixelated and unclear when they go from small to big.
Now that you’ve got your images and you know the size you need make them, it’s time to shrink them down, easy-peasy.
#6) Re-size Your Image for your Website
There are two important parts to resizing your images for your website: the actual size of your photo, or the dimensions in pixels, and the file size.
If you upload humongous photos to your website, and you do that over and over, the images will slow down your website and Google does NOT like slow sites.
Remember that the pics taken on your phone are often way too big than what you need for your website.
So, how do you resize an image?
You need a photo editing tool. If you’ve got Photoshop, you can use that. But if not, my favorite free online photo editing tool is called Pixlr. It’s fast, easy, and FREE.
Here’s a quick video that walks you through the process.
For those of you who prefer to read the instructions, here they are:
First, save the image you want to resize on your computer.
Open up the Pixlr Editor.
Click on File, Open Image, and select the image you saved to your computer.
Under the Image Tab, click on Resize Image. Adjust the dimensions of the image. The dimensions you choose really depend on where you’re going to be using the image on your site.
Once you’ve resized the image, save it as a .JPEG. Click File, Save. You can see how big the file size is in the bottom right corner of the “save” box. Make sure you choose JPEG for the file format. There will be a dramatic difference in file size.
I try to get my image to be no more than 70kb for the web. To adjust, you can change the quality of the photo with the little slider before you hit save.
Save the image to your computer.
7) Install an image optimization plugin
Before you upload your newly optimized image, install an image optimization plugin to your WordPress website. This will also help to optimize/shrink any images you may have already uploaded without optimizing first.
There are two that work well. I’ve used both of them, and as with many plugins, there are both free and premium versions available. If you need help with how to evaluate and install plugins, this post will help.
The first is called WP Smush by WPMU Dev. The other one has the rather unfortunate name of Ewww Image Optimizer. Both work well, are updated regularly, and work to optimize your images to assist with site speed.
The only reason I tend to use Ewww is that WP Smush really wants you to buy their premium plugin, and they aren’t afraid to constantly point out all the upgraded features you get for $49/month. It gets annoying to have banners continually appear on the backend of my website.
Once you get the plugin installed, you’re ready to upload your images. Now, you might think this is too much. Why optimize an optimized image?
My answer…why not? You’re going to upload the image anyway, so if a plugin can reduce the size a bit more without losing any quality, use it.
The second reason is that both of these plugins will optimize images that you’ve already uploaded which can improve your site speed.
Images make your website look great, but they can also slow it down if you don’t manage them properly. It doesn’t take much time, and it’s so worth it.
And it’s not hard. Just shrink ’em.
Then, install one of the plugins and optimize your images. Test your site again. Did your site speed improve?
Let me know in the comments – I’d love to hear your results!