Lesson-5-Image

In HTML, an “image” refers to a visual element that can be embedded within a web page to display graphics, pictures, icons, and other visual content. Images are a crucial part of web design and content presentation. There are several types of images in HTML, but primarily, images are categorized into two main types.

1. Raster Images:

Raster images, also known as bitmap images, are made up of a grid of pixels. They are typically used for photographs and complex graphics. The most common raster image formats used in HTML include:

JPEG (Joint Photographic Experts Group): Suitable for photographs and images with many colors. It uses lossy compression, which means it may lose some image quality when compressed.
PNG (Portable Network Graphics): Ideal for images with transparency or images that require high-quality, lossless compression. It’s commonly used for icons and simple graphics.
GIF (Graphics Interchange Format): Often used for simple animations, icons, and images with a limited color palette. It supports transparency and simple animations.

<img src="photo.jpg" alt="A beautiful landscape" width="500" height="600" />

In above code, width and height is by default pixel (px). Below is by using width and height in style. This is more suggested because it prevents styles sheets from changing the size of images.

<img src="photo.jpg" alt="text" style="width:500px;height:600px;">

It is more suggested to use above image like as shown below. In this example, we packed image in a container and its width/height is set to our required size of image. While, in <img> tag, we used width=100% and height is auto calculated. Moreover, image-container is packed into another outer-container. Now setting for the website will be applied only on outer-container. Don’t change image-container until you required to set image’s properties.

<div> <!--outer-container -->
    <div style="width:500px; height:600px;"> <!--image-container -->
        <img src="photo.jpg" alt="text" style="maxWidth:100%; height:auto;" />
    </div>
</div>

Note: Always apply four things for image tag. One is closing tag, second is “alt” attribute, third is “width” and fourth is “height” of the image. If width and height are not specified, the web page might flicker while the image loads.

Note: The value of the max-width property overrides the width property.

2. Vector Images:

Vector images are created using mathematical paths and shapes. They are resolution-independent, which means they can be scaled to any size without loss of quality. SVG (Scalable Vector Graphics) is the primary vector image format used in HTML. SVG is perfect for icons, logos, and illustrations.

<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

Previous Lesson

Next Lesson

Share this: