Posting pictures on Family Woodworking

Or any forum based on vBulletin software

or even in your email messages

Intro

There are three distinct parts to posting pictures...

  1. Reducing the pictures to a reasonable size for display on a computer screen (as opposed to the very high resolution from your camera, required for publishing or printing large copies)
  2. Uploading the pictures to vBulletin (the forum) to incorporate in your message. The recommended manner gives small thumbnail pictures which the reader can click to display larger images
  3. Alternately, there is a way to trick vBulletin into showing your pictures "full size" within your forum posts or messages, without a thumbnail, but you have to provide the long-term storage.

Reducing the Size

Modern digital cameras capture a huge amount of detail - my latest digital camera creates a picture 4608 by 3456 pixels - 16 million pixels. But a computer display can only show about 75 pixels per inch. An ideal picture on a forum is about 8 inches wide and 6 inches high, so the display only uses 600 pixels in that 8 inches, 450 pixels in that 6 inches, or a total of 270,000 pixels. A smart phone or tablet has more pixels per inch, but fewer inches, so a picture 600 pixels wide is good for that media also. You need to reduce the size of the picture from 16 million (or whatever) pixels to about ¼ million pixels before it is used on a forum (or attached to an email).

More technology

If you are interested in more technology about picture size, read on. Or just jump ahead to the next section.

If you are taking pictures for a printed book or magazine, they will want a very high level of detail - typically at least 1,200 pixels per inch. A full page picture in a book may be 6x8 inches, or 7200 x 9600 pixels, or a total of 69 megapixels. Okay, you only have an 8 or 16 megapixel camera, so you need to buy a fancier camera if you want to be a professional photographer. With your hobby digital camera, the editor may only be happy to publish a small picture - maybe 2x3 inches.

If your goal is a computer screen (a picture on a forum or attached to an email), as noted above a picture about 600 pixels wide is a good size. If you send a picture 4608 pixels wide (like the camera example above) it will take a lot longer to get to the user, take more space on his computer, and either

  1. The entire picture will be displayed. Only 20% of so of the width of the picture can be on the screen at a time, so the user needs to scroll to see the width. Same problem requiring scrolling for the height. Not nice for the user who can only see about 4% of the picture at a time (20% horizontally, 20% vertically), or
  2. The receiving computer will analyze the picture and reduce the size to the number of pixels that can be displayed in the window, discarding 96% of the details of the picture it just spend a long time receiving.

The large pictures require much more storage on the forum. Time to transmit the picture to the forum, and from the forum to each of the users, will be much longer. (Remember some of the forum users live in areas where high speed internet either doesn't exist or is very expensive, so slow dial up phone lines still are used for many computer connections.) Your email recipients will also thank you for shrinking the picture before emailing them.

A picture 400 pixels high and 600 pixels wide has a total of 240,000 pixels. Each pixel can be one of 16 million colors, so representing each pixel requires 24 bits, or 3 bytes. That 400x600 pixel picture requires 960,000 bytes as it is created and used. JPEG compression uses fancy mathematics (discrete cosine transforms) so a typical picture can be compressed to about 1/30 the original size with no perceptible loss of detail. That 960,000 byte picture suddenly only takes only around 32,000 bytes to store and transmit (depending on the amount of detail in the picture). With a lot of detail (adds to the size) and a little larger size, you can still be well under the usual forum size limit of about 100 kilobytes for a JPEG compressed picture.

How do you shrink a picture?

The concept of shrinking a picture is simple... If you want a picture 1/3 the original size, find the "average" color of each 3x3 block of pixels, and replace those 9 pixels with one pixel with that average color. In practice, you probably don't want to shrink the picture exactly 1/3 or 1/4 or 1/5 etc., so the technology involved is more complex, but there are lots of programs that do a good job.

Upload the pictures

The standard vBulletin approach is that you can upload your pictures to the forum, and they will be stored and supported just as your forum messages are kept "forever." The good news is that everything is together on the forum - if you change the way you keep your pictures, your wisdom on the forum remains together, unchanged. The bad news is that they are displayed as small thumbnails (nice for the user with a slow connection), and the user has to click on the thumbnail to download and view the larger screen-size pictures.

Once your nicely sized pictures are available, position your cursor where you would like the picture (thumbnail) to appear in your text - it can be anywhere, it does not have to be at the end. Click on the little picture frame icon near the right end of the options (if you leave your mouse over the icon for a second, it will say "insert image".

A window will open to allow you to select the files (images) you want to include in your forum message. They can be from your computer, or from your web site or on-line photo library (from a URL). From your computer you can browse to select the files you want to upload. Since you just prepared the smaller version, perhaps with a new name, it should be easy to find and select - highlight the name(s) of the picture(s) you want to show on the forum and select SAVE. The name and location on your computer will be added to the list. When you are satisfied, click the "Upload File(s)" button. The picture(s) will be uploaded and incorporated into your post at the point that the cursor was placed. Each picture will appear as the code "[ATTACH]" with the serial number of the picture in the forum storage, followed by [/ATTACH]. You can cut and paste to move that code, if you would like the picture (thumbnail) in a different place in your message.

Full Size Pictures

A full size picture is not one that comes from your camera, but one that has been properly sized to fit in the context of your forum message (typically with the larger dimension about 600 pixels). The "full size" idea is that it will be displayed directly, not as a thumbnail.

The good news is that you can do it. The bad news is that you have to provide the long-term storage of the picture. If you have a web site, it can be on that web site (but once the picture is on the forum, don't move it on your web site). You might want to set up a special directory on your web site for pictures you have posted on the forum. If you have an on-line library of your pictures, and can store the nicely reduced size pictures in that library, and can have a unique URL - address - that leads to each publicly available picture, you can use that photo library. (You cannot expect the forum to magically find the picture in your photo library, or log in to get access to the picture.)

A good test is to type the address of the picture (starting with http:// ) in your browser, and confirm that the one picture you are referring to appears. Note that the upper/lower case must be exactly as the picture was stored. If you have a space in the filename of the picture, it will likely be replaced by the code #20

To insert that nicely sized picture in your message,

If you want to see a preview of your post with the image in place, click "Go Advanced" at the bottom and select "Preview Post"


Much of this was adapted, with permission, from an earlier tutorial ©2007-2013 by Vaughn McMillan, Albuquerque New Mexico, ALL RIGHTS RESERVED