Skip to content

Commit 96f94ac

Browse files
ajay-dhangarajay-dhangar
authored
Merge pull request #73 from AryanAg08/my-contribution
Adding the required Images tag description, Attributes and Optimisation
2 parents 6d293c8 + e8b1927 commit 96f94ac

File tree

3 files changed

+139
-0
lines changed

3 files changed

+139
-0
lines changed

‎web-dev/html/Images/1 Inserting-Images.md

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
---
2+
id: Inserting-Images
3+
title: Inserting Images
4+
sidebar_label: Inserting Images
5+
sidebar_position: 1
6+
tags: [html, Img]
7+
---
8+
9+
# Inserting Images on Web Page
10+
11+
Now, we will check out how to insert Images on your webpage. The tag that is used for inserting the Images in the webpage is `<img>` tag.
12+
13+
The `<img>` tag in HTML is used to insert images into a web page. It is one of the fundamental elements for web development as it allows you to display visual content seamlessly.
14+
15+
`<img src="image.jpg" alt="Description of the image">`
16+
17+
- **src:** This attribute specifies the URL of the image. It can be a relative or absolute path to the image file.
18+
19+
- **alt:** This attribute provides alternative text for the image, which is displayed if the image cannot be loaded or for accessibility purposes. It's essential for visually impaired users who rely on screen readers.
20+
21+
Here's an example of how you might use the `<img>` tag:
22+
23+
```html
24+
<!DOCTYPE html>
25+
<html>
26+
<head>
27+
<title>Intro to Images</title>
28+
</head>
29+
<body>
30+
<h1>My Image</h1>
31+
<img src="example.jpg" alt="An example for inserting the Image!">
32+
</body>
33+
</html>
34+
35+
```
36+
37+
This code will display the image "example.jpg" with the alternative text "An example for inserting the Image".
38+
39+
# Accessibility:
40+
41+
Adding descriptive <u>**alt**</u> text to images is crucial for accessibility. Screen readers rely on this text to describe images to visually impaired users. So, always ensure your images have meaningful alt attributes.

‎web-dev/html/Images/2Image-Formats-And-Optimisation.md

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
---
2+
id: Image-Formats-And-Optimisation
3+
title: Image Formats And Optimisation
4+
sidebar_label: Image Formats And Optimisation
5+
sidebar_position: 2
6+
tags: [html, Img]
7+
---
8+
9+
# Optimisation
10+
Optimizing images for the web is crucial for improving website performance and user experience. By choosing the appropriate image format and applying optimization techniques, you can minimize file sizes without compromising image quality.
11+
12+
When optimizing images for use on an HTML webpage, it's essential to consider the format and optimization techniques to ensure fast loading times and good user experience.
13+
14+
### 1. JPEG (Joint Photographic Experts Group):
15+
- **Description**: Ideal for photographs and images with gradients.
16+
- **Optimization Techniques**:
17+
- Adjust compression levels: Balance image quality and file size by adjusting the compression level.
18+
- Optimize dimensions: Resize images to the actual size they will be displayed on the webpage.
19+
- Remove unnecessary metadata: Strip EXIF data and other metadata to reduce file size.
20+
- Use progressive encoding: Load images gradually for faster perceived performance.
21+
22+
```html
23+
<img src="photo.jpg" alt="Description" width="800" height="600">
24+
```
25+
26+
### 2. PNG (Portable Network Graphics):
27+
- **Description**: Suitable for images with transparency and sharp lines.
28+
- **Optimization Techniques**:
29+
- Use PNG-8 for simple graphics: PNG-8 supports up to 256 colors and is suitable for images with limited colors.
30+
- Optimize transparency: Use alpha transparency only where needed to minimize file size.
31+
- Compress PNG-24: Compress PNG-24 images to reduce file size while maintaining quality.
32+
33+
```html
34+
<img src="logo.png" alt="Description" width="200" height="100">
35+
```
36+
37+
### 3. GIF (Graphics Interchange Format):
38+
- **Description**: Suitable for simple animations and images with limited colors.
39+
- **Optimization Techniques**:
40+
- Limit color palette: Reduce the number of colors used in the image to minimize file size.
41+
- Optimize animations: Limit the number of frames and optimize frame duration for GIF animations.
42+
43+
```html
44+
<img src="animation.gif" alt="Description" width="300" height="200">
45+
```
46+
47+
### 4. WebP:
48+
- **Description**: Modern image format offering both lossy and lossless compression.
49+
- **Optimization Techniques**:
50+
- Convert JPEG/PNG to WebP: Convert existing images to WebP format for better compression and smaller file sizes.
51+
- Serve WebP images conditionally: Detect browser support for WebP and serve WebP images to compatible browsers.
52+
53+
```html
54+
<picture>
55+
<source srcset="image.webp" type="image/webp">
56+
<source srcset="image.jpg" type="image/jpeg">
57+
<img src="image.jpg" alt="Description" width="400" height="300">
58+
</picture>
59+
```
60+
61+
By implementing these optimization techniques and choosing the appropriate image format, you can enhance the performance and user experience of your HTML webpages.

‎web-dev/html/Images/3 Image-attributes.md

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
---
2+
id: Image-Attributes
3+
title: Image Attributes
4+
sidebar_label: Image Attributes
5+
sidebar_position: 3
6+
tags: [html, Img]
7+
---
8+
9+
# Attributes
10+
11+
Attributes in HTML are additional pieces of information you can include within tags to modify or define the behavior or appearance of elements.
12+
13+
## Image Attributes
14+
15+
Sure, here are descriptions for the top 4 attributes used with the `<img>` tag:
16+
17+
1. **src (Source)**:
18+
- **Description**: This attribute is essential as it specifies the URL or file path to the image file that the `<img>` element should display.
19+
- **Usage**: It's mandatory and without it, the `<img>` tag won't display any image.
20+
- **Example**: `<img src="image.jpg" alt="Description">`
21+
22+
2. **alt (Alternative Text)**:
23+
- **Description**: Provides a textual description of the image. It's displayed if the image cannot be loaded or for accessibility purposes.
24+
- **Usage**: While not technically required, it's considered best practice for accessibility and SEO purposes.
25+
- **Example**: `<img src="image.jpg" alt="A beautiful sunset">`
26+
27+
3. **width**:
28+
- **Description**: Specifies the width of the image in pixels.
29+
- **Usage**: This attribute allows you to control the size of the image displayed on the webpage.
30+
- **Example**: `<img src="image.jpg" alt="Description" width="300">`
31+
32+
4. **height**:
33+
- **Description**: Specifies the height of the image in pixels.
34+
- **Usage**: Similar to the `width` attribute, `height` allows you to control the height of the image displayed on the webpage.
35+
- **Example**: `<img src="image.jpg" alt="Description" height="200">`
36+
37+
These attributes are fundamental for displaying images on a webpage while ensuring accessibility and proper layout.

0 commit comments

Comments
 (0)