Blogging toolbox 600

Blogging Toolbox II: Images & Design

Blogging toolbox: graphics of toolbox and wordpress logo

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.

I’ve decided that my Blogging Toolbox content will work better as a series of posts rather than a static page, and this post is part II of the shifting over process. Last week was Blogging Toolbox I: WordPress, and in the next couple of weeks, I’ll cover growth/SEO and content/writing.


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.


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:

  1. The use must be transformative, in the sense that new meaning is added, such as through critical commentary or parody
  2. The nature of the work (e.g. factual vs. creative work)
  3. The amount and substantiality of the work taken
  4. 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 images - background of pencil crayons in rainbow colours

Free Image Sources

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:


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?

The post Blogging Toolbox II: Images & Design appeared first on Mental Health @ Home.

(...more)

Originally published as Blogging Toolbox II: Images & Design at Mental Health @ Home

Disability News Wire Enters Open Beta Testing

2021-03-08

Disability News Wire has entered beta testing with an early release of its Internet wire service for the Disability Community. Our goal is to bring…

more

Keep up with news like this

If you find resources like this helpful, consider subscribing to our newsletter so you can have the latest news, analyses, podcasts, and videos mailed to you.


We'd really like to hear what you think about any of the articles we share here, our site, or anything we can do to be more useful for you. Thank you!