Text is beautiful. It can convey things that images were never meant to. It leaves holes that envelope a reader, and ropes that bound a community. From the beginning, there was the word, and every human revolution has been inspired by the use of language. But, sometimes you need a picture.
You have just snapped a photo of your dad surfing on top of a whale, and realize you need to share this with the world. Whoa, hold on there. Actually getting it up on the blog is going to be the easy part. First we need to make sure we really want to do that. First, we need to talk about photos on the web in general, and then we need to touch very briefly on the practical issues of copyright.
GIF, JPG/JPEG, PNG, HUH?
The two most common formats for storing files are GIF and JPEG. The two of these are good for different kinds of things. Let’s start with the GIF.
GIFs are limited to 256 colors. That means they are really good for things like printed letters or designs: that is, images that are limited in their palette. So, if you design a really cool logo for your blog, it is likely that you will store it as a GIF (or as its hipper, younger brother, a PNG.) Additionally, if some part of your image is transparent, and you can see through to the background, you must store it as a GIF. For an example of this, consider the following image:
Since it is a photograph, normally we would store this as a JPG file. However, because the upper part of it is transparent, we must use a GIF or PNG.
As you might have surmised from the above, the normal format for photographs is the JPG. Chances are, if you have a digital camera, this is at least one of the formats it stores images in. JPGs are good for photos for two reasons. First, instead of just 256 colors, JPGs can contain millions of different colors. Second, JPGs are “lossy”: that is, when they are compressed for space, they are changed in ways that are (usually) imperceptible to the human eye, but slightly different than the original. As a result, JPGs can represent the very complex shapes in many photographs and still stay fairly small.
Unfortunately, if you have an image in the wrong format (say a PSP, BMP, IMG, PDF, TIFF, PIC or something else), and want to make it into a JPG or a GIF, you need to use an editing program. The industry standard program remains Adobe Photoshop, which is — even with student pricing — a very expensive program. It is available in the Labs, and that’s a great place to use it, since you can often draw on others for help with it. There is a free editing program called the Gimp that can perform many (but not all) of the same functions as Photoshop. It’s a bit more difficult to use than Photoshop is, but it is freely downloadable.
Size does matter
It’s very important to keep the total size of your webpage small, so that it can be downloaded quickly. Text is, generally speaking, pretty small. Images, on the other hand, take up a lot more space on a disk and over the internet. If you are wondering how big the main page of your blog is to download, you might try The Web Page Analyzer or one of the many similar free services out there. When I run my own blog through this, I find that it takes a total of 43 seconds to download over a 56K modem, and that there is a total of 20 “objects,” including 5 images more than 30K. In general, the smaller the image (in K) the better, and the smaller the image in dimensions, the smaller it will be in K.
Again, the best way to resize an image is probably using Adobe Photoshop. There are a number of freeprograms that can also perform this function. There’s even an online editor that can help out. I don’t vouch for any of these — I just head down to the Informatics Lab and use Photoshop.
Two Ways to Steal
The only safe image to put on your web page is one you create yourself. Any image (including one you create) is copyrighted the minute it is created, and it belongs to the author. But, to be more pragmatic, we have to assume that you might want to include other pictures. Let’s break down the kinds of uses you might encounter.
Your image. Once again, if you took the photo, or you created the graphic, it is obviously yours to use as you see fit.
An image meant for you to use. Sometimes authors will explicitly place images in the “public domain” for you to use however you like, or at least with minimal restrictions. For example, you might find free clip-art and free stock photographs you are explicitly allowed to use.
An image that the creator would likely be OK with. If I am writing about my favorite new briefcase, the company that produces that briefcase probably won’t mind if I use one of their catalog images.
A news photo or a photo shot by someone else. Generally, these are copyrighted pretty explicitly. However, if you are commenting on something you have seen elsewhere, or even somehow making fun of it, you might be able to use that work, or at least some part of it.
An image already in wide circulation. Many of you used the script from the geek test to post on your own blogs images of Drew Barrymore and Governor Schwarzenegger. I am guessing that neither of these actors or their studios sold you the rights to use these images. Strictly speaking, you may be violating their intellectual property rights by using their images. However, given the relatively generic nature of these images, you are probably safe to use them. At least until they tell you otherwise.
In all these cases, you should give proper credit and link to the source of the image.
But even if you think you aren’t stepping on toes in this way, there is another way of stealing images: “leaching.” This is a controversial topic, and sometimes gets hotly debated, but there is some consensus that when you use an image it should be hosted by you. For example, I could include an image found on Google by including the following HTML in my blog entry:
Each time someone loaded my page, it would then pull up the image from Google News and display it. As a result, traffic to my site is benefiting from Google’s bandwidth. Truth is, in Google’s case, they probably wouldn’t even notice. But if someone decided to do this with my site, I would end up paying to host an image (my image) for them. I might get a bit upset if I had to do this. Since some ISPs, especially in less developed countries, still charge directly for bandwidth, in rare cases not hosting an image yourself could actually be costing someone real money. This is a practice you should definitely avoid.
Can’t I just post it, already?
Alright. You have an image. You think you are OK to post it on your site. It’s not to big, in terms of K or dimensions. What do you do now?
Actually, this part is easy. Log on to your blog, and you will find one of the tabs at the top is marked “Upload.” Click on that tab, and then on the “Browse” button to choose a file. Choose the GIF, JPG, or PNG file you want to upload. Type a short description indicating what the photo is about. This is important for those who are visually impared and use the web or for those who surf with images turned off. Assuming you have already changed the size to be appropriate for your blog, a thumbnail is not necessary; just click “Upload File.”
The file is uploaded to a directory on your blog called “wp-content”. When it is uploaded, WordPress will provide you with the code you need to insert into your blog. Highlight this code, and press CTRL-C to copy. Now click the “Write” tab at the top toolbar, click inside of the post box, and press CTRL-V to paste the code into your message. You can now write above and/or below the image. When you publish, the image will appear on your blog.
Flowing text
Assuming you have made your images small enough, you may want to have text flow around them, as in this example. All you need to do for this to work is to include the align property in your image tag, telling the browser to put the image on the left or right side of the column. You might also want to include hspace and vspace properties to tell the browser how much space to leave between the image and the text. It might look something like this:
Just drop this at the beginning of a paragraph, and you will see the words flow around the image.
In conclusion, post an image:
1. When it’s necessary or helps present your story.
2. When the image is as small as possible, while still being intelligible.
3. When you won’t upset the owner of the image.
Uploading images
Text is beautiful. It can convey things that images were never meant to. It leaves holes that envelope a reader, and ropes that bound a community. From the beginning, there was the word, and every human revolution has been inspired by the use of language. But, sometimes you need a picture.
You have just snapped a photo of your dad surfing on top of a whale, and realize you need to share this with the world. Whoa, hold on there. Actually getting it up on the blog is going to be the easy part. First we need to make sure we really want to do that. First, we need to talk about photos on the web in general, and then we need to touch very briefly on the practical issues of copyright.
GIF, JPG/JPEG, PNG, HUH?
The two most common formats for storing files are GIF and JPEG. The two of these are good for different kinds of things. Let’s start with the GIF.
GIFs are limited to 256 colors. That means they are really good for things like printed letters or designs: that is, images that are limited in their palette. So, if you design a really cool logo for your blog, it is likely that you will store it as a GIF (or as its hipper, younger brother, a PNG.) Additionally, if some part of your image is transparent, and you can see through to the background, you must store it as a GIF. For an example of this, consider the following image:
Since it is a photograph, normally we would store this as a JPG file. However, because the upper part of it is transparent, we must use a GIF or PNG.
As you might have surmised from the above, the normal format for photographs is the JPG. Chances are, if you have a digital camera, this is at least one of the formats it stores images in. JPGs are good for photos for two reasons. First, instead of just 256 colors, JPGs can contain millions of different colors. Second, JPGs are “lossy”: that is, when they are compressed for space, they are changed in ways that are (usually) imperceptible to the human eye, but slightly different than the original. As a result, JPGs can represent the very complex shapes in many photographs and still stay fairly small.
Unfortunately, if you have an image in the wrong format (say a PSP, BMP, IMG, PDF, TIFF, PIC or something else), and want to make it into a JPG or a GIF, you need to use an editing program. The industry standard program remains Adobe Photoshop, which is — even with student pricing — a very expensive program. It is available in the Labs, and that’s a great place to use it, since you can often draw on others for help with it. There is a free editing program called the Gimp that can perform many (but not all) of the same functions as Photoshop. It’s a bit more difficult to use than Photoshop is, but it is freely downloadable.
Size does matter
It’s very important to keep the total size of your webpage small, so that it can be downloaded quickly. Text is, generally speaking, pretty small. Images, on the other hand, take up a lot more space on a disk and over the internet. If you are wondering how big the main page of your blog is to download, you might try The Web Page Analyzer or one of the many similar free services out there. When I run my own blog through this, I find that it takes a total of 43 seconds to download over a 56K modem, and that there is a total of 20 “objects,” including 5 images more than 30K. In general, the smaller the image (in K) the better, and the smaller the image in dimensions, the smaller it will be in K.
Again, the best way to resize an image is probably using Adobe Photoshop. There are a number of free programs that can also perform this function. There’s even an online editor that can help out. I don’t vouch for any of these — I just head down to the Informatics Lab and use Photoshop.
Two Ways to Steal
The only safe image to put on your web page is one you create yourself. Any image (including one you create) is copyrighted the minute it is created, and it belongs to the author. But, to be more pragmatic, we have to assume that you might want to include other pictures. Let’s break down the kinds of uses you might encounter.
Your image. Once again, if you took the photo, or you created the graphic, it is obviously yours to use as you see fit.
An image meant for you to use. Sometimes authors will explicitly place images in the “public domain” for you to use however you like, or at least with minimal restrictions. For example, you might find free clip-art and free stock photographs you are explicitly allowed to use.
An image that the creator would likely be OK with. If I am writing about my favorite new briefcase, the company that produces that briefcase probably won’t mind if I use one of their catalog images.
A news photo or a photo shot by someone else. Generally, these are copyrighted pretty explicitly. However, if you are commenting on something you have seen elsewhere, or even somehow making fun of it, you might be able to use that work, or at least some part of it.
An image already in wide circulation. Many of you used the script from the geek test to post on your own blogs images of Drew Barrymore and Governor Schwarzenegger. I am guessing that neither of these actors or their studios sold you the rights to use these images. Strictly speaking, you may be violating their intellectual property rights by using their images. However, given the relatively generic nature of these images, you are probably safe to use them. At least until they tell you otherwise.
In all these cases, you should give proper credit and link to the source of the image.
But even if you think you aren’t stepping on toes in this way, there is another way of stealing images: “leaching.” This is a controversial topic, and sometimes gets hotly debated, but there is some consensus that when you use an image it should be hosted by you. For example, I could include an image found on Google by including the following HTML in my blog entry:
Each time someone loaded my page, it would then pull up the image from Google News and display it. As a result, traffic to my site is benefiting from Google’s bandwidth. Truth is, in Google’s case, they probably wouldn’t even notice. But if someone decided to do this with my site, I would end up paying to host an image (my image) for them. I might get a bit upset if I had to do this. Since some ISPs, especially in less developed countries, still charge directly for bandwidth, in rare cases not hosting an image yourself could actually be costing someone real money. This is a practice you should definitely avoid.
Can’t I just post it, already?
Alright. You have an image. You think you are OK to post it on your site. It’s not to big, in terms of K or dimensions. What do you do now?
Actually, this part is easy. Log on to your blog, and you will find one of the tabs at the top is marked “Upload.” Click on that tab, and then on the “Browse” button to choose a file. Choose the GIF, JPG, or PNG file you want to upload. Type a short description indicating what the photo is about. This is important for those who are visually impared and use the web or for those who surf with images turned off. Assuming you have already changed the size to be appropriate for your blog, a thumbnail is not necessary; just click “Upload File.”
The file is uploaded to a directory on your blog called “wp-content”. When it is uploaded, WordPress will provide you with the code you need to insert into your blog. Highlight this code, and press CTRL-C to copy. Now click the “Write” tab at the top toolbar, click inside of the post box, and press CTRL-V to paste the code into your message. You can now write above and/or below the image. When you publish, the image will appear on your blog.
Flowing text
Assuming you have made your images small enough, you may want to have text flow around them, as in this example. All you need to do for this to work is to include the
alignproperty in your image tag, telling the browser to put the image on the left or right side of the column. You might also want to includehspaceandvspaceproperties to tell the browser how much space to leave between the image and the text. It might look something like this:Just drop this at the beginning of a paragraph, and you will see the words flow around the image.
In conclusion, post an image:
1. When it’s necessary or helps present your story.
2. When the image is as small as possible, while still being intelligible.
3. When you won’t upset the owner of the image.
Share this: