Image formats

Intro

Different image formats have different properties. Two common formats are jpg and png. The main difference between jpg files and png files is that png files support transparent backgrounds, while jpg files do not. We’ll see this difference in the following exercise.

Steps

JPG Image

The file below is a jpg image. Right click the image below and open it in a new tab. In the new tab, right click and save the image as circle.jpg in your images folder.

PNG Image

The file below is a png image. Right click the image below and open it in a new tab. In the new tab, right click and save the image as circle.png in your images folder.

Add image elements

Now add two more image elements after the first image element. Type circle.jpg for the first src value and circle.png for the second value.

<img src="laptop.jpeg" alt="Laptop on desk">
<img src="circle.jpg" alt="">
<img src="circle.png" alt="">

Check preview

If you check the preview, both images should look pretty much identical. The difference is that the png image has a transparent background. To demonstrate this, add this CSS rule for the body element to the end of the style element:

<style>
  img {
    max-width: 100%;
  }

  body {
    background-color: red;
  }
</style>

If you check the preview, you should see the background color for the whole page turn red. However, you’ll notice the first circle image still has a white background, since it’s a jpg file, while the second image does not. The area around the second circle should be red. This is because it has a transparent background.

Final code

Here is the full style element code.

<style>
  img {
    max-width: 100%;
  }

  body {
    background-color: red;
  }
</style>

<img src="laptop.jpeg" alt="Laptop on desk">
<img src="circle.jpg" alt="">
<img src="circle.png" alt="">