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:
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!