There’s no rule that you have to use images with your blog, but they can certainly help to make it visually appealing for readers. This post covers some useful things to know when using images, as well as links to some useful tools. The other posts in this series on blogging are:
- Blogging Toolbox I: WordPress
- Blogging Toolbox III: Content & Writing
- Blogging Toolbox IV: Growth & Search Engine Optimization (SEO)
Want to learn about graphic design? You’ll find links to free courses in the post Learn to Do More Online: Marketing, Design, WordPress & More.
Table of Contents
Image Parameters
Alt text
Alt text is used to describe what your image looks like. This allows visually impaired readers to know what your image is, but it also helps search engines to know what the image is about.
Title
When you upload an image in WordPress, it will automatically assign a title for an image based on the name of the file you’ve uploaded. Having a descriptive title rather than IMG1234, it’s more search engine friendly, plus it will make your life a lot easier if you’re trying to search through your media gallery. Searching for images checks the file name and image title, so if the image with title IMG1234 and file name IMG1234.jpg, has alt text that says guinea pig, that image isn’t going to show up in your search results for the search query “guinea pig”.
Size
A given image has two different sizes: the dimensions (e.g. your phone might take 4032 pixel x 3024 pixel photos) and file size (in kB or MB).
A large image file will slow down your page loading, which isn’t good for users or for search engines. If you’re on a WordPress plan with limited storage space, larger than necessary images can also eat up a lot of your storage space. Find out how to deal with this through image resizing and compression in the post Making the Most of Your WordPress Media Storage Space.
Note that any media you upload to your site (images, videos, pdfs, etc.) will be findable by search engines (unless you’ve made your blog unsearchable). Even if you don’t use the file in a post, it will still have its own URL and be in your sitemap for search engines to find.
Copyright
Sometimes bloggers will accidentally violate someone else’s copyright. A common copyright mistake comes from using images that are found on Google Images. Google Images is a search engine, not a source of images, so they’re not automatically free for the taking. You need to go to the site where the image came from and see if they’re giving permission for others to use the image. Think of it this way—if you upload one of your photos to your blog, Google Images can find that image and display it in search results, but that doesn’t mean you’ve given anyone permission to use it.
If you come across a watermarked image, chances are that using that image will violate someone’s copyright, and the watermark is there to let you know you’re not supposed to be using it.
Creative Commons Licenses allow others to use a creator’s work in a certain way based on the type of license. For example, some may require attribution or non-commercial use.
Free image sites like Pixabay and Unsplash have licenses that allow you to use their work without attribution, although crediting the image creator is the courteous thing to do.
Fair Use
In the U.S., the fair use doctrine allows certain copyright-protected material to be used in certain circumstances without it being considered a copyright violation. This is based on four factors:
- The use must be transformative, in the sense that new meaning is added, such as through critical commentary or parody
- The nature of the work (e.g. factual vs. creative work)
- The amount and substantiality of the work taken
- The effect of the use upon the potential market (are you depriving the copyright-owner of income?)
For example, using an image of the cover of a book you’re reviewing, or using brief quotes from the book in your review, would fall under fair use.
Free Image Sources
- CleanPNG: graphics with clear background
- Clipart Library
- DeviantArt: creative artwork, some under a Creative Commons license
- Dreamstime: mix of free & premium photos
- Freepik: must attribute all free images
- Gratisography: unique, quirky photos
- Pexels: photos
- Pixabay: photos and other graphics
- Unsplash: photos
- Wikimedia Commons: has all the images used on Wikipedia, which either have a Creative Commons license or are in the public domain
Some other useful image tools:
- Canva: create your own graphics by combining words, text, and other elements
- Piktochart: graphic design platform along the same lines as Canva
- Remove.bg: remove the background portion of an image
- Venngage: create infographics
- WordArt: create word clouds
Design Customization
Self-hosted blogs allow a lot more flexibility when it comes to customizing your site’s design, although a certain amount of knowledge is required to actually take advantage of that. For WordPress.com blogs, your flexibility is constrained by both your theme and the plan you have.
CSS
For bloggers who are self-hosted or have the WP.com Premium, Pro, or Business plan, CSS (Cascading Style Sheets) is a great way to customize the appearance of your blog. It’s a language that changes the look of how your content is displayed in a browser. For example, I could make all of my site’s H2 headers display in red italics by adding this style rule: h2 {font-style: italic; color: red;}
It can be daunting at first, but it’s actually easier than it looks once you get used to it, and it’s really useful in making your blog look the way you want it to. W3Schools is a really good reference for CSS syntax, and Codecademy has courses that can help you get started.
Once you start playing around with CSS in a WordPress.com blog, these tips might save you some headaches:
- Your custom CSS is entered in your site’s Customizer.
- If you want to create custom CSS classes, you need to add the custom class name to individual blocks you want to apply it to. To do this, go to the block settings and scroll down to the Advanced section, then enter the class name (e.g. “fancy-text”) without a period in front of it in the Additional CSS Class(es) field. Then you go to the Customizer to style elements belonging to that class. Here, you will need to put a period in front of the class name, e.g.: .fancy-text {font-weight: 700; color: purple}
- The Inspect Elements tool in Google Chrome’s Developer Tools can come in handy if you’re trying to figure out what your theme is calling an element so that you can style it.
- If you’ve created a style rule and you’re confident the syntax is correct, but you’re not seeing the expected result, your theme’s CSS may be overriding your custom CSS. Try adding !important, as in: h2 {font-style: italic !important; color: red !important;}
Colours
If your theme/plan allows you to change colours for fonts or other elements of your blog, it’s useful to know about hex codes for colours, which consist of a hash sign followed by 6 hexadecimal characters. You can enter hex codes in the WP editor to modify the colour of elements like text, backgrounds, etc.
These are some handy colour tools:
- Canva Color Wheel: helps you pick complementary colours
- Colour palettes with hex codes: Canva | Wondernote
- Image Color Picker: lets you grab the hex code for the colour in a particular area of an image
- W3Schools Colors Tutorial
That’s it for this episode of the blogging toolbox series. Do you have any questions, tips, or favourite image tools you’d like to share?
You’ve provided so much useful info over the years! I have been including the alt text since you mentioned it some time ago and I hope it helps the vision impaired peeps. I also put an excerpt on every post, which is basically the title again, so that (hopefully) my posts will be inconvenient to reblog by stealers. (That’s another reason to keep track of followers and delete sketchy ones.) I also like doing the excerpt because in the app reader my posts look nice & neat with just the excerpt showing instead of a blob of text. I have renamed all my pics with words I would search for, so I no longer go nuts trying to find old ones.
I don’t really have tips except that some peeps don’t realize that they are writing in the caption area of an image for their post. I’ve done this, to my horror, and fixed them all. Also, some peeps are posting (what looks like) a cut & paste of a word document, so you can’t read it properly unless you visit the blog. I don’t know if this is deliberate or what, but it’s annoying when I want to cruise through posts in the reader and get through a lot at once. I really DO want to read the people I follow, so I don’t appreciate them making it difficult!
The writing as caption thing is so easy to do by mistake.
I think the weird display thing happens with certain blocks that don’t play nice with the Reader, like the verse block.
I didn’t even KNOW there was a verse block! Good thing, then, or I would have been posting my poems in it 🙂
The verse block puts multiple lines of text all in the same block rather than using multiple paragraph blocks, but the way you do your poetry works way better.
Thanks! I have learned how to go into the code editor and change P to BR 🙂
I love me some Canva! I used to use pic monkey also.
I’ve never tried Pic Monkey.
I like Canva for editing images and the collage feature where I can combine photos.
A great idea to use alt text in images. I had not thought of that…thank you!
A great llist of free photos. I had not heard of gratisography.
To reduce my image sizes I use a free online tool “compressjpeg” works great.
I hadn’t heard of compressjpeg. Good to know!
My pleasure.
Thank you for the excellent info, Ashley Leia.
😊
Some nice links here – Thanks, I bookmarked 2. I use Canva to make my IG posts – easy-peasy and it’s always the right size.
Canva is great.
All things I wish I knew when I started blogging, especially things like alt descriptions as it’s a bugger trying to go back through old posts to change it all. You’ve included a few sites here for images and such that I’ve not come across before so I’ve bookmarked this to take a look through them, like Gratisography. Thanks, Ashley! x
I’m glad I learned about the alt text thing early on, but sometimes WP mysteriously eats the alt text I enter…
Very useful information. Thank you!
😊
Thank you – I’m saving this for future reference. Thanks for putting in the time to figure all this out and share!
😊
Thank you for sharing. This is very useful information.
Thanks!
Thank you so much for this blog information. I kept a word document on my computer of the list of free Image sources. I hope that is okay if not I can delete it. Just let me know.
That’s totally fine!
I learned a lot here. I will definitely try resizing my images from now on!
It can save a lot of storage space to do that.
Speaking of copyright, I tried the marketing ninjas and it didn’t load but I tried something called website dead link checker and it worked for broken links. I’m trying to remember the site I used a long time ago to detect plagiarism. I’ll comment it when I find it.
Good to know – I hadn’t come across Website Dead Link Checker before.
It’s called plagiarism checker free. But you can only copy paste a limited amount of text. I’m searching for something I can just enter website url
I just learned about the codes for colors today. I’m creating a fall collection for my redbubble shop and I looked up trending color palettes for fall and chose one and I’m creating designs on canvas to later add to my shop.
Cool!
I didn’t know about the canvas color wheel!
I just discovered it recently.