Back To Basics: HTML for your Images

Welcome to our special series on getting to know HTML! Every other week, we'll debut a new article full of valuable tips and tricks that will start you on the path to being an HTML pro. We'll cover everything from the very basics, to tricks with images and headers, to advanced HTML. Miss anything? Check out part 1 in the series.

We're back with another installment of "Getting To Know HTML" and today we're going to talk about how to use HTML when adding images to your blog post.  Images are what grabs readers' attention before reading a word so let's make a good first impression and give them a reason to stick around.  

To follow up our previous HTML post, we are sticking with the Edit HTML tab on the Compose page.   You can still use the Insert Image button while using the HTML tab. The above image was inserted and styled using HTML only (no Aviary or Insert button involved).  We'll break down and explain the components used to create this image's appearance.

The image tag always begins with "img" and followed by an attribute tag to identify the image source ("src" ) and enhancing your images by adjusting the size, adding borders, and descriptions. So we start with our image HTML and we'll build from there:

<img src="https://mperezsay.typepad.com/coffeemug.png">

The original size of this photo is 639 × 638 px was but made smaller by adjusting the  "width" and "height" attribute to width="300" and height="290".

You can also enlarge your picture but it's not recommended as it may distort the quality of the image so remember, it's better to downscale a large image than enlarge a small one. 

To give it a thick solid black border around your image,  you can pull this off by including a style parameters to your code including Width, Style, and Color like so:  style="border: 10px solid black;"

If you hover your mouse over the above image, you should see a little pop-up text that says "Good Morning Typepad!"  This is added by including the Title attribute simply as: title="Good Morning Typepad".   In addition to this, you can add alternative text to your image file so if someone's browser is a little slow to load images, instead of reading "coffeemug.png" in the box, it says "Coffee Mug Image" using the "alt" attribute.

You may notice the placement of the image and spacing around it.  If you don't want to mess around with the <p> tags and don't want to use the Align Center button, you can adjust the spacing by adding hspace for horizontal spacing and vspace for vertical spacing.

So let's put this all together and see the HTML for the image above:

<p><img style="border: 10px solid black;" title="Good Morning Typepad!" src="https://mperezsay.typepad.com/coffeemug.png" alt="Coffee Mug Image" width="300" height="290" hspace="150" vspace="40" /></p>

Like text links, images can be linked to another website. To link an image, you start the HTML the same as a text link which we learned about previously, only this time we're connecting it with the image HTML as shown in this example from our Knowledge Base:

 

Adding a link to our Coffee Cup image will look like this: 

<a href="http://www.typepad.com" target="_blank"><img style="border: 10px solid black;" title="Good Morning Typepad!" src="https://mperezsay.typepad.com/coffeemug.png" alt="Coffee Mug Image" width="300" height="290" hspace="150" vspace="40" /></a>

You can also try these codes out in your Sidebar if you want to skip using our Sidebar Image Uploader and go strictly with the Embed Your Own  HTML module under Design > Content and insert your image HTML there.

Play around with your image HTML coding skills in your test blog or a saved draft posts and see how much you can do on your own!

Comments

[Amanda Aguirre]

Image maps in posts would be something I'd be interested in. I use them for my sidebar images but when I tried to do the same with an image for a post, it didn't work.

[Account Deleted]

Good to pick this up and I'll study it. Good to see you here, Marilyn, as you've given me lots of good assistance getting started in Typepad!

[Account Deleted]

Hello! Have you tried inserting the image map code in your Compose page just using the HTML tab and not switching back to the Rich Editor tab? Inserting the code in a post should work the same as your sidebar.

If you'd like to try again, we'll be happy to help! Just open a ticket with the code you're trying to use and we can test it out.