HTML & CSS

Html Images (img src) And Different Formats Of Images, Which Used In Html

Html Images

IMAGES

Html Images -Besides text, HTML also allows to insert images (both static and animated) in an HTML document. Html Images  are added to make the web page more attractive, interesting and dynamic. You can create image files using different graphics software such as Adobe Photoshop, GIF Constructor, MS-Paint etc. A website may consist of many images; each image is stored in a separate file.

Although, web page becomes attractive by adding Html Images  but it creates some problems for visitors. For example, the downloading process of web page becomes very slow due to the large size of the Html Images .

If you want to use the image files in an HTML page, you should consider the following things: –

  1. Image file size
  2. Physical dimension
  3. File type



GIF Html images Format

GIF stands for Graphic Interchange Format. It is a bit-mapped graphics. It supports 256 colors and various resolutions. It was introduced by CompuServe in 1987.

GIF was developed for online use. It is widely used on the world wide web due to its wide support and portability. GIF images are in two different versions. The first version of the GIF format is GIF 87a and the second is GIF 89a. GIF 89a supports additional features. The main features of GIF 89a are given below.

Animation:

GIF 89a has feature of storing multiple images in one file, which is used on the web to produce simple animations. Some image editing programs (or other graphics software) can combine several GIF images into a single file, which then displays each image one by one. Most of the browser can display animated GIFs.

Interlacing:

It refers to how an image comes up on the screen. A browser downloads a non-interlacing image line by line. The complete image is not visible until it has all been loaded. A browser displays interlaced Html Images as it loads. The image gradually gets clearer until it is loaded completely. Please note that the size of interlaced image is larger than non-interlaced image.

Lossless Compression:

 Lossless compression is an efficient way to save files without losing image details. When GIF image file is saved, it is compressed to take less space on the disk and less time to download.

Transparency:

 Transparency sets an image’s background color to the browser’s background color, thereby making the image appear as if it has no background.


JPG/JPEG Html images Format:

JPEG stands for Joint Photographic Expert Group. JPEG format is the second most popular form of Html Images  on the web. JPEG format can save graphics information on more than 16 millions of different colors. The JPEG format is unique in that it uses compression after it has been created. For example, if the picture size is of 20KB when displayed, it may be only 7KB when stored on the disk. JPEGs are better suited for displaying natural and couples Html Images . JPEGS format is always full 22-bit color. The image will be small than a GIF, JPEG format does not support the options of interlacing and transparency. As a whole, JPG images are less flexible than GIF images.

Other Html Images Formats:

The following image formats are also supported by same computer systems: –

PNG Html Images Formats:

PNG stands for Portable Network Graphics. This format was developed in 1995. PNG was designed as a replacement for the GIF format. This new image format is only supported by the most recent browsers. PNG format combines the most features of GIF format such as transparency, interlacing, lossless compression techniques and to accommodate millions of colors.

PNG offers better compression and more features than GIF. So PNG image files are generally smaller than GIF files. However, PNG format does not support animations. Two new image formats were derived from PNG format for animation. These are MNG (Multiple-image Network Graphics) and APNG (Animated Portable Network Graphics). Both these formats have not been widely adopted. The GIF format is still preferred for animation over MNG and APNG formats.

TIFF Html Images Formats:

TIFF Stands for Tagged Image File Format. This format was developed in 1986. It is one of the widely supported file format for storing bit-mapped Html Images  on personal computers. The file extension of TIFF Format file is ‘tif?. This format is commonly used in desktop publishing, faxing, 3-D applications, and medical imaging applications.


BMP Html Images Formats:

BMP stands for bitmap. This format is the standard for a Microsoft Windows 3.1 product or later versions of Windows operating system. Windows bitmap files are stored in a device-independent bitmap (DIB) format that allows Windows operating system to display the bitmap on any type of display device. The term “device independent” means that the bitmap specifies pixel color in a form independent of the a Microsoft Windows DIB file is “bnp”. have to write code, which performs the animations

<IMG> TAG

IMG stands for image. The <IMG> tag is used to insert an inline image in a web page.

The image put into a web page is called inline image. Within the <IMG> tag, you must give the name and path of image file as an attribute. The <IMG> tag has no ending tag.

Attributes

The most important and commonly used attributes of <IMG> tag are as follows: –

SRC

SRC stand for source. It is used to specify the name and location (relative or absolute) of the image file. The use of path with file name is optional. The complete path is specified only if the image file is located at different location.

Example:

<IMG SRC=”test.jpg” >

Align

It is used to specify the alignment of the image and the alignment of the text with respect to the inline image. Possible values of this attribute are:

  • Left: it is used to align the image to the left of browser window.
  • Right: it is used to align the image to the right of browser window
  • Center: it is used to align the image at the center of browser window.

Possible values for alignment of text with respect to the image are as follows:

  • Top: it is used to align the text at the top, next to the image.
  • Bottom: it is used to align the text at the bottom, next to the image.
  • Middle: it is used to align the text at the middle, next to the image.

Border

It is used to specify the size (in number of pixels) of border around an image. The default value is 0 (no border).



Width

It is used to specify the width of image (in number of pixels). If this attribute is omitted, the image appears in the default width.

Height

It is used to specify the height of the image (in number of pixels).

Note: Usually Both ‘Width’ & ‘Height’ attributes are used to fit the image within a space. You can fit a large image into a smaller space. Similarly, you can enlarge a smaller image.

HSpace

HSpace stands for horizontal space. This attribute is used to specify the white space (in number of pixels) to the left and right of the image.

Example:

Html Images

VSpace

VSpace stands for vertical space. This attribute is used to specify the white space (in number of pixels) to the top and bottom of the image.


Example:

Html Images

ALT

ALT stands for alternate. This attribute is used to specify the text to be displayed in case the browser is unable to display the image specified in the SRC attribute. For example, if the image file is not available in the specified path.

Dynsrc

Dynsrc stands for dynamic source. This attribute is used to specify the name and location of dynamic image file such as video file etc.

Controls

This attribute is used for video file that controls the playback.

Loop

This attribute is used to specify the number of times a video file plays back. Its value may be 1,2, …..,n

Related Article:

https://programmingdigest.com/html-hyperlink-tag-internal-external-linking-html-with-hyperlink-code/

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button