Theory
Theory
Comments

JPEG format

In the next few assignments, we’ll take a look at the most common image formats for the web. And we will figure out where and how they can best be used for creating a layout.

The first format is JPEG. This format is well suited for photos and images, and it is poorly suited for diagrams, drawings, text, and graphics.

When saving an image in JPEG format, you can set the quality level. This allows you to reduce the file size while still retaining fairly good image quality.

However, if you set the quality level too low, artifacts will appear.

JPEG does not support transparency, so a JPEG image is always a rectangle. You can simulate transparency by setting the background color of the image in the graphics editor to match the contents of the photo container.

Use JPEG for posting photos, since it provides the best file size/quality ratio.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JPEG format</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="box box1"> <div class="block"></div> </div> <div class="box box2"> <div class="block"></div> </div> <div class="box box3"> <div class="block"></div> </div> </body> </html>

CSS

.box { width: 300px; height: 140px; margin: 20px auto; box-shadow: 1px 1px 3px #999999; } .box1 { background-color: #2ecc71; } .box2 { background-color: #f1c40f; } .box3 { background-image: linear-gradient(to bottom, #2ecc71, #f1c40f); } .block { height: 134px; background-repeat: no-repeat; background-position: 50% 50%; }

Goalscompleted

First set the background image cat_cage.jpg to the elements with the class block.
Then assign a different lower quality image cat_cage_low.jpg to them.

JPEG format

Comments

Log in

Sign up

Restore access