Images are a staple of any web designer, so it is very important that you understand how to use them properly. In order to place an image onto a website, one needs to know where the image file is located within the file tree of the web server -- the URL (Unified Resource Locator).
Use the <img /> tag to place an image on your webpage. Like the <br /> tag, <img /> tag does not require a formal ending tag. Instead, all we need to do to close this tag out with a slash (/) placed just inside the ending bracket (/>).
HTML Image Code:
<img src="http://www.tizag.com/pics/htmlT/sunset.gif" />
HTML Image:
So that you can follow along with us, we've provided a global URL of an image we have stored on Tizag's web server. If you have an active connection to the internet, you should be able to use the URL in the example to render this image on your own web page. If not, you will have to download (right click the image and Save As...on a PC, control-click and Save on a Mac). Once saved to your local computer, point the image src attribute to the recently downloaded image file. It might help to save the image file in the same folder as your web page.
html - image src attribute
The source attribute (src) is what makes an image tag display an image. An image source is a URL value and should point to the directory location of an image file. Let's take one more look at the code from our first HTML image example.
HTML Image Code:
<img src="http://www.tizag.com/pics/htmlT/sunset.gif" />
An image source value is essentially the URL of a picture file and tells the web browser where the image is located so that it can then display the image correctly.
html - source urls
Image source URLs can be either local or global, meaning that the picture files you wish to display on your website can be either hosted locally on your machine (local) or hosted elsewhere on some other web site domain (global).
Global: http://www.tizag.com/pics/htmlT/sunset.gif
Local: pics/sunset.gif
Local URLs are relative to the file path of the web page itself. For example, if the picture file is placed inside the same directory as the web page, then the local URL for the image would simply be the name of the image, since it is residing in the same directory as the HTML page.
Local URLs Explained:
Local Src Location Description
src="sunset.gif" picture file resides in same directory as .html file
src="pics/sunset.gif" picture file resides in the pics directory
src="../sunset.gif" picture resides one folder "up" from the .html file
src="../pics/sunset.gif" picture file resides in the pics directory, one folder "up" from the .html file.
Pictures must reside on the same web host as your .html file in order for you to use local URLs. A URL cannot contain drive letters such as C:\, since a src URL is a relational interpretation based on the location of the.html file and the location of the picture file. Something like src="C:\www\web\pics\" will not work.
Each URL format has its pros and cons. Using the URL of pictures on other sites poses a problem if the other site happens to change the physical location of the picture file. Copying the file directly to your web server solves this problem. However, as you continue to upload picture files to your system, you may eventually run short on hard drive space. Use your best judgment based upon your situation.
html - image height and width attributes
Height and width are HTML attributes that define an element's height and width properties. These values can either be percentage-based (%) or rely on pixel sizes.
HTML Height and Width Attributes:
<img src="sunset.gif" height="50" width="100" />
HTML Height and Width (Pixels):
Above, we've used hard-coded pixel values for the height and width of the sunset image to ensure that this image will always render 50 pixels high by 100 pixels wide. By hard-coding these values, we are ensuring that the image will only display 50 pixels high by 100 pixels wide, even if the picture file itself happens to be much larger. If the dimensions of the picture are much larger, then we risk some severe skewing as the browser tries to shrink our image into our small box.
Height and width values can also be a percentage. Percentage values are relative to the parent HTML element (usually the body), which means if you have a parent element like a <body> element that is the whole screen (1024x768), then an image with a height and width of 100% will take up that entire body element (1024x768). In our example below, we have placed the image in a table element that is about 400 pixels wide by 200 pixels tall.
HTML Height and Width Code:
<table height='200' width='400'>
<tr>
<td>
<img src="sunset.gif" height="100%" width="100%">
</td>
</tr>
</table>
HTML Height and Width (Percentage):
This image is now pixelated, having been rendered to fill the 400x200 table element. The reason we are seeing a low-quality, pixelated rendering of the image is because the actual image file is much smaller than 400x200 and has been stretched by the web browser because we coded it to do so.
Here's a few things to remember when trying to place images on your web page:
Maintain the same height to width ratio. The ratio is critical, and must be maintained to avoid skewing.
Always scale down. -- Larger images will always scale down nicely and continue to look sharp.
If no height or width attribute is specified inside the <img> tag, the browser will use the actual dimensions of the image file to render the image. This can cause problems with the page layout if the picture file is too large, as other HTML elements will be moved further down the page in the event of an over-sized image.
Another concept to keep in mind is that as a browser begins rendering HTML components, it handles them one after another in sequence. Before it can move from one element on to the next, the browser needs to know the size and shape of an element. If this information is provided in the tag, that's one less step required by the browser to render an image element and will result in the page loading faster for your users.
html - alternative attribute
The alt attribute specifies alternate text to be displayed if for some reason the browser cannot find the image, or if a user has image files disabled in their web browser settings. Text-only browsers greatly depend on the alt attribute since they are not capable of displaying pictures.
HTML Alternative Attribute (alt):
<img src="http://example.com/brokenlink/sunset.gif" alt="Beautiful Sunset" />
HTML Alternative Text Attribute:
The alt attribute is also an attribute that search engines may look for when displaying images. The text value contained within this attribute must reflect the substance of the image in order to receive "credit" from a search engine.
html - horizontally align images
Images can be aligned horizontally to the right or to the left of other elements using the align attribute. Image elements are aligned to the left by default.
align
right
left
HTML Align Attribute Code:
<img src="sunset.gif" align="right">
HTML Image Align: Right:
As you can see, the image's right edge has now been aligned with the right edge of the display box. Since the display box is the parent element, this is the desired behavior for the align attribute. If we take this example a step further, you can achieve some really great designs by embedding aligned images inside of paragraph <p> elements.
HTML Image Align Code:
<p>This is paragraph 1, yes it is...</p>
<p>
<img src="sunset.gif" align="right">
The image will appear along the...isn't it?
</p>
<p>This is the third paragraph that appears...</p>
Image Wrap Around:
This is paragraph 1, yes it is. I think this paragraph serves as a nice example to show how this image alignment works.
The image will appear along the right-hand side of the paragraph. As you can see this is very nice for adding a little eye candy that relates to the specified paragraph. If we were talking about beautiful tropical sunsets, this picture would be perfect. But we aren't talking about that, so it's rather a waste, isn't it?
This is the third paragraph that appears below the paragraph with the image!
html gifs vs. jpegs vs. pngs
Gifs are best used for banners, clip art, and buttons. The main reason for this is that .gif files can have transparent backgrounds -- a priceless attribute when it comes to web design. On the down side, .gif files are limited to only 256 colors and any .gif image containing more than a few colors tends to have a larger file size than their .jpeg or .png counterparts. Large picture files are a plague of web design!
Jpegs have an unlimited color wheel and a high compression rate, which downsizes your load times and saves on hard drive space. Although .jpeg (or .jpg) files don't allow for transparent backgrounds, their size/quality ratio is outstanding. It's best to use .jpeg files for photo galleries or artwork. Avoid using .jpeg files for graphical designs, though; stick to using them for thumbnails, backgrounds, and photo galleries.
PNG image files are the best of both worlds. They have a large color wheel, low file size, and allow for transparencies like .gif images do. With a high-compression rate and transparent coloring, they might just be the best format for any web graphics.
When in doubt, try saving an image in multiple formats and decide which is better, keeping file size and quality in mind.
