Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Inserting images into HTML

Thursday, August 8th, 2013 by Servage

A web page with all text and no pictures isn’t much fun. The Web’s explosion into mass popularity was due in part to the fact that there were images on the page. Before images, the Internet was a text-only tundra.

First, a Word on Image Formats

In order to be displayed inline, images must be in the GIF, JPEG, or PNG file format. In addition to being in an appropriate format, image files need to be named with the proper suffixes—.gif, .jpg (or .jpeg), and .png, respectively—in order to be recognized by the browser.

If you have a source image that is in another popular format, such as TIFF, BMP, or EPS, you’ll need to convert it to a web format before you can add it to the page. If, for some reason, you must keep your graphic file in its original format (for example, a file for a CAD program or an image in a vectorformat), you can make it available as an external image by making a link directly to the image file, like this:

<a href="architecture.eps">Get the drawing</a>

Browsers use helper applications to display media they can’t handle alone. The browser matches the suffix of the file in the link to the appropriate helper application. The external image may open in a separate application window or within the browser window if the helper application is a plug-in, such as the QuickTime plug-in. The browser may also ask the user to save the file or open an application manually.

The img Element

The img element tells the browser, “Place an image here”. When the browser sees the img element, it makes a request to the server and retrieves the image file before displaying it on the page. On a fast network with a fast computer, even though a separate request is made for each image file, the page usually appears to arrive instantaneously. On mobile devices with slow network connections, we may be well aware of the wait for images to be fetched one at a time.

The src and alt attributes shown in the sample are required. The src attribute tells the browser the location of the image file. The alt attribute provides alternative text that displays if the image is not available. We’ll talk about src and alt a little more in upcoming sections.

There are a few other things of note about the img element:

  • It is an empty element, which means it doesn’t have any content. You just place it in the flow of text where the image should go.
  • If you choose to write in the stricter XHTML syntax, you need to terminate (close) the empty img element with a slash like so: <img />.
  • It is an inline element, so it behaves like any other inline element in the text flow.
  • By default, the bottom edge of an image aligns with the baseline of text.

Capture

Inline images are part of the normal document flow. They reflow when the browser window is resized.

Putting it all together if you want to insert an image into your webpage, use the below example code snippet.

<img src=”logo.jpg” alt=”The Company Logo”>

Providing width and height dimensions

The width and height attributes indicate the dimensions of the image in number of pixels. Sounds mundane, but these attributes can speed up the time it takes to display the final page by seconds. Browsers use the specified dimensions to hold the right amount of space in the layout while the images are loading rather than reconstructing the page each time a new image arrives.

And that’s great if you are designing one version of your page with one fixed image size. However, in these days of responsive web design, it is common to create several versions of the same image and send a small one to small mobile devices and a larger image for large-screen devices (and rescale the images to fit for sizes in between). If you are scaling images in a responsive design or delivering multiple image sizes, do not use width and height attributes in the markup.

An example is depicted below.

<img src=”logo.jpg” alt=”The Company Logo” width=”144” height=”72”>

A Window in a Window

You place an inline frame on a page similarly to an image, specifying the source (src) of its content as well as its width and height. The content in the iframe element itself displays on browsers that don’t support the element. This example displays a document called list.html in an inline frame.

<h1>Inline (floating) Frames</h1>

Capture00

Inserting images into HTML, 5.0 out of 5 based on 1 rating
Categories: Guides & Tutorials, Tips & Tricks

Keywords:

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.