Tips for Using Images on Your Website

Updated July 5, 2019

Using images on your blog or website isn’t as straightforward as some think. Make sure you’re using them legally, and optimizing them so they’re working for you, not against you.

This post contains affiliate links, meaning, if you click through and make a purchase, I will receive a commission. Read my full disclosure here.

Here’s what we’ll cover in this post:

Use images legally

Many people assume if they find an image on the internet it’s free to use. This is not the case. Images are copyrighted. Do not use them without permission.

“But what if I give credit to the photographer and/or link to them? I can use it then, right?”

Not necessarily.

When you can use an image legally:

Use an image you took yourself.
Use an image in the public domain, perhaps because there is no known copyright, or because it has a Creative Commons Zero (CC0) license, meaning, the photographer has chosen not to hold onto his/her copyright.
Use an image with a different Creative Commons license and follow the terms of that specific license.
Get explicit, written permission from the photographer.

If you want to get into the details of legalities, Sara wrote an excellent guest post on Social Media Examiner about using images on your blog and how to avoid breaking the law in the process. It’s a great to-the-point reference about image use.
Back to top

Are Pinterest images free?

No. Again, the images you find on Pinterest are most likely copyrighted. See above for more.

Where to find images

If you have a knack for photography, use your own images. If you don’t, there are many sites with images you can use.

Free options

My favorite is Pixabay because they have a huge selection, are easy to search and you can use them for personal or commercial use, no attribution required. You can use them freely because they are released without copyright under the Creative Commons CC0 license.

There are many similar sites as well, like Pexels, StockUp, StockSnap.io and more. You will undoubtedly see overlap in the photos from one site to another as the free images get circulated pretty heavily. But hey, free without attribution is handy!

If you want to use images freely, no attribution required, look for images with a Creative Commons Zero (CC0) license, or images in the public domain.

Premium option

If you can’t find a free photo that fits what you’re looking for, or if you want something fewer people are using, you can buy photos very reasonably priced. I buy photos from Depositphotos. They have a great selection and their photos can be purchased for a dollar each (sometimes less if you get a deal, which I always mention in the Useletter® when I see one).

IMPORTANT: Regardless of where you find your photos, the main thing to remember is to know and follow the terms of use! If you aren’t sure, find a different image or try contacting the owner of the image to ask permission.
Back to top

How to provide proper attribution

If you do use a free photo that requires attribution, make sure you provide attribution correctly.

I’ll say it again, providing attribution or a link does not necessarily mean you can use a photo. You can only use a photo with permission.

To make the permission process more streamlined, some photographers attach a Creative Commons License to their photo making it easier to understand how they will allow their photo to be used.

For example, I mentioned the CC0 license above which means a photographer releases their photo to be used freely without attribution. But there are other CC licenses, such as the Attribution license which allows you to use the photo, but you must provide attribution.

The proper way to provide attribution will vary depending on the image you use. Follow the guidelines for each individual photo. Here is a common starting point:

Title of the photo (if provided).
Source link to where the image lives online. (Often one and two are combined.)
Author of the photo. Link the author page.
License.

For example, this photo from Flickr is properly attributed:

“Dolphin” by Sergio Tudela Romero. CC2.0

How to choose high quality images

If you’re not photography savvy, find the images that have the most positive comments or have been faved or starred the most on sites like Pixabay. Ratings like this weed out the lower quality images for you.
Back to top

Find images in bulk to save time

(This is a great tip from Amy Porterfield.)

Make a list of the main topics/categories you write about.
Carve out a good chunk of time (maybe 30 minutes?) to focus on image gathering.
For each topic, search for images. Download a handful, save them to your computer (don’t forget to note the link and credit info so you have it later), upload them straight to your WordPress Media Library (Media –> Add New) or simply bookmark the image links for quick access later.
Then, when you’re writing a post about one of those topics, search your already-gathered collection instead of doing a new search from scratch.

If you use an image at the top of your posts…

Search engines can only read text, therefore, images are unreadable to them. Also, image file sizes are large and can slow your site down. For those reasons, make sure your images are optimized as suggested below.

You also might consider starting your post with a short, SEO-optimized paragraph and placing your first image beneath. That’s been my strategy for quite some time.
Back to top

Rename your images before you upload them

Use keywords in your image names. Whatever you do, don’t use IMG_0042 or the like. You can rename your images by right-clicking on their existing filename in Windows. On a Mac, select the image you want to rename. Once selected, click once more until you see the highlighted text which allows you to type in a different name.
Back to top

Use the ALT tag

The ALT attribute is basically a text description of your image. Remember, search engine spiders can’t read an image, so one of the ways they figure out what an image is about is by reading the ALT text.

When you upload in WordPress, you’ll see a field called “Alternate Text.” Always fill this in. I usually just use the same keyword-rich name I used to title my image in the first place. Watch this video if you want to know more about ALT text.
Back to top

Consider adding captions to your photos

You know why? Because a lot of people don’t read the content but read the captions. (Do you do this in magazines too?)

In fact, Derek Halpern from Social Triggers goes so far as to say not adding captions is The Biggest Mistake Every Blogger Makes. I don’t know that it’s the biggest mistake, but I know I should do this more.
Back to top

Resize your images before uploading

Images straight from a camera have very large file sizes. Publishing on the web however, does not require the same detail (number of pixels) for clarity.

So, it’s important to always resize your images before uploading them to your blog or website. Small images are much more streamlined and efficient. You can do this in various way. A popular option is PicMonkey which is free.

Determine how wide your images should be. This will depend on your site design but will probably be somewhere around 800 pixels wide. I recommend making the width of your image only as wide as the widest part of your content area (or the area your image will be).
Upload your image to PicMonkey by clicking “Edit a photo” or “Create New.” (Registration is required but they have a free trial.)
Click the Resize option in the left column. Make sure the “Keep proportions” icon (looks like a chain link) is checked so your image doesn’t get distorted. Enter your pixel width (first box). Click Apply.
Click Export at the top of the screen. Name it and click Save to my computer.
Upload to WordPress via Dashboard > Media > Add New or directly in your post via the Add Media button.

Compress your images before uploading

Compressing is different than resizing. Resizing changes the height and width of the picture you see. Compressing squishes the file components you don’t see. There are many tools you can use to compress your images, many of which are free.

An online tool I use often is TinyPNG (works for JPEG and PNG files). Simply go to TinyPNG, drag & drop or upload your image to the box at the top of the screen. Give it a minute to compress. Once it’s done, you’ll see the Download link on the right. Download the compressed image to your computer, name it if you need to (remember to choose a good name) and then upload it to your blog / website.

Affiliate link your images

If you’re going to promote a product or company in a post and plan to use your affiliate link in the body of the text, make sure any images in the post are attached to your affiliate link. Many bloggers include an image, but if a reader clicks on that image, they are only taken to a separate page on your site where your upload is stored. Readers are accustomed to clicking on images so make sure yours are linked!

Of course, using your affiliate link means you must disclose properly.
Back to top

Why make your own graphics

Images and other graphics are important for your blog.

They help with branding, break up your text and make your blog nicer to look at. Also, people tend to share images quite a bit.
Back to top

Free tools to make images & graphics

There are many free online tools you can use to create graphics. Tutorials for most of them are easily found by googling.

PicMonkey – PicMonkey is an easy-to-use online tool. It has all sorts of social media templates you can use. Plus, the PicMonkey blog has all kinds of tutorials explaining how to do cool design things. Here are some to get you started:

There are many other online tools similar to PicMonkey like Canva, Pixlr and BeFunky.

Gimp – Gimp is a downloadable program similar to Photoshop, but without the hefty price tag! This is what I use to make most of my graphics. These are the tutorials I used to get started, but just search YouTube for “gimp tutorials” and you will find many more.
Back to top

How to take a screenshot

In a browser – If you’re using Chrome you can take a screenshot from the web right in your browser with the Awesome Screenshot Chrome extension here. Simply click the “Install” button to get started. Then watch the getting started video on their home page for more. (They also have versions for Firefox and Safari that you can download on their home page.)

For Windows – Try the Snipping Tool. You can capture, annotate, save and share. Check out the FAQ about the Snipping Tool here to see how it works.

For Mac – I take screenshots on my Mac using the very handy Skitch. Don’t want to get fancy? No worries. You can also take quick screenshots on a Mac with these simple keyboard shortcuts:

Command-Shift-3 – Hold down to take a screenshot of your whole screen. It will save as a file on your desktop.
Command-Shift-4 – Hold down. When you see the crosshairs, you can let go of the keys and click and drag your mouse to select a specific area on your screen. It will save as a file on your desktop.
Command-Control-Shift-3 does the same as #1 above, but saves to your clipboard instead of your desktop.
Command-Control-Shift-4 does the same as #2 above, but saves to your clipboard instead of your desktop.