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’s what we’ll cover in this post:



Finding Images
Use images legally
Where to find images
How to find photos on Flickr
How to provide proper attribution
How to find images on Photo Pin or Compfight
How to choose high quality images
Find images in bulk to save time
Optimizing Images (for SEO & more)
If you use an image at the top of your posts…
Rename your images before you upload them
Use the ALT tag
Add captions to your photos
Resize & compress your images before uploading
Affiliate link your images
Making Graphics
Why make your own graphics
Free tools to make images & graphics
How to watermark a photo
How to make a collage
How to make a circle image
How to take a screenshot
finding images

Use images legally
A lot of people assume 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 to the owner and link to them.

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 many sites with images you can use. 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 as sites that search those sites and pull in all the free-to-use photos in one place. Examples are: Pexels, StockUp, The Stocks, 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!

IMPORTANT: Regardless of where you find your photos, the main thing to remember is to know and follow the terms of use! Not all sites have only images in the public domain or with the CC0 license. 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 find photos on Flickr
Many years ago, Flickr was the place to go for images online. This is not so much the case today as sites like the ones mentioned above have popped up everywhere.

Go to the Advanced Search page.
Type in your search term. In the top right of the screen is a dropdown menu entitled “Any license.” Click the arrow and choose the option you’d like to search for. For example, maybe you are happy to pay someone attribution as long as you know it can be used for commercial projects. Or, maybe you want to search U.S. Government works.
Once you see the results, click on the image you would like to use.
Check the license by scrolling down and clicking on the link under the date (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.
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 (indicated by the down arrow in the bottom right of the black screen).
Compress & upload the photo to your blog.
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.).

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:

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:

image attribution
“Dolphin” by Sergio Tudela Romero. CC2.0

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:

Go to Photo Pin.
Type in your search term.
Specify commercial or non-commercial images in left sidebar.
(When the results are returned, skip the top rows which are Sponsored images.)
Hover over any image to see a preview and click “get photo” when you find one you want to use.
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.
Close out the Flickr window and go back to Photo Pin. Download the size of the image you want to use from the popup.
While you’re still on Photo Pin, copy and past the attribution HTML provided in Step 3 of the popup window.
Go to your blog.
Upload your image as you normally would into your post.
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).
Save!

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.

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.

optimizing images
If you use an image at the top of your posts…
Search engine spiders can only read text, therefore, images are unreadable to them. For that reason, make sure your images (especially at the beginning of your posts) 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.

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.

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
Use only the largest size you need in your post. Images from a camera, for example, 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 various way. A popular option is 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. 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.
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.
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). For this, simply go to the website, drag & drop or upload your image to the box at the top of the screen, give it a minute and 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.
JPEGmini Lite is a tool I use on my Mac. The free version allows you to compress a certain number of images a day (I think 15?). I believe you can also use the tool online as well. Once you’ve opened JPEGmini, drag & drop or upload your image to the box. It will compress. On my Mac, it automatically replaces the original image on my computer with the compressed version. You may be able to change that setting if you want. Upload to your site.

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!
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.




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.

Beginner Beans has a 3-part series about the basics of working with PicMonkey and a basic tutorial about photo editing.
Schmutzie has a tutorial about editing and adding text to an image.
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.