codeharborhub · ajay-dhangar · May 12, 2024 · May 12, 2024 · May 12, 2024
@@ -0,0 +1,41 @@
+---
+id: Inserting-Images
+title: Inserting Images
+sidebar_label: Inserting Images
+sidebar_position: 1
+tags: [html, Img]
+---
+
+# Inserting Images on Web Page
+
+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.
+
+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.
+
+`<img src="image.jpg" alt="Description of the image">`
+
+- **src:** This attribute specifies the URL of the image. It can be a relative or absolute path to the image file.
+
+- **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.
+
+Here's an example of how you might use the `<img>` tag:
+
+```html 
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Intro to Images</title>
+</head>
+<body>
+    <h1>My Image</h1>
+    <img src="example.jpg" alt="An example for inserting the Image!">
+</body>
+</html>
+
+```
+
+This code will display the image "example.jpg" with the alternative text "An example for inserting the Image".
+
+# Accessibility:
+
+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.
@@ -0,0 +1,61 @@
+---
+id: Image-Formats-And-Optimisation
+title: Image Formats And Optimisation
+sidebar_label: Image Formats And Optimisation
+sidebar_position: 2
+tags: [html, Img]
+---
+
+# Optimisation
+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.
+
+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.
+
+### 1. JPEG (Joint Photographic Experts Group):
+- **Description**: Ideal for photographs and images with gradients.
+- **Optimization Techniques**:
+  - Adjust compression levels: Balance image quality and file size by adjusting the compression level.
+  - Optimize dimensions: Resize images to the actual size they will be displayed on the webpage.
+  - Remove unnecessary metadata: Strip EXIF data and other metadata to reduce file size.
+  - Use progressive encoding: Load images gradually for faster perceived performance.
+
+```html
+<img src="photo.jpg" alt="Description" width="800" height="600">
+```
+
+### 2. PNG (Portable Network Graphics):
+- **Description**: Suitable for images with transparency and sharp lines.
+- **Optimization Techniques**:
+  - Use PNG-8 for simple graphics: PNG-8 supports up to 256 colors and is suitable for images with limited colors.
+  - Optimize transparency: Use alpha transparency only where needed to minimize file size.
+  - Compress PNG-24: Compress PNG-24 images to reduce file size while maintaining quality.
+
+```html
+<img src="logo.png" alt="Description" width="200" height="100">
+```
+
+### 3. GIF (Graphics Interchange Format):
+- **Description**: Suitable for simple animations and images with limited colors.
+- **Optimization Techniques**:
+  - Limit color palette: Reduce the number of colors used in the image to minimize file size.
+  - Optimize animations: Limit the number of frames and optimize frame duration for GIF animations.
+
+```html
+<img src="animation.gif" alt="Description" width="300" height="200">
+```
+
+### 4. WebP:
+- **Description**: Modern image format offering both lossy and lossless compression.
+- **Optimization Techniques**:
+  - Convert JPEG/PNG to WebP: Convert existing images to WebP format for better compression and smaller file sizes.
+  - Serve WebP images conditionally: Detect browser support for WebP and serve WebP images to compatible browsers.
+
+```html
+<picture>
+  <source srcset="image.webp" type="image/webp">
+  <source srcset="image.jpg" type="image/jpeg">
+  <img src="image.jpg" alt="Description" width="400" height="300">
+</picture>
+```
+
+By implementing these optimization techniques and choosing the appropriate image format, you can enhance the performance and user experience of your HTML webpages.
@@ -0,0 +1,37 @@
+---
+id: Image-Attributes
+title: Image Attributes
+sidebar_label: Image Attributes
+sidebar_position: 3
+tags: [html, Img]
+---
+
+# Attributes 
+
+Attributes in HTML are additional pieces of information you can include within tags to modify or define the behavior or appearance of elements.
+
+## Image Attributes
+
+Sure, here are descriptions for the top 4 attributes used with the `<img>` tag:
+
+1. **src (Source)**:
+   - **Description**: This attribute is essential as it specifies the URL or file path to the image file that the `<img>` element should display.
+   - **Usage**: It's mandatory and without it, the `<img>` tag won't display any image.
+   - **Example**: `<img src="image.jpg" alt="Description">`
+
+2. **alt (Alternative Text)**:
+   - **Description**: Provides a textual description of the image. It's displayed if the image cannot be loaded or for accessibility purposes.
+   - **Usage**: While not technically required, it's considered best practice for accessibility and SEO purposes.
+   - **Example**: `<img src="image.jpg" alt="A beautiful sunset">`
+
+3. **width**:
+   - **Description**: Specifies the width of the image in pixels.
+   - **Usage**: This attribute allows you to control the size of the image displayed on the webpage.
+   - **Example**: `<img src="image.jpg" alt="Description" width="300">`
+
+4. **height**:
+   - **Description**: Specifies the height of the image in pixels.
+   - **Usage**: Similar to the `width` attribute, `height` allows you to control the height of the image displayed on the webpage.
+   - **Example**: `<img src="image.jpg" alt="Description" height="200">`
+
+These attributes are fundamental for displaying images on a webpage while ensuring accessibility and proper layout.