Theory
Theory

JPEG format

In the next few tasks, we will look at the most common image formats for the web. And we will understand where and how best to use them when creating web pages.

The first format is JPEG. This format is good for photos and bad for schematics, drawings and text.

When saving an image to JPEG format, you can set the quality level. This allows you to reduce the file size while maintaining a good enough 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 image to the same background color as container in your image editor.

Use JPEG to post photos with 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, give elements with class block background image cat_cage.jpg.
Then give them another background image of lower quality cat_cage_low.jpg.