Pictures: An Axion PSA

Take it from me, pictures, when executed correctly, can add greatly to the value, entertainment, and enjoyment of any thread. But a poorly executed picture can be an eyesore and a technical strain. Here is what I hope to call a tutorial for posting images in Open Threads.

First of all, let's take a look at the code provided by the Insert Picture button (the little tree above the comment field):

I know, it's freaky, but don't worry, I'll hold your hand.

• The < tells the HTML code, "Hey dudes, some code is about to start!"
• img src means "image source" -- you're about to display an image!
  
• The = is telling the HTML, "Hey look, this is what it's equal to!"
• The " signifies the start of the important part
• The host is where the image lives on the Internet, more on this below
  
• The image name is the name of the image! Imagine that! Other users will be able to see this, so keep that in mind.
  
• The *** is the type of file you're posting. You want this to be .jpg, .gif, .png -- Not .bmp, it's usually too large.
• The latter " ends the important part
• The final > closes the code. Show's over, people.
  

Now, using this format will place the image in its entirety in your comment. But if you just linked six megapixels of Steve Quis's ass on a box, 'Ballers are going to have to hit the scroll wheel on their mouse like three times to get past your comment. No thank you, I'll leave the strenuous activity to the athletes. So how do we display that large image in a way that it fits within the reasonable confines of a comment? Height tags, my dear Watson!

Throwing in a height tag like above will set a limit for how the tall the image will be displayed. The width with be automatically corrected as to not distort the picture, and since all threads are displayed vertically, limiting the height makes sense. The number is represented in pixels, and I find 150 to be a good baseline for most square images; 300 for images that are a lot taller than they are wide. Once you've added that, hit your Preview button and check the layout. Adjust your height value as necessary. Now you should have a perfectly concise displayed image.

Hosting: To be seen on the Internet, your image needs a home; called a host. Upload your image to a Photobucket, Flickr, Imageshack, tinypic, or whatever you prefer; these are hosts. If direct image paths are not provided by your host, or the image is hosted somewhere else on the web, simply right-click an image and (Firefox users) click 'Copy Image Location' (IE users) 'Copy Shortcut' to copy the image path to your clipboard. Then click the little tree icon above the comment field and paste by hitting CTRL + V where it says 'Enter the URL' as normal. If you are linking an image that is not hosted by you or on an account you own, the image may not last forever!

Please comment with any questions I didn't cover or am not clear about!