Working With Images in HTML

By: Daniel Imbellino
Updated: Feb 28, 2013

Using Images as links:
Linking to an image file across the internet:
<img src="http://example.com/example-image.png" />

Linking to an image file in your directory:
<img src="example-page-background.jpg" />

Specifying size attributes for your images:

<img src="large-image.png" width="45%" height="45%" />

Here we just specified the horizontal and vertical size of our image using values as percentages, but we can also specify these values using pixels instead:

<img src="our-example-image.png" width="275px" height="350px" />

Sizing attributes specified as percentages tend to be more adaptive in nature. Being as the internet is now accessed from a variety of devices that have vastly different pixel densities, aspect ratios, and resolutions, screen sizes, etc, percentages make for the best choice. Using values in this manner gives our images the power to scale appropriately depending the device that is rendering it. Percentages are generally measured as a portion of an elements pre-specified viewing area as indicated in our CSS styles.

Creating a vertical navigation menu with buttons as links:
<ul>
<li>
<a href="example-link-one.html" target="_self"><img src="example-button-one.png" /></a>
</li>
<li>
<a href="example-link-two.html" target="_self"><img src="example-button-two.png" /></a>
</li>
<li>
<a href="example-button-three.html" target="_self"><img src="example-button-three.png" /></a>
</li>
<li>
<a href="example-button-four.html" target="_self"><img src="example-button-four.png" /></a>
</li>
</ul>

We could also make this a horizontal navigation menu by declaring a CSS ID which we would reference in our HTML, and setting the display property to "display: inline block;" as so:

#navmenu ul {display: inline-block; styles }

And then referencing this selector in our HTML:

<div id="navmenu"> <ul>
<li>
<a href="example-link-one.html" target="_self"><img src="example-button-one.png" /></a>
</li>
<li>
<a href="example-link-two.html" target="_self"><img src="example-button-two.png" /></a>
</li>
<li>
<a href="example-button-three.html" target="_self"><img src="example-button-three.png" /></a>
</li>
<li>
<a href="example-button-four.html" target="_self"><img src="example-button-four.png" /></a>
</li>
</ul> </div>

For HTML5 documents you can also create a navigation menu with buttons as links using the <nav> element like so:

<nav>
<a href="link-one.html" target="_self"><img src="button-for-link.png" /></a>
<a href="link-two.html" target="_self"><img src="button-for-link-2.png" /></a>
Then adding additional links between the "nav" tags.
</nav>

Now we can specify the placement of our <nav> menu in CSS using an ID selector and again referencing that selector in our HTML:

#horizontal-menu-bar nav {width: 99%; height: auto; position: relative; left: 1%; top: 1%; font-family: arial, helvetica, "times new roman"; font-size: 100%; text-align: left; }

And then reference this selector in our HTML:

<div id="horizontal-menu-bar"> <nav> <a href="first-link.html" target="_self"><img src="example-image.jpg" /></a> <a href="second-link.html" target="_self"><img src="example-image-2.jpg" /></a> etc. </nav> </div>

We can now add style information using CSS.

We can remove the unordered list bullets with the "list-style-type: none;" CSS property:
ul {text-align: left; list-style-type: none; }

We can create a list and use the "list-style-image" CSS property to set an image for all of our links:
ul {list-style-image: url(example-image.png); }
This could be good if you wanted to use a set bullet points of your choosing across all of your links.

The Alt Tag:
Alt is used to provide a description to an image or element, like so:
<img src="example-image.png" alt="information about your image goes here" />

Its a good idea to include an alt tag with most all your image files you display on your webpages, since computer based systems for the handicapped may use the alt tag to provide information to the visually or physically impaired. Also, some browsers like Internet Explorer tend to display the content contained in alt tags to users who hover their mouse cursor over images. Also, search engines take note of alt tags when indexing your web pages.

Adding size properties to your images: <img src="example-image.png" alt="info about image" width="185px" height="150px" />
You can then use CSS to define the placement of the image on the web page by using a CSS ID:
#img1 {poisition: absolute; left: 195px; top: 245px; }
Now that you've defined your ID selector, you now need to reference back to that selector with a div tag in your HTML:
<div id="img1">
<img src="example-image.png" alt="info about image" width="185px" height="150px" />
</div>
We set the height and width in our HTML, and used CSS to position our image on the page using absolute positioning. But we can also use CSS to specify the height and width of the div container that holds the image,like this:
#img2 {height: 195px; width: 480px; position: absolute; left: 95px; top: 155px; }
<div id="img2">
<img src="example-image2.png" />
</div>

Setting a background image in HTML using "inline styles":
<body style="background-image: url(example-image.png); background-repeat: no-repeat; background-attachment: fixed;">
The "background-attachment" property defines how your image is displayed on the screen, with either the value of fixed, or scroll. If you use the fixed property, this means the image does not scroll with the rest of the page. If you use the scroll property, the background image will scroll with the rest of the pages content.

Word Wrapping Text Around Images:
In some cases you may be writing an article about something and may want to include an image somewhere within your text, for instance, in a paragraph. You could do so using the "vspace (vertical alignment), and "hspace" (horizontal alignment) properties like this:

<p> This is an example showing how to word wrap text around images <img src="example-image.png" align="right" vspace="14" hspace="14" /> in your web pages. </p>

What we just did is specify the use of a paragraph element, we then placed the "img src" tag where we wanted our image to appear. We then aligned the image to the right side using the "align=" property. We then specified the amoung of marginal space between the text and the image as 14 pixels, both horizontally and vertically using the "hspace" and "vspace" properties. Space is measured in pixels (px), so we are effectively clearing 14px of space around all four edges of our image or element. Our text that came before our "img src" tag will appear above the image, and the text after the closing of the "img src" tag will appear to the left of the image, cascading down the left side. This presents an effective way of wrapping text around an image file in HTML.

We can also use CSS to "word wrap" text around our images like so:

#selector img {float: right; margin: 8px; }

We first defined a CSS ID that we will reference in our HTML document. Then we specified that the "img" element for this particular selector will float to the right of our content. We then specified a margin to create additional space between our image and our text. In most cases its best to specify all styles in your CSS, so this method would the preferred way of word wrapping text.