checkmark

HTML

Introduction to Web and HTML

How the Web Works What is HTML Why Learn HTML

HTML Basics

HTML Structure and Syntax HTML Tags HTML Elements HTML Attributes Anatomy of an HTML Document Creating Your First HTML Page

HTML Document Structure

Document Type Declaration (<!DOCTYPE>) The `<html>` Element The `<head>` Section The `<meta>` Element The `<title>` Element The `<body>` Element HTML Comments

Text Formatting

Headings (<h1> to <h6>) Paragraphs (`<p>`) Line Breaks (`<br>`) Text Formatting Tags Preformatted Text (`<pre>`)

Lists

Unordered Lists (<ul> and <li>) Ordered Lists (<ol> and <li>) Definition Lists (<dl>, <dt>, and <dd>)

Links

Anchor Tags (<a>) Internal Links in html External Links in html Links to Email Addresses Linking to Other Resources Link Target Attributes Image Links

Images

Inserting Images (<img>) Image Attributes Image Formats (JPEG, PNG, GIF) Image Size and Alignment Image Maps

HTML Forms

HTML Form Structure Text Fields and Textareas Radio Buttons and Checkboxes Dropdowns / Select Box Text, Password, and Email Inputs in HTML Forms Date and Time Inputs in HTML Forms Submit and Reset Buttons Form Elements Attributes Form Validation Grouping Form Elements File Uploads Creating a Contact Form

Tables

Table Structure Table Rows and Columns Table Headers Table Data Table Captions Table Borders and Styling Spanning Rows and Columns

Multimedia

Embedding Audio (<audio>) Embedding Video (<video>) Video Formats (MP4, WebM, Ogg) Multimedia Attributes

HTML5 Sematic Elements

HTML5 Structural Elements Role of Semantic Elements Accessibility and SEO

HTML Entities

Special Characters and Symbols Common HTML Entities
menu Back to Edkool

Image Formats (JPEG, PNG, GIF)

Image Formats (JPEG, PNG, GIF)

Images are a fundamental part of web design and content presentation. When working with images in HTML, it's essential to choose the right image format based on the type of image, its purpose, and the trade-offs between quality and file size. The three most commonly used image formats for the web are JPEG, PNG, and GIF:

JPEG (Joint Photographic Experts Group)

  • File Extension: .jpg or .jpeg
  • Best Used For: Photographs and images with many colors, gradients, and complex details.
  • Advantages:
    • High compression for smaller file sizes without significant quality loss.
    • Excellent for photographs and realistic images.
  • Disadvantages:
    • Lossy compression may result in some loss of image quality.
  • Example Usage: 
    <img src="photo.jpg" alt="A beautiful landscape">

PNG (Portable Network Graphics)

  • File Extension: .png
  • Best Used For: Images with transparency, simple graphics, and images where quality must be preserved.
  • Advantages:
    • Supports transparency (alpha channel) for images with irregular shapes.
    • Lossless compression, preserving image quality.
  • Disadvantages:
    • Larger file sizes compared to JPEG for photographs.
  • Example Usage: 
    <img src="logo.png" alt="Company Logo">

GIF (Graphics Interchange Format)

  • File Extension: .gif
  • Best Used For: Simple animations, graphics with limited colors, and icons.
  • Advantages:
    • Supports animations with multiple frames.
    • Limited color palette suitable for graphics with a small number of colors.
  • Disadvantages:
    • Limited color support compared to JPEG and PNG.
  • Example Usage: 
    <img src="icon.gif" alt="An animated icon">

Choosing the Right Image Format

When deciding on the image format, consider the following:

  • Content Type: Choose the format based on the type of image you are displaying. JPEG is great for photographs, while PNG is suitable for images with transparency or simple graphics. GIF is primarily for animations and graphics with limited colors.

  • Quality vs. File Size: JPEG is excellent for balancing quality and file size, but it's lossy. PNG and GIF are lossless but often result in larger files. Consider your user's experience, especially on slower connections.

  • Transparency: If you need transparent areas in your image, use PNG. JPEG does not support transparency.

  • Animations: If your image needs animation, use GIF.

  • Browser Compatibility: All three formats are widely supported by modern web browsers.

  • Accessibility: Always provide meaningful alt text for images to make your content accessible to all users.

In summary, choosing the right image format is crucial for optimizing your web content. JPEG, PNG, and GIF each have their strengths and weaknesses, and understanding their use cases will help you create visually appealing and efficient web pages.

Previous Image Attributes
Next Image Size and Alignment