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:
<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:
<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.
Great information! About 6 months ago I started adding a picture to every post I publish. I believe it has added to the reader experience and enhanced my site.
I use Gimp and istockphoto.com.
A downside to using photos is time. It sometimes takes as long to find a photo to accompany a post as it took to write the post itself :-)
Image manipulation software…might want to check out either iPhoto (Mac) or Picassa (Windows) as they are free. Not nearly as full-featured as the ones mentioned but might just meet your needs.
Darren,
I have always been a fan of Photoshop for editing purposes, but as a beginning user I was never able to take full advantage of it’s powerful features. I can see how this would cause problems for novice bloggers.
A very powerful tool that I have recently discovered is Macromedia Fireworks, part of Studio 8. It is somewhat similar to Photoshop but not as powerful and intimidating. It seems to do very well with both layout graphics and general image editing. I would recommend it to any bloggers who are looking for more than Picassa or iPhoto can offer, but not looking to make the jump yet to Photoshop.
Also, if you are familiar with Dreamweaver, Fireworks integrates perfectly allowing you to move images back and forth seemlessly… I liked that feature a lot, especially as I am now learning how to edit and create CSS …
I hope this helps some of the readers out there…
Cheers,
Neil M.
Editor
FilmSchoolRejects.com
Adding height and width attributes helps the browser to layout the page properly before the images are loaded. Otherwise the browser doesn’t know how much space the images will take and you’ll see the page layout change a few times while the images are loaded.
Oh, and the align attribute is deprecated. CSS styles should be used instead. I normally add an inline style attribute to my images to float them to the right ot left:
src means source, not screen
Yeah, I use
style=”float: left; padding: 5px;” for my images to align then and add a little whitespace around them.
I’m not sure if the Gimp is really the right tool for someone new to blogging and just starting out with html and image posting. Maybe paintshop pro or Ifranview?
Rob – Gimp is free and that might have been the reason for the suggestion.
What about images from services like AP? What is the proper etiquettefor handling them?
A couple of comments:
The Gimp was used because it is free.
Ianiv, I’m surprised about the CSS/ align stuff because align works a treat for me, and honestly for a new blogger starting out, the last thing they should be worrying about is CSS code in a post.
Niel
haven’t used Fireworks for probably 2-3 years. I find Photoshop better at image editing but having said this I haven’t tried later versions of Fireworks. Fireworks is good for one thing though that Photoshop isn’t, and that’s animated gifs.
Jim
you couldn’t be more right :-)
A good free image hosting is Imageshack.us.
I use them a lot, and they even genrate the code for you to copy and paste into your web page.
I used imageshack. Fortunately Blogger hosts images now.
Blog tools like ecto need to be the places that deal with this. ecto has reasonable capabilities in uploading and letting you resize the images, but it’d be cool to go a little further with it.
The question of Fair Use and copyright protection is fairly complicated, but it boils down to this: If you’re using a small portion of the source material (like an image), you’re not taking any business away from the source, or you’re using it for the purposes of satire or study, you’re probably okay. A good layman’s review of the laws can be found at Stanford University Libraries. Images may seem more complicated than text, but they fall under the same laws.
It is embarassing for an artist to admit but when I began working with digital images Photoshop imaging software was either just not intuitive enough a match for me or way too complex for a painter/designer’s brain – or at least this one.
On the other hand, my 20 & 30 year old daughters, neither of whom draw or paint work with Photoshop without any problem, and both say they actually find it very intuitive.
I on the other hand am working with Paintshop Pro and it is capable of doing everything I need it to do as far as providing small art for my blogs or larger images of my paintings and other design work.
So if readers do find Photoshop or another utility boggling, I encourage them not to feel frustrated. You’ve just got a bad match. Luckily you can find many free downloads and I’d advise trying other tools until one is found that matches the way their brain functions.
I’m a Mac user so these apps will only be useful to a few, however I’m sure there are similiar small apps out there for Windows users. They do a small number of jobs easily and well. Most bloggers just want the basic manipulation tools and they want to be able to use them quickly and without a big learning curve. I use PhotoEdit, PicturePlay, EasyCrop, EasyFrame, ComicLife and other stand-alone apps. But I’ve recently found a web-based Web 2.0 site which is absolutely brilliant and allows anyone to manipulate images without needing any software. It will do 95% of what most neebies will want and nothing to learn! Try it at pxn8
Great post. I particularly appreciated the discussion of copyright. That was exactly the information I was looking for. Thanks a bunch!
[…] An Introduction to Using Images on Blogs […]
Wonderful post. Keep them coming.
my buddy’s site has been shut down by the web host for using an image of a cop that murdered an innocent man in New York City recently [Sean Bell] they agreed to take the image off after the guy wrote demanding money and complaining but the host still has the site offline…are they threading too far here?
beyond wanting his image removed the photographer wrote to say he also disagrees with the sites political message…what do you guys think?
check it out here http://propagandapress.wordpress.com/
[…] An Introduction to Using Images on Blogs The following post was submitted by Duncan Riley from the Blog Herald, Weblog Empire and b5media. I asked Duncan to … https://problogger.com/an-introduction-to-using-images-on-blogs/ […]
It looks like other readers beat me to my comments. Yes, src refers to the source (filename) of the image, and width and height attributes help the browser lay out the page.
Back in the mid 90s, if you had an image and didn’t specify the width and height, no text below the image could be displayed until the image had been completely loaded, which could take a while. By specifying the dimensions, the browser could set aside space for the image so it could display all the text right away and then load the image. Even though the total time required to load the whole page was the same, it gave the appearance of loading faster because at least all the text was displayed quickly.
It’s not so critical to use width and height today, but it’s still a good practice. You can also specify a width and height different from the actual width and height as a shortcut for resizing the image. However, increasing the size in this manner may degrade the quality, and decreasing the size would result in a bigger file size than necessary.
Hello,
And what about using products photos on website where you have Adsense ads, is it illegal ?
For example on luxurylaunches, luxist, or bornrich ?!
I guess they don’t have any right on these photos ?! Why doesn’t Google Adsense complain ?
Thanks.
I never knew that posting images as part of your post is considered “fair game”. I will definitely start doing this on my office trends type blog.
The part I disagree with for gaining legal information is Wikipedia. Anyone can write anything on this site and can alter it as they wish. One site that I use on a regular basis is http://www.allexperts.com.
This site has quite a bit of volunteers that truly and sincerely (hopefully most of the time) provide real answers to your questions. The best part of it is that it’s all free.
Thanks,
Richard Rinyai
http://www.theprofessionalassistant.net
Here’s an AWESOME alternative for any blogger running Mac;
Photoshop, Gimp etc are all quite “heavy” and annoying to use for a small image-related task. The little program ImageWell will be sufficient most of the time;
http://www.tuaw.com/2007/07/09/imagewell-receives-big-update/
get it.