Tips for Using Images on Your Website

Updated May 5, 2020

Using images on your blog or website isn’t as straightforward as some think. Use them legally. Optimize them so they’re working for you, not against you.

Disclosure: This post contains affiliate links. If you click through and make a purchase, I’ll earn a commission, at no additional cost to you. Read my full disclosure here.

Finding Images

Optimizing Images (for SEO & more)

Making Graphics

Disclaimer: This is not legal advice, only my personal opinion.

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.

Legal uses of images:

If you want to understand the legal details, 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.

Are Pinterest or Google images free?

No. Again, the images you find on Pinterest are most likely copyrighted.

Where to find images

Use your own

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

Buy images

If you don’t use your own images, buying them is probably the next best option.

I buy photos from Depositphotos. They have a great selection and their photos can be purchased for a dollar each. NOTE: A couple times a year, a fantastic deal comes around that makes them at least half off. That’s what I wait for. Sign up for my Flash Deals notification list if you want me to notify you as soon as I see it.

Free options

Proceed with caution when using free options, particularly if your goal is to make money on your site.

Sites like Pixabay, Unsplash, Pexels, StockSnap.io and StockUp claim their images are “free to use” because they are released without copyright under the Creative Commons CC0 license.

The draw of images under the Creative Commons license CC0 is they can be used for personal or commercial use, no attribution required.

However, there have been instances, like this one, of people facing legal action because what they thought was free to use actually wasn’t.

There is a thing called copyright trolling, in which people try to “catch” others in copyright infringement in order to get money. Here’s one perspective.

Another disadvantage of using free images you see on sites like the ones listed above is overuse. A lot of people use them which doesn’t help you to stand out.

If your budget is tight and using free images is your only option, read How To Avoid A Lawsuit When Using Free Stock Photos for some helpful tips.

Whether you use free or premium 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.

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:

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

For example, this photo from Flickr is properly attributed:

How to choose high quality images

If you’re not photography savvy, find the images that have the most positive comments or have been favorited or starred. Ratings like this weed out the lower quality images for you.

Find images in bulk to save time

  1. Make a list of the main topics/categories you write about.
  2. Carve out a good chunk of time (30-60 minutes) to focus on image gathering.
  3. 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) or bookmark the image links for quick access later.
  4. 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 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, although as search engines have improved, the advantage of doing so is no longer clear.

Rename your images before you upload them

Whatever you do, don’t upload and image to your blog or website named IMG_0042 or the like. Use keywords in your image names.

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. But again, do this before uploading to your blog or website.

Use the alt tag (maybe)

The alt attribute is a text description of your image. The main benefit is for accessibility, helping those unable to see the image.

In a roundabout way, your SEO might be slightly improved as well. Search engine bots can’t read an image, so one of the ways they figure out what an image is about is by reading the alt text.

Should you always use alt text? No. For example, don’t use it when your image is simply decorative. This decision tree will help you decide when to use alt text and when not to.

When you upload an image in WordPress, you’ll see a field called “Alternate Text.” This is where you can write a description of your image.

In the past, Pinterest used alt text from images to pre-populate the description field for pins. This led to a lot of us saying, “Use your post’s keywords in alt text!” Simply put, this was bad advice. Don’t put keywords in alt text unless it really describes the image. (To optimize your image for Pinterest, use the Tasty Pins plugin instead.)

Watch this video if you want to know more about alt text.

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.

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. I use Skitch on my Mac. Paint is a free for Windows. PicResize is an online tool.

  • 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 the tool of your choice and follow the instructions to resize.
  • Make sure to keep the same aspect ratio so the image doesn’t get distorted.
  • Download, export or save to your 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.

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.

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.

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.

Canva – I use and recommend Canva. It just works. There’s a web version and a mobile version.

Gimp – Gimp is a downloadable program similar to Photoshop, but without the hefty price tag. These are the tutorials I used to get started, but just search YouTube for “gimp tutorials” and you will find many more.

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:

  1. Command-Shift-3 – Hold down to take a screenshot of your whole screen. It will save as a file on your desktop.
  2. 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.
  3. Command-Control-Shift-3 does the same as #1 above, but saves to your clipboard instead of your desktop.
  4. Command-Control-Shift-4 does the same as #2 above, but saves to your clipboard instead of your desktop.