How To Add Images To Website Pages?

 How To Add Images To Website Pages?

How To Add Images To Website Pages?


There are many things to consider when selecting and preparing images for a site. We might want to add a logo, diagram, illustration,photograph, or chart. It would make more attractive and professional when we take time to get them right.

Selecting Images for a Site 

Great images help make the difference between an average-looking site and a really engaging one because a picture can say a thousand words. Images may be used to set the tone for a site in less time than it takes to read a description. There are companies who sell stock images. These are images we pay to use,if we do not have photographs to use. Always keep in mind that all images are subject to copyright, and we can get in trouble for simply taking photographs from another website. If you have a page that shows several images then putting them on a simple, consistent background helps them look better as a group.

Images should;

  • Be relevant
  • Convey information
  • Convey the right mood
  • Be instantly recognizable
  • Fit the color palette

Storing Images on a Site

It is good practice to create a folder for all of the images the site uses, if we are building a site from scratch. How the site is organized? keeping images in a separate folder helps us understand, as a website grows. Now we can see an example of the files for a website. All of the images are stored in a folder called images. We might like to add sub folders inside the images folder on a big site. Images like logos and buttons may be sit in a folder called interface.Product photographs might sit in a page called products. Images about news might live in a folder called news. There are usually tools built into the admin site that allow us to upload images, if we are using a content management system or blogging platform. The program would probably already have a separate folder for image files and any other uploads.

Adding Images


We need to use an <img> element to add an image into the page. This is an empty element that means there is no closing tag. It must take the following two attributes:


This asks the browser where it can find the image file. This will usually be a relative URL pointing to an image on our own site.


This provides a text description of the image which describes the image if we cannot see it.


We may also use the title attribute with the <img> element to provide additional information about the image. Most browsers will display the content of this attribute in a too tip when the user hovers over the image.


<img src=”images/quokka.jpg” alt=”A family of
quokka” title=”The quokka is an Australian
marsupial that is similar in size to the
domestic cat.” />




The text used in the alt attribute is generally referred to as alt text. It should give an accurate description of the image content so it can be understood by screen reader software and search engines.The alt attribute should still be used, when the image is simply to make a page look more attractive.

Three Rules for Creating Images

There are three rules to remember during creating images for a website which are summarized below.

  1. Save images in the right format 

Mainly the websites use images in jpeg, gif, or png format.Our image might not look as sharp as it should and can make the web page slower to load, if we choose the wrong image format.

    2.Save images at the right size

We should save the image at the same width and height it will appear on the website. The image may be distorted and stretched, if the image is smaller than the width or height that we have specified. The image will take longer to display on the page, if the image is larger than the width and height if we have specified.

   3. Use the correct resolution

Images used on the web are made up of tiny dots as computer screens are made up of dots known as pixels. Resolution states to the number of dots per inch. Web pages on Computer screens are being shown at 72 pixels per inch. Saving images at a higher resolution results in images, which are larger than necessary and take longer to download.

Leave a Comment