Adding and Editing Images in HTML Websites, including Imagemaps, Creating Fast Loading Web Graphics, Whether to Use JPG, GIF, or PNG
Graphic Design Resources Directory: Directory of Graphics Software Tutorials and All Your Graphics and Graphic Design Needs


Creative Public - Creative Graphic Design Business Resources - Graphic Design Business Resources

 All Graphic Design Resources Directory now includes Original Graphic Design Articles, Links to Hand-Picked Graphics Software Resources, Desktop Publishing (DTP) Tools, & Links to Tutorials for Image Editing Graphics Software like Adobe Photoshop or QuarXpress. And visit our most popular pages - Printing Layout Templates, Graphics Software Information, Online Design Classes, Design Schools, Graphic Design Jobs, Design & Layout Articles. If you get lost, visit our Site Map.

AddThis Social Bookmark Button

Search Design Schools

Zip Code:



Online Campus Both

home > Web Design Tutorials > Programming Tutorials > HTML Coding Tutorials > How to Add and Edit Images in HTML

HOW TO INSERT AND MANIPULATE PICTURES IN HTML : Links to Tutorials for Adding Images to HTML Web Pages such as Graphics, Clipart, or Photographs.

HTML Image Manipulation – Manipulating Images - Most Of The Same Functions From text Can be Used On Images, As Well. You Can Use A Picture As A Link, With The Same Code You use To Make A Text Link.

Manipulating Images - Just as I thought a primer, Primer #3, was required explaining how to manipulate text, I also think one is needed on how to manipulate images. Believe it or not, manipulating images is easier than manipulating text. So, here we go.

HTML Image Manipulation – Image - Images can add that extra bit of sass to a website, so long as they're used cleverly. Avoiding going overboard with that sass and only putting quality graphics on your pages which compliment your site's design and color-scheme will enhance the look of your site.

Basic Images
Now, you've got some stuff written, and a couple of linked pages. Your site is looking far more convincing now. But there's still something missing, isn't there? Most new HTML learners can't help themselves from wanting to fill their pages with images. The beauty of it is that it's really easy.

Image File Formats
Choosing the right file format to save your images in is of vital importance. There are three image formats in constant use on the net — GIF, JPG and PNG. Each is suited to a specific type of image, and matching your image to the correct format should result in a small, fast-loading graphic. Saving and exporting into these formats will require a decent image editor.

You'd think that making a set of thumbnails would be really, really simple, wouldn't you? Well, yeah, it is, but there are a couple of techniques and layout options which I think are important to know.

Image Rollovers
The classic image flip script is one of the most popular pieces of JavaScript on the web. Using this, you can make an image change to a different image on response to the user placing their mouse in a certain position. This is achieved by loading a new image in the original’s place. When used correctly, they can really add a bit of life to a page. You don't need to have any JavaScript experience to use these scripts; it's a simple copy ‘n’ paste job.

Image Maps
At this stage in your learning you've probably seen a few image maps being used around the Internet. They allow you to turn one active image into an image with many links pointing out of it depending on where in the image you click. It's useful when you're using graphical navigation.

Pre-Loading Images
Pre-loading images (and in some cases HTML files) speeds up their display by using your browser's cache. This means quick loading when the files are required.

Single pixel images
Single-pixel images, of both the transparent and colored flavors, have a myriad of uses for getting your site to look just like you want it to. They're insultingly easy to make and utilise too.

Further Attributes
Now that you know the basics of adding an image to a webpage, you'll want to learn these most basic of attributes for making your images accessible and presentable.

Image Map
Image maps are not overly difficult, but they are a bit time consuming. This page will attempt to take you through the creation of an image map in plain English so hopefully you can place one on your own page.

So You Want An Imagemap Image Flip, Huh?
This is a great effect. Let me tell you what it does first and then you can try it out for yourself. The image below is of an 1864 painting by Francis B. Carpenter entitled "The First Reading of the Emancipation Proclamation Before the Cabinet". I've always liked it and it lends itself to this tutorial. The picture is an image map. But wait...there's more.

A Fake Image Map
See that thing over there to the left? Run your mouse over it and keep an eye on the status bar at the bottom of the browser window. It acts like an image map. If you click on the section you want, it'll work. You'll go to the page. Where the trick is, is that that thing isn't an image map. In isn't an image at all. It's six images. Stay with me here...

A Client-Side Image Map
A client-side image map is an image map that is run by the browser rather than a CGI. What happens is you will provide all the information required to run the map in your HTML document. That's why it's called a client-side map….

By now you know enough to write a very nice, text-based home page, but it is the ability of the World Wide Web to provide pictures, technically called images, graphics, or sometimes icons, that has made it so popular. In this Primer, you'll learn how place an image on your page and also how to turn an image into a link to another page.

Manipulating Images
I also think one is needed on how to manipulate images. Believe it or not, manipulating images is easier than manipulating text. So, here we go.

Adding Pictures
Pictures are a great way to make your site stand out and look very attractive. In this section you will be learning the information you will need to know about adding pictures to your web site.

Width and Height
The width and height of pictures are fun to play with and easy to change. In this section you will be learning the information you will need to know about changing the width and height of pictures.

Alternative Name
The alternative name, is what shows up in place of the picture, if the picture fails to load, may that be because of connections or browser settings. The alternative name is just a brief summary of what the picture is, so if the picture does fail to load, the visitor can still tell what it is suppose to be.


Picture Border
Adding a border to your pictures is a very common thing. In this section you will be learning the tags and information you will need to know so you can add a border to your pictures.

Background Picture
This allows you to set a picture as the background of your web page. Doing this can really make your site look creative and greatly improve the overall look.

Picture Spacing
As you may know, the normal spacing tags also divide pictures, such as the P and BR tags. However, there are special spacing tags just for pictures which is what this section focuses on.

Picture Link
Making pictures into links can really improve your web page design and make it easier for your visitors to navigate around your site by having buttons and other graphical links. This section explains how to make your pictures into links.

Align Pictures
Aligning pictures can help you better space out your web site and make it easier for your visitors to read. In this section you will learn the tags that will help you align your pictures in different areas.

Table Background Picture
Table background picture allows you to specify the background of a table cell to be a picture. This allows you to type normal text over a picture.

Graphics file names are case sensitive. This means that when you enter the filename, you must use the EXACT name of the image. rabbit.gif is NOT the same as Rabbit.gif or rabbit.GIF You must always use the filename correctly, otherwise your image will not show up!

Pictures This Area Includes
This Area Includes:How to add a Picture, How to position a Picture, How to add a border for your picture, How to make a Picture a Link….

Free HTML lesson: how to include images in web pages part 1
Including images is very simple. You employ the IMG tag. The required attribute of this tag is SRC, which takes the value of the image file's URL.

Beginner guide to HTML: Including images in web pages part 2
NAME: You can specify a name for your image through this attribute. This helps in client-side scripting using JavaScript or VBScript.

HTML programming tutorial: Creating hyperlinks using images
Text placed between A - /A tags becomes a hot spot providing a link to another document or to some anchor on the same page. Images can also be used as hot spots if they are inserted between the anchor tags.

Members tripod - Inserting Images
Adding images to your web page can't be simpler (creating them is another story). Images are inserted into a document by using the img tag. The below inserts an image called "paperboy.gif"…

HTML Images
With HTML you can display images in a document.

Insert images
This example demonstrates how to display images in your Web page.

Insert images from different locations
This example demonstrates how to display images from another folder or another server in your Web page.

HTML Image Manipulation Tutorial - HTML Backgrounds
A good background can make a Web site look really great.

Adding & Editing Images - Insert images
How to display images in your Web page.

Adding & Editing Images- Insert images from different locations
How to display images from another folder or another server in your Web page.

Adding & Editing Images - Aligning images
How to align an image within the text.

Adding & Editing Images - Let the image float
How to let an image float to the left or right of a paragraph.

Adjust an image to different sizes
How to adjust an image to different sizes.

Make a hyperlink of an image
How to use an image as a link.

Create an Image Map
How to create an image map, with clickable regions. Each region is a hyperlink.

Adding & Editing Images in Sites Design - Inserting Inages in HTML
The tag used to insert an image is called img.

Adding & Editing Images in Sites Design - Resizing Images
You can change the size of an image using the width and height attributes.

Border Around
You can add a border to the image using the border setting shown in the example below…

Alternative Text
You can add an alternative text to an image using the alt setting shown in the example below…

Spacing Around
You can easily add space over and under your images with the Vspace attribute.

Adding & Editing Images in Sites Design - Alignment of Images
You can align images according to the text around it, using the following alignments…

Adding & Editing Images in Sites Design - Wrap Text Around
To do this, add align="left" or align="right" to the img tag. Consider these examples to see how it works...

Background Images
If you want to add a background image instead of a plain color there are some considerations you should make before doing so…

Fixed Images
The background image will scroll when the user scrolls down the page, unless you have set it to be fixed…

Adding Images
Adding images to your Web Page is easy. You include these images as either GIF or JPG formats.

Resizing Images
Adding height and width attributes to your images, will resize the image to your liking.

Examples Of Image Alignment With Text
Here are some Web Page examples of images use inconjunction with text. To see these pages click on the examples in the left column below. You will also see on these example pages the exact html code use in construction of that page being viewed.

Image map
We will be making rectangular "hot spots" for our image map.

Adding graphics
Adding graphics (images) to your web page is easy…

Inserting images into your website is a real breeze after you've successfully learned how to insert links. Consider the "Link" tag to be the "Image" tag's sister. Here's what you need…

You see code, how adding graphics (images) in web page…

Web Page Images in HTML - HTML Image Tag
To insert a image in your a page we need to use the tag "img" with its attribute "src"…

Turn a graphic into a bullet by simply inserting the image tag where you want the bullet to display;

Images - you've seen them on nearly every page you've visited on the internet. This lesson will show you how to code images into your own page(s).

Web Page Images in HTML - IMAGES
In this section you will learn how to insert images on a page, add alternate text to the images, align them and use images to make links to specified locations.

IMG (In-line Images) Element
The IMG element allows an image file to be inserted within an HTML document. This lets you include pictures, figures within a document and presented with the text, as opposed to having hypertext links that retrieve and display images in a separate viewing window. This element can not be used to include other HTML text within a given document.

Examples of IMG Alignment
The good examples of IMG Alignment like ALIGN="top", ALIGN="texttop"….

MAP Element
Netscape, Microsoft (Version 2.0 and later) and Spyglass browsers all support the client-side image map element MAP. MAP specifies the regions of a mapped image and the associated URLs within a structure of the form…

Images, like colors, create web pages that stand out and get noticed. They can also be the "make it or break it" factor. You don't have to be an expert at drawing. Just imagine what you would like to see on your page. Most images are already available to use through the internet, CD ROM, or other media sources. Anyone with a scanner or image software has an even larger resource to create and edit images.

Image Maps
An image map is a single image with link areas. The link areas (also known as hotspots) link to different areas, pages, or sites like any regular link. Each hotspot can be assigned a different destination.

Adding photos and graphics
To my index.html document I'd like to add a graphic. Graphics and photos are being implemented the exact same way. The only difference is with the image itself. When it's an animated or computer made image, than we speak of a graphic. Is the image a real flower or a person, that's when you speak of a photo or image. HTML recognises both as image.

Html and images
To make the picture show up on your page use the image source tag…

Using Graphics in your Webpage
Adding graphics to your pages is easy. However, there are some things you must know first.

Adding images to web page
For adding images you use the image IMG tag. The IMG tag is a single tag, so an endtag is not required. The tag uses several attributes…

Aligning images on web page
The default alignment of an image is left, just like text. If you want to have an image placed in the center, you use the CENTER and /CENTER tags, just like text.

Images and Links
Images bring life to web pages on the internet. To Insert image in an HTML document img tag is used. For examle…

You can add images to your HTML page with the img tag.

Here's an image I made for this particular tutorial. I'll use it to show you how you can manipulate your images and what the effects will be. I've called the image "htmlimage." Suitable…

Image Dimensions
An image has of course both a height and a width. But it's possible to tell the browser to show the image with different dimensions. You simply add WIDTH="imagewidth" and HEIGHT="imageheight". Width and height is given in number of pixels. Nearly all images are built from many tiny squares of colours called pixels. Here is what the image tag will look like.

On this page, you'll find: IMG tag explained.

Rollover Images
"Rollover images" are images that change when the mouse is over them. Rollover Images (or "rollovers" as we'll call them) are popular because they give the image a live feeling... they indicate that something will happen when you click on it. For example, this rollover, which is inside a link, changes from a gray-scale picture to a color picture when the mouse is over it.

HTML Images & Pictures Lessons - No Borders Around Image Links
Suppose you have a button-like image that is inside a link. Users can click on the image to go to whatever resource the button represents. For example, this button link brings you to the home page for this guide…

HTML Images & Pictures Lessons - Many Links, One Rollover
A different type of rollover is where several links all share a single image. When the mouse is over a link, the image changes to something relevent for that link. When the mouse is over another link, the same image changes to a picture relevent to that link.

HTML Images & Pictures Lessons - How to Make an Image Map
An image map is a picture in which areas within the picture are links. Creating an image involves using the IMG ..., MAP ..., and AREA ... tags. Suppose we want to make an image map using this image…

That is the image tag you'll use to put an image onto your web page. Here I've shown you both the relative path, i.e., it simply calls the next directory down which is the graphics directory and then the file. The second is the complete URL to the file.

Background Images
The following are examples of background images…

Putting Images in the document
We can insert images into a document using tags. The image on the left is inserted by using the following code…

Image Alignment
To control images and text by using attributes.

Image Maps
We can create a hyperlink from an image and we can also create hyperlinks from parts of images. Run your mouse over the following image. Although the effect is due to JavaScript, you will notice that different AREAS behave differently. This is due to the HTML...


HTML Images & Pictures Lessons - Inserting Images Into Your Web Pages
If you wish to add an image to a spot on your HTML document, you can simply use the img tag. The general usage includes the "src" attribute to indicate the source file (i.e. location and filename of the image you want to use).

Adding Alternative Text To Your Images
"Alternative text" is the text that appears when you hover your mouse over an image…

Sizing Images & Adding Image Borders
In order to set a size to an image, we're going to use the "width" and "height" attributes of the img tag. These attributes are generally used to preset the size of the images in an HTML document, so that when the document is being downloaded, it doesn't change shape everytime an image loads...

HTML Images & Pictures Lessons - Images And Graphics
Here is the HTML code that tells your browser to display an image on your page…
The code for adding images to your website is as easy as that of the code for links. The IMG tag is your base tag. This is an empty tag so it will not have a closing tag. Here is the complete syntax for an image file…

Background Image
We are going to go back to the body tag in order to place an image on the background of your entire webpage. So here is the syntax for loading a background image:

Image Maps
Okay so you want to create more than one link on only one image, then you will need to create an image map.

Adding Images to Your Page
So, have you been wondering how to add an image to your page? Well, let's take a look at the image tag…

Using a Background Image
To add a background image to your page, you will need to locate the BODY tag in your document. When you have found it, you may see just the word BODY, or you may see a string of commands afterward. It may look something like this…

HTML Images & Pictures Lessons - Resizing Images
Okay, you have an image you want to use, but it's just not the right size to go where you want it to go. Maybe the image takes up the whole screen, or maybe you wanted a larger version of the image on the screen. Well, you can resize the image by adding width and height commands to your image tag. Let's take a look at an example....

Using an Image as a Link
How to link an image. To use an image as a link, you will have to use two things…

Image Alignment/Wrapping Text
To allow text to wrap around an image, you just need to add one of these commands to the image tag…

Using Image "alt" Commands
Okay, the image alt command is used to display text in the case someone visits your page with a browser that can't show images, or in the case they have image loading turned off to so pages will load faster. If you have images as links, this is a handy way to let people know what the image was supposed to do. This is the alt command...

Placing & Editing Graphics in HTML - A Fixed Background Image
A fixed background is a background image that will stay in one place while the rest of your text and images scroll over the top of it. This is effect can only be seen in Internet Explorer at this time, but it is a nifty trick if you are using a background image on your web page.

Placing & Editing Graphics in HTML - Client Side Image Maps
To begin, let's look at a simple image map I created. If you click the left half of the image, you will be taken to a tables tutorial. If you click the right side, you'll get a tutorial on frames. Both the links are on one single image, so we just call it an image map.

Using Images
To include an image in a web document, you need to use an image tag…

Image Tags Examples
The following are examples of Borders, Fixed Background, Height & Width, Hspace...

Placing & Editing Graphics in HTML - Image Maps
This section describes how to create image maps within your HTML documents. Image maps are graphics which direct the user to resources or locations by clicking on areas of the image. There are two types; server-side and client-side. With both kinds of image map, you display the image as normal using the IMG tag. You also provide a map of the graphic to tell the browser which coordinates of the image lead to which location.

Client-side Image Maps
An Image Map is a reference to virtual areas within the boundaries of a particular bitmap image. Internet Browsers that recognise image maps can respond to the cursor and mouse click, only when the cursor is over image pixels defined in the "map".

Image maps allow users to access different documents by clicking different areas in an image. You can implement image maps in two ways: by storing image map information on a server or by including image map information in your document. These areas are commonly referred to as hotspots.

Placing & Editing Graphics in HTML - HTML Image Code Tutorial
Free online HTML tutorial about how to code an image for your Web page with examples of image codes. The picture (image) codes are useful for gif images, jpg images, bitmap images and others.

Placing & Editing Graphics in HTML - Re-use Images to Speed Your Site Up
Below is a simulation of a web page showing how you can use the same image over and over on a web site. If you're on a slow server, this can greatly increase the download time since all images are actually just one image. So instead of the multiple images normally required for a background, divider, bullets and buttons to download, only one image is downloaded to create all these various images. Code examples are below the simulated web page.

How to Add an Image to your Web Page
Adding an image is fairly easy, but there are plenty of things that can go wrong too. Where people run into trouble is not paying enough attention to details. The path to the image, the image name, and the image extension are all case sensitive.

HTML Images
Images are a staple of any web designer, so it is very important that you understand how to use them properly. Use the img tag to place an image on your web page.

Placing & Editing Graphics in HTML - Pictures
Sofar we have only looked at text. Very nice, but your page still looks a bit barren, if not boring. We are going to try putting a picture on the page. In HTML you use IMG (image) tag.

Basically, the image support in HTML is just an interface to the world of graphics. The creation and manipulation of images, the graphics formats and other graphics stuff is not part of HTML. In particular, the HTML specification does not pose any requirements or restrictions on the graphics formats supported by Web browsers

AREA: area in a clickable map
To define an area ("hotzone") in a (client-side) clickable map.
IMG - inline images
To include an image into the document.

Using Images
This tutorial is designed to show you how to include images in your web page using HTML. It's aimed more at the beginner than the expert, and shows some common pitfalls that beginners tend to make when using images in web pages.

Creating Image Maps
In this tutorial you'll learn how to create client-side image maps in HTML, and we'll touch on server-side image maps too.

Placing & Editing Graphics in HTML - Mail Links on Your Web Site
To create a link on your Web site that opens an email window, you simply use a "mailto:" link. For example…

Placing & Editing Graphics in HTML - Images: adding them to your page
The IMG (Image) tag is a 'one-sided' tag and requires several attributes for successfully embedding an image on your page…

Introduction to Image Maps
This section describes how to create image maps within your HTML documents. Image maps are graphics which direct the user to resources or locations by clicking on areas of the image. There are two types; server-side and client-side. With both kinds of image map, you display the image as normal using the IMG tag. You also provide a map of the graphic to tell the browser which coordinates of the image lead to which location.

Inserting Images And Links
Images and links are essential to creating web pages. Here are ways to use both images and links on your site quickly and effectively.

Adding Graphics
The img ELEMENT has a composite tag, which means that one tag contains all the attributes and the closing slash (/).

AddThis Social Bookmark Button



We are looking for submissions of Graphic Design Tutorials and Articles from Knowledgeable Graphic Designers and Publishing Professionals. We will add a paragraph about your graphic design services (or other services as long as it is not offensive) along with your published article. We will add your contact information, including your graphic design business' website link, within this paragraph. gets around 16,000 Unique Visitors every day and this could mean a nice amount of traffic being sent to your graphics business' web site (or your graphic design portfolio). Find Out More Here



Please click here to visit our sponsor

Graphic Design Menu


OUR FRIENDS -- Adobe Photoshop Tutorials -- Photoshop, Flash, 3D Studio Max Tutorials -- Web Designers & Developers --Photoshop Tutorial Man -- Tutorial Guide -- Free Webmaster Tutorials -- Web Designers -- Web Design Portfolio --AllFreelanceWork--AllFreelance--Artists Helping Children --All Creative Portfolios -- All Work at Home Ideas

All Graphic Design Resources Center is always looking for more information & resources to put into our graphics directory portal. If you have any design or dtp resources that you think would fit in well, such as graphics software links, graphics and clipart foundries, objects, filters, fonts, desktop publishing or other graphic design resources articles, templates, etc...Please email us and let us know. All Graphic Design Resources Center has been around since 1998 (originally as deezin dot com), offering desktop publishing information and graphic design resources to make your web search for graphics stuff easier. Let us know how we can make All Graphic Design site more helpful for you! All informational links are hand added by an editor. Thank you for visiting our site and don't forget to bookmark this site.

R E L A T E D . L I N K S

About Us | FAQs | Contact Us | Terms of Use | Privacy Policy

All website design, text, graphics, selection and arrangement thereof, and software are the copyrighted works of Allfreelance, © 2003 - 2019 QuinStreet, Inc.