Common Image Formats in HTML

Learn about the most used image formats in HTML, such as JPG, PNG, GIF, and SVG, and when it is appropriate to use each one.

Choosing the Right Image Format

Not all images are the same! Choosing the right format (like JPG, PNG, or SVG) can dramatically improve your website's performance and quality. Let's learn the differences.

JPEG (.jpg)

Best for photographs and complex images with a wide range of colors. It uses lossy compression to keep file sizes small, which is great for page load speed.

PNG (.png)

Perfect for images that require a transparent background, like logos or icons. It uses lossless compression, which preserves quality but results in larger file sizes than JPG.

GIF (.gif)

Ideal for simple animations and images with a limited color palette. Not suitable for high-quality photos.

SVG (.svg)

Used for vector graphics. SVGs are XML-based, meaning they are scalable to any size without losing quality and are typically very lightweight. Perfect for logos and illustrations.

Practice Zone

Interactive Test 1: Match the Format

Arrastra en el orden correspondiente.

Arrastra las opciones:

png

svg

jpg

gif

Completa el código:

Photography: ______

Transparency: ______

Vectors: ______

Animations: ______

Interactive Test 2: Fill in the Blanks

Rellena los huecos en cada casilla.

<img src="photo.">
<img src="logo.">

Practice Example: Code Editor

Display an image called `my_photo.jpg` with appropriate alternative text.

* Write the code below. Correct characters will be shown in green and incorrect ones in red.

<img src="my_photo.jpg" alt="A photo of me">

Knowledge Check

Which image format is best for a logo with a transparent background?

Bootcamp Challenge

Enunciado:

Images in HTML are added with the <img> tag, which has the following important attributes:

src: Specifies the URL of the image to be displayed.
alt: Provides alternative text in case the image does not load or to improve accessibility.
width: Controls the size of the image in pixels.

In this example, we have inserted three images using example URLs https://via.placeholder.com/400 to show how images are added within the web page. The alt attribute provides a description of the image, and the width attribute sets a fixed width of 400 pixels.

* Escribe el código a continuación. Los caracteres correctos se mostrarán en verde y los incorrectos en rojo.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>My Portfolio - Images</title>
    </head>
    <body>
        <div>
            <h1>Welcome to My Portfolio</h1>
            <p>Hi, I'm [Your Name]. A passionate web developer.</p>
        </div>
        <div>
            <h2>Image Gallery</h2>
            <p>Below, you can see some of my images:</p>
            <img src="https://via.placeholder.com/400" alt="Image 1" width="400" />
            <img src="https://via.placeholder.com/400" alt="Image 2" width="400" />
            <img src="https://via.placeholder.com/400" alt="Image 3" width="400" />
        </div>
        <div>
            <h2>My Skills</h2>
            <p>Below, you will find a list of my web development skills:</p>
            <ul>
                <li>HTML</li>
                <li>CSS</li>
                <li>JavaScript</li>
            </ul>
            <p>Also, here is a list of steps to create a basic website:</p>
            <ol>
                <li>Write the HTML code.</li>
                <li>Style with CSS.</li>
                <li>Add interactivity with JavaScript.</li>
            </ol>
        </div>
        <div>
            <h2>My Social Networks</h2>
            <p>Connect with me on:</p>
            <a href="https://www.linkedin.com" target="_blank">LinkedIn</a>
            <a href="https://github.com" target="_blank">GitHub</a>
            <a href="https://twitter.com" target="_blank">Twitter</a>
        </div>
        <div>
            <p>&copy; 2025 My Portfolio. All rights reserved.</p>
        </div>
    </body>
    </html>
        

Common Image Formats in HTML

Choosing the Right Image Format

JPEG (.jpg)

PNG (.png)

GIF (.gif)

SVG (.svg)

Practice Zone

Interactive Test 1: Match the Format

Arrastra las opciones:

Completa el código:

Interactive Test 2: Fill in the Blanks

Practice Example: Code Editor

Knowledge Check

Bootcamp Challenge

Enunciado:

HTML Elements Reference

Intro HTML

HTML Text Formating and Tags

HTML Document Structure

HTML Headings and Title

HTML Lists

HTML Tables

HTML Forms and Input Elements

HTML Meta and SEO

HTML Media Elements

HTML Multimedia Attributes

HTML Other Elements