Editing Blog Photos with HTML

UPDATE: Only three days left in the Blog Salad $2000 Web Design Giveaway! [intlink id=”2567″ type=”page”]Click here to enter.[/intlink]

Today I’m covering fellow blogger Susieee! Mac’s second request from early in the Blogathon:

How to fine tune photos/images using HTML

Most major blogging platform has pre-set image size adjustment options, but these are limited to small, medium, large, thumbnail, etc.  There is a way, however, to make photos exactly the size you want.

First, a quick lesson on HTML. Hypertext Markup Language is a switching language; it operates by telling someone’s web browser to turn on and turn off certain characteristics.  <strong> turns bold text on, </strong> turns it off.  The pieces of code between arrow brackets <> are called tags.

The <img> tag tells a web browser to insert an image.  All of the attributes of the image are defined between the brackets.  Let’s use the following photo as an example:

"I feel so used!"

Here’s the code that’s used for the above photo:

<img title=”black-spider-monkey” src=”http://rondoylewrites.com/wp-content/uploads/2010/05/black-spider-monkey.jpg” alt=”Black Spider Monkey” width=”376″ height=”259″ />

Let’s break that down into it’s parts:

  • <img tells the browser an image is coming
  • title=”black-spider-monkey” provides info about the photo, visible when you hover your cursor over the image
  • src=”http://rondoylewrites.com/wp-content/uploads/2010/05/black-spider-monkey.jpg” tells the browser the URL address of the image, i.e. where to find it
  • alt=”Black Spider Monkey” tells the browser what text to display as an alternative if the image cannot load
  • width=”376″  tells the browser the image’s width in pixels
  • height=”259″ tells the browser the image’s height in pixels
  • /> tells the browser that you’re finished with the tag

NOTE: Despite my recent Gretchen Rubin interview that denounced SEO as an act of prestidigitation guaranteed to build traffic, it’s worth noting that ALT attributes are considered very important by search engines and their absence or misuse is frowned upon by the powers that be.

So, to change the size of the image, simply change the numbers for the height and width attributes!  If the <img> tag you find lacks these attributes, you can add them yourself.  You can whip out your trusty calculator to determine the correct proportions.

Or, you can just use percentages!  Here’s the same image, with the height and width set at 75%, 50%, and 25% respectively:

Does anyone hear an echo in here? Oh, it’s the monkey. Right.

Using the same methods, it’s possible to add borders, margins, padding, and adjust alignment, but I don’t want to make you nutty in one post.  So there you go, my darling blogarinos!

Today’s poll:

4 responses to “Editing Blog Photos with HTML”

  1. landguppy

    Here’s something you didn’t tell me, and maybe that’s not the point of your post. I want to be able to insert pictures and have wrap around text. Can’t do it with what I’ve got set up. Also, can’t center the captions no matter what it says I’m doing when I’m formatting the photos. Is that something I’m doing wrong or can fix by inserting code myself?

  2. Su-sieee! Mac

    Thanks, Ron! You made all that html stuff less scary for me. I started playing with the photo html the other day, randomly plugging in numbers til the photo looked good. Now, I can just do what you said to do. Yay!

  3. nike nfl jerseys

    Falcons Blue girl jerseys