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.
Here are some tips to use them well.
- 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 your images before uploading
- Affiliate link your images
- 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
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
Back to top
How to find photos on Flickr
- Go to the Advanced Search page.
- Once you see the results, click on the image you would like to use.
- 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.
- 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.
- 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).
- 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.
For example, this photo from Flickr is properly attributed:
How to find images on Photo Pin or Compfight
- 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).
Here is an older video from the archives, but will still provide good reference.
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.)
- 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…
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.
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
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.
- 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.
How to watermark a photo
How to make a collage
How to make a circle image
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 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.