HTML From Scratch. 4:6 Images for the Web

Tweet

Although it is considered best practice to use CSS to place images in a web page, it is still very useful to know how to do this with HTML.

Here is the basic code to include a picture called mycat.jpg in your HTML document:

<img src=”mycat.jpg” alt=”my cat Fluffy” />

Notice this is another self-closing tag, with no partner. I always include a closing slash in self-closing tags, but it is not required in HTML5.

The element itself is img, which is short for image. It takes various attribute and value pairs, but the important ones are:

• src, which is short for source and the value of which should be the URL of your image.
• alt, which is short for alternative. The value of this should be a very short description of the image.

If you want to put your images in a separate folder to keep things tidy, you can link to them like this (in this example the folder is named ‘images’):

src=”images/mycat.jpg”

You can also use the full URL of an image anywhere on the web – sometimes you need to do this to reach a file on your own website, but usually linking like this is a bad idea as if the image is not actually on your own website you are doing something called hotlinking. This is frowned upon as it is not only stealing someone else’s picture, but placing more strain on their server. You should never hotlink images that you want to display on your own website, and you should only use images that actually belong to you for copyright reasons.

The main file types used for images online are gif, jpg and png. They have different advantages and disadvantages – but the main thing to be aware of is that you need to keep file sizes as small as possible. If you are creating your own images, be aware of the different properties of image file types and use them accordingly. Experiment with saving your images at different levels of compression to keep them as small as possible.

• gif: Graphics Interchange Format.

This is the original web image format. It uses fewer colours but supports transparency and animation. Images can be fuzzy and jagged due to dithering, when subtle transitions are required.

• jpg or jpeg: Joint Photographic Experts Group

This has no animation or transparency but uses “real colour” (lots of colours). File sizes tend to be large but can be compressed quite a lot before any difference is visible in image quality. Compressing a jpg causes irreversible data loss – remember to keep your originals in case you need to work on them again!

• png: Portable Network Graphics

This is specifically developed for the web, and combines the small file size and transparency of gif with the many colours and smooth gradients of jpg. Data is also not lost in compression, and therefore compression can be reversed.
Lesson Four, Part Seven: Images (continued)

There is also one more important image type: SVG. This stands for Scalable Vector Graphics. An SVG file is written in a language called XML and is possible to code by hand. If you would like to, you can experiment with SVG. Many graphics programs will also export files as SVG.

SVG and PNG have both been around for a while, but were not widely used on the web before because of limited support in Internet Explorer. Everyone is very excited about being able to use alpha transparency, HSV, SVG and PNG. There has recently been a revolution in browser standards and technology, and you can learn more about these if you like and try them out for yourself.

If you need to download free image editing software, GIMP is a bitmap image editor similar to Adobe Photoshop and Inkscape is a vector editor similar to Adobe Illustrator.

Download GIMP for Free
Download Inkscape for Free

Tags: advantages and disadvantages, attribute, bad idea, element, html document, image file, images, img src, lt, mycat, own website, photographs, png, savin, short description, value pairs, web page

This entry was posted on Friday, August 5th, 2011 at 12:24 pm and is filed under Tutorials. 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.