Tips for Using Images on Your Website

Using images on your blog or website isn’t as straightforward as it seems. You need to make sure you’re using them legally and optimizing them so they’re working for you, not against you.

Tips for using images on your blog or website.

Here are some tips to use them well.

Finding Images

Optimizing Images (for SEO & more)

Making Graphics

finding images

Use images legally

A lot of people assume that if they find an image on the internet it’s free to use. When I was new to blogging, I assumed the same. Not so….even if you give credit and link back.

Images are copyrighted so don’t use them without permission. 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

Where to find images

There are a lot of sites that have images you can use, like stock.xchngFlickr and Regardless of where you find your photos, the main thing to remember is to know and follow the terms of use!
Back to top

How to find photos on Flickr

  1. Go to the Advanced Search page.
  2. Type in your search term and make sure the Creative Commons box is checked at the bottom of the page. Additionally, I like to check both boxes underneath (commercial and adaptable) so I get more potentially usable images. Remember, you still have to check the terms of use for each image.
  3. Once you see the results, click on the image you would like to use.
  4. To view the terms and download the image in the size you’d like, click the more icon (three dots) in the bottom right corner of the photo screen. Then click View all sizes.
    download flickr image
  5. Check the license by clicking on the link provided (e.g. “Some rights reserved”). This should take you to the Creative Commons license where you can learn how the image is to be used. For example, “Some rights reserved” takes me to this Creative Commons license. Here I learn that I can share the image, adapt it (like add text) and use it commercially. However, I must provide attribution such as linking to the original image on Flickr and crediting the owner.
    flickr download image
  6. Once you are aware of the terms, choose the size you want to use on your blog. Use the smallest possible size to save on your blog’s resources and loading time. Click the download link (e.g. “Download the Large 1024 size of this photo).
  7. Upload the photo to your blog.
  8. Don’t forget to follow the CC license of the image you’re using (like crediting the author, linking to the image page on Flickr, etc.).

Back to top

How to provide proper 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:

image attribution

“Dolphin” by Sergio Tudela Romero. CC2.0

Back to top

How to find images on Photo Pin or Compfight

Photo Pin and Compfight are handy tools that allow you to search Flickr and grab the attribution in one fell swoop. They work very similarly so I will share the process for Photo Pin here:

  1. Go to Photo Pin.
  2. Type in your search term.
  3. Specify commercial or non-commercial images in left sidebar.
  4. (When the results are returned, skip the top rows which are Sponsored images.)
  5. Hover over any image to see a preview and click “get photo” when you find one you want to use.
  6. When you get the popup, I recommend doing Step 2 first which is checking the Creative Commons license. Click on the photo to go to the image page on Flickr where you can see the license details (see Step 4 in my tip above, How to find photos on Flickr). Make sure the license is one you can live with.
  7. Close out the Flickr window and go back to Photo Pin. Download the size of the image you want to use from the popup.
  8. While you’re still on Photo Pin, copy and past the attribution HTML provided in Step 3 of the popup window.
  9. Go to your blog.
  10. Upload your image as you normally would into your post.
  11. Paste the attribution HTML in your post. Make sure you are pasting this bit of HTML in the “HTML” tab or “Text” tab (not the “Visual” tab).
  12. Save!

Here is an older video from the archives, but will still provide good reference.

Can’t see the video? Watch it here.
Back to top

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 Flickr. 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.)

  1. Make a list of the main topics/categories you write about.
  2. Carve out a good chunk of time (maybe 30 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), upload them straight to your WordPress Media Library (Media –> Add New) or simply 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.

Back to top
optimizing images

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

Images are unreadable to the search engine spiders who can only read text. For that reason, make sure your images (especially at the beginning of your posts) are optimized as suggested below.
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 images by right-clicking 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. 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

Add 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

Use only the largest size you need in your post. Images from a camera have very large file sizes to optimize for printing. 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. Small images are much more streamlined and efficient. You can do this in PicMonkey which is free.

  • Determine how wide your images should be. This will depend on your design but will probably be somewhere between 300 and 800, give or take.
  • Upload your image to PicMonkey by clicking Edit a photo.
  • Click the Resize option at the bottom of the left column. Make sure Keep proportions box is checked so your image doesn’t get distorted and enter your pixel width (first box). Click Apply.
  • Click Save 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.

Back to top

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!
Back to top

how to make graphics

Why make your own graphics

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.

Canva – Canva shines in its ease of use plus nicely done templates you can use. It’s particularly handy if you want to make graphics to fit right into social media platforms.

PicMonkey – Because of it’s popularity, there have been many tutorials written for it by people with a whole lot more know-how than yours truly. Here are some of my favorite tutorials to get you started.

Gimp – This 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 should find many more.

Pixlr-O-Matic – This is a fun, vintage, Instagram-like online photo editor.

Pixlr Express & BeFunky – Both have features similar to PicMonkey.
Back to top

How to watermark a photo

Check out Beginner Beans’s watermarking tutorial.
Back to top

How to make a collage

Check out PicMonkey’s own tutorial here and their updated tutorial about editing your collage here.
Back to top

How to make a circle image

Circle images have become popular lately. Katy Clouds has a simple tutorial.
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:

  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.

Back to top

Tips for using images on your blog or website.

Share on Google+Tweet about this on TwitterPin on PinterestShare on FacebookBuffer this pageShare on LinkedIn

P.S. Got information overload?

I can help. I wade through the internet, find the best stuff and put it in a short weekly email called the Useletter®. It's free. Sign up & I'll send you a sample...