An Introduction to Using Images on Blogs

The post An Introduction to Using Images on Blogs appeared first on ProBlogger.

The following post was originally submitted by Duncan Riley from the Blog Herald, Weblog Empire and updated with current tools and tips.

I asked Duncan to explore the topic of using Images on Blogs. I think you’ll agree that his article below is a very comprehensive exploration of the topic, which I hope you will find helpful.

Any good blogger will tell you that images and imagery are vitally important in the development and rise of any good blog, but they can also be frustrating, time-consuming, and challenging to work with. Nonetheless, it’s crucial to understand how to effectively use images on your blog.

Types of Images

For ease of use, let’s categorize images on your blog into two categories: design imagery and content imagery. Design imagery includes any images you may want to use in the header, sidebar, or footer to enhance the overall visual appeal of your blog. Content imagery refers to photos and images you include within or exclusively as blog posts. While we will cover common ground in dealing with both types of images, there are some distinct considerations for each.

Toolbox

While there are various tools available, let’s focus on free resources for image editing and creation to suit different needs and budgets:

1. Canva: an excellent web-based graphic design tool that offers a user-friendly interface and a wide range of customizable templates. It provides an extensive library of free images, icons, and illustrations to enhance your blog’s visual content. It’s what we use here at ProBlogger.

2. PicMonkey: another useful tool for creating visual content for your blog with photo editing and design plus templates for logos, banners, thumbnails, and more

3. GIMP: powerful open-source image editing software available for PC, Mac, and Linux. Many users consider it as powerful as Adobe Photoshop but without the price tag. GIMP offers a comprehensive set of features for manipulating and editing images.

Posting Images to Your Blog

The method for posting images to your blog depends on the blogging platform you use. Most platforms, whether free or paid, offer image hosting as part of their services. However, it’s essential to consider the bandwidth/traffic limitations of your blogging package and how image sizes can impact your blog’s loading speed. To optimize your images, you can utilize image editing software such as GIMP or Canva, which allows you to resize and compress images.

TIP: If you’re having trouble wityh your image file size being too big, try using TinyPNG which is a free service for Smart WebP, PNG and JPEG image file compression.

Each blogging platform has its own method for uploading images. Although many platforms now have built-in features for easy image insertion, it’s beneficial to understand the underlying code even with a WYSIWYG (what you see is what you get) interface, as it gives you more flexibility in editing and positioning your images.

The HTML code for inserting an image looks like this:

html

<img src="http://www.yourdomain.com/yourblog/image.jpg">

Understanding the code gives you more flexibility in editing your images.

Here’s a breakdown of the basic image code:

<img>: This tag denotes an image.
src: It stands for “source” and represents the image URL.
"http://www.yourdomain.com/yourblog/image.jpg": This is the URL of the image you want to display.

The more advanced version of the code includes additional attributes:

html

<img src="http://www.yourblog.com/wp-content/image.jpg" width="400" height="201" alt="image" align="right">

The attributes in this code are as follows:

width="400" height="201": Specifies the dimensions of the image to be displayed.
alt="image": This attribute provides alternative text for visually impaired users.
align="right"

The align="right" attribute tells the browser where to place the image and allows text to wrap around it. If you don’t use an alt tag, the image will appear in the center of your post, and the text will flow below it. Using align="left" or align="right" is particularly useful when the image complements your post rather than being the main focus.

Copyright Issues

Copyright laws vary, but in general, using copyright-protected images as extracts or complements to your posts falls under Fair Use or Fair Dealing. However, using such images as part of your blog’s design may not be considered fair use. It’s crucial to familiarize yourself with the legal concepts of fair use and fair dealing in your jurisdiction.

When it comes to commercial sites, it’s safest to assume that the images are copyrighted unless stated otherwise. It’s advisable to avoid using such images unless you understand the legal implications.

It’s also important to follow the unwritten rule in the blogosphere of providing attribution when using images from other blogs. Include a link back to the source blog within or at the end of your post, giving credit to the original creator.

Where to Find Copyright-Free Images

To find copyright-free images, you can explore the following resources:

1. Unsplash: offers a vast collection of high-quality, copyright-free images contributed by photographers worldwide. The images are available for free and can be used for both personal and commercial purposes. We’ve previously used Unsplash a lot at ProBlogger.

2. Pixabay: provides a diverse collection of copyright-free images, illustrations, and vectors.

3. Pexels: another popular platform that offers a wide range of high-quality, free stock photos and videos. You can search for specific images or explore their curated collections.

4. Freepik: provides a vast selection of free vectors, PSD files, icons, and photos. It’s a great resource for bloggers looking for graphic elements to enhance their visual content.

5. Canva’s Free Image Library: In addition to its design tools, Canva also offers a free image library with a wide variety of high-quality photos and illustrations that you can use in your blog posts.

Remember to review the specific licensing terms and requirements for each resource to ensure proper usage and attribution.

What services are there to help bloggers with images?

There are several ways you can enhance your image experience as a blogger:

Forums: If you encounter any image-related issues, check out the user forums of your blogging platform or hosting service. These forums often contain valuable information and discussions on similar problems. You can search for solutions or even post your own questions.

Support: If you’re using a paid blogging service like TypePad, take advantage of their customer support. Reach out to their support team via email with your questions or concerns. While they may not directly assist with image-related issues, they can point you in the right direction or provide helpful resources.

Blogs and Bloggers: Many bloggers have encountered and solved image-related challenges. Utilize search engines like Google and blog directories like Technorati to find blog posts or articles discussing similar issues. You may discover valuable insights and solutions shared by experienced bloggers.

By utilizing these resources and tools, you can effectively incorporate images into your blog posts, enhance your blog’s visual appeal, and navigate any image-related challenges that may arise.

Remember to always respect copyright laws, give proper attribution when necessary, and strive to create a visually engaging and appealing blog through the thoughtful use of images.

What tips and tools do you have for using images on your blog? Drop them in a comment below.

The post An Introduction to Using Images on Blogs appeared first on ProBlogger.