This is the second post for the Tips for bloggers, writers and online users, you can find the first post, about links here. This post will talk about images, how to get them and how to share them. When I look around I see that a lot of people seem to have trouble with getting images to display the way they want to. Hopefully you will understand how to get images to do what you want a bit better at the end of this post, and those who already know how to work with images might even learn something new.
There is one thing I need to mention first about images and that is copyright and plagiarism. You can’t just use any image from the internet, you need to make sure you have the right to do so. Read this post Copyright Law for Blog (And Facebook) Images, and click through some of the links (especially the one on fair use and how to get images that are legal to use).
Before I go into detail about showing, resizing and linking images I want to give some tips about getting images to show up well on your website in the first place. These are handy to know and use because it looks silly when you seem to have an image on your website but nothing shows.
– You can’t link to an image that is send to you in an email. You need to download it and upload it yourself to make sure it shows. (Upload places are shown below)
– Don’t link to an image on Dropbox or other file upload places, only link to places where you can upload images as they are meant for this. When you are linked an image, like above, download it and upload it yourself.
– Resize your images when they’re too large, this isn’t as hard as it sounds and makes your site look a lot more professional.
Some of the best places (and easiest) I’ve used for my images are Picasa and Photobucket. I personally prefer uploading the images to these websites instead of on my own blog because I have better control over them and they don’t take up blog space that I’d rather use for other stuff.
I personally mostly use Picasa since it integrates with Blogspot well (I run some blogs there) and I can upload the pictures while I write the blog posts and then go through the Picasa menu to the blog album (since they are both owned by Google they are connected) and quickly put the image in the post. This saves me a lot of time copying URLs from one place to the next.
This might not be as easy for WordPress, but I like to have my images in one place, so I stick with Picasa for all my image uploads.
Uploading the image yourself means that you have control over what happens to the image and it will stay visible on your page as long as you don’t delete it yourself (or you get in trouble, but that is mostly in your own hands too). There are more websites who offer image hosting, but I’ve got most experience with these two.
Getting the URL of images
Sometimes this is easy and you’ll be able to use the URL at the top bar or it will be provided for you somewhere else, as long as you make sure that it ends in .jpg, .gif or .png you should be fine.
This doesn’t always go though and I’ll give you a few tips on finding the image URL on different browsers. Again, there are multiple things you can do with images from your right-click menu, just like we talked about in the links page.
The first is to open the image so you can see the full size of it and what it does or doesn’t include. This is handy to check that it is exactly what you want and it also shows the URL in the top bar. This is a roundabout way, but one way to get to the URL of your image. FireFox = View Image. Chrome = Open image in new tab. This option doesn’t exist in Internet Explorer.
The second is to save the image, this is useful for the images in emails but also some online places, like when you need an image of a cover of a book or game something like that for an article. You download the image and then upload them yourself. FireFox = Save Image As… Chrome = Save image as… Internet Explorer = Save picture as…
This last version is handy when you already have your image uploaded somewhere (like your own website or anything) and you don’t want to hunt down the location again so that you can get the URL again. This will give you the URL of the image and copy it to your clipboard so you can immediately use it again. FireFox = Copy Image Location. Chrome = Copy image URL. Internet Explorer = Copy
So, yeah, the second one isn’t really a way to get the URL, but more to get the image itself, but I do include in here because it all goes through the same menu.
So, now we’ve gone through a few ways to get to the URL of images, the next thing is how to post these images. I’ll include a few things that you can also do with them to get them to act the way you want.
Post the image
This part most people usually know how to do. In WordPress you click on the “Add Media” button at the top of your screen, in Blogspot you click on the picture frame next to “Link”. You can then choose to upload an image or give an URL to it so it loads from there.
There are also ways to do this in coding, just like we could with links.
For fora and things like that you can use:
[img] your URL goes here[/img]
For websites and other places that use HTML you use:
<img src="URL goes here" />
<img src="https://lh5.googleusercontent.com/-auNXc6fuByc/UKvQPfxIIzI/AAAAAA AABME/4DFQnmNKRCE/s800/FCB1%2520400px.jpg" />
These aren’t too hard, from here we can do more with the images. This is the basis of putting images on your website.
Resize the image
Some people find this scary or difficult, but as long as you remember not to distort the image (by making the ratio of the image differently) you can do a lot of rescaling. One thing to remember is that you can make an image smaller, but don’t try to make it bigger, that will make it blurry. If you want a bigger image, try to find a bigger resolution of it.
In both Blogspot and WordPress you can click on the image and get to options from there. That doesn’t mean you can’t get into the code (Text in the right hand corner in WordPress and HTML in the left hand corner in Blogspot) and resize the images yourself. And after reading this short example it shouldn’t look as daunting to do.
So, here are the modified codes so you can resize an image.
[img height=in px width=in px]image URL here[/img]
<img height="in px" src="image URL here" width="in px" />
With an example image in it they look like this:
[img height=150 width=100]https://lh5.googleusercontent.com/-auNXc6fuByc/UKv QPfxIIzI/AAAAAAAABME/4DFQnmNKRCE/s800/FCB1%2520400px.jpg[/img]
<img height="150" src="https://lh5.googleusercontent.com/-auNXc6fuByc/UKvQPf xIIzI/AAAAAAAABME/4DFQnmNKRCE/s800/FCB1%2520400px.jpg" width="100" />
I’ll give some examples of resized images so you can see what each size looks like. Also, remember to keep the right ratio of the images so that you don’t distort it.
height 150 – width 100
height 150 – width 150 As you can see, this image is distorted.
height 400 – width 266
height 200 – width 300
It is as simple as keeping the ratio of the images to be able to successfully resize an image. To find the ratio of an image you go through the right-click menu again, you’ll be looking for the numbers after dimensions. In FireFox go go through View Image Info, I can’t seem to find the same options in Chrome or Internet Explorer. If you have the image on your computer you can click on that and find the dimensions through there.
Make a link from the image
I love this option the most. Nothing is as fun as a click through image. And it isn’t even that hard to make if you know how to make a link and how to post an image. Which by now you do.
If you use WordPress or Blogspot you first post the image, click on it (select it) and then click on the create link button, as if you were creating a link from a word. Just that the “word” you selected is now an image. Easy.
In code this is not harder than that either. Instead of giving the link a name you put the image code in between the link tags. Like this:
[url=http://www.5timeschaos.com/blacksheeptrilogy][img height=300 width=200]h ttps://lh6.googleusercontent.com/-Lz837o7QMN0/Uji-IACxnZI/AAAAAAAACMY/HZZ7rCU wDjI/s800/Cover2%2520bundle%2520800px.jpg[/img][/url]
<a href="http://www.5timeschaos.com/blacksheeptrilogy"><img height="300" src ="https://lh6.googleusercontent.com/-Lz837o7QMN0/Uji-IACxnZI/AAAAAAAACMY/HZZ 7rCUwDjI/s800/Cover2%2520bundle%2520800px.jpg" width="200" /></a>
Both those codes will give you this result (depending on where you place them):
The format is quite simple:
Open link half – use image code instead of a name for the link – close the link.
Coding works by embracing code, which means that you need to put something that is supposed to be the base at the start and code all the other things around it. The code for the link goes around the code for the image, it embraces the image.
And that is it. Now you know how to (legally) get images for your blogs, how you can best post them where you want them and how to get them to act the way you want to.
If you have any questions or comments, post them below.