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 that 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 subfolders inside the images folder on a big site. Images like logos and buttons maybe sit in a folder called an interface. Product photographs might sit on 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
<img>
We need to use an <img> element to add an image to the page. This is an empty element that means there is no closing tag. It must take the following two attributes:

src
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.

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

title
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 tooltip when the user hovers over the image.

HTML
<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.” />

Result
HTML

IMAGES
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.

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. The resolution states 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.