Theory
Theory
Comments

PNG-24 format

PNG-24 is a great format. It is well suited for diagrams, drawings, graphs, text, as well as for complex multi-color images, since it supports an almost unlimited number of colors.

For photos, it is usually inferior to JPEG in terms of file size, but superior in terms of image quality. But sometimes the difference in file size is so insignificant that there is no reason not to go with PNG.

The main plus of PNG-24 is that it has full support for semi-transparency, which is not available in any other format. Therefore, when you in your web development work need to lay out complex backgrounds, graphic elements with complex shadows, and so on, there is simply no alternative to PNG-24.

A long time ago, IE had a problem with semi-transparent PNG support, but there are no such problems in later versions of IE (8+).

Compare the PNG-8 of a cat with outline from the previous assignment with the PNG-24 of a cat from this assignment. Pay particular attention to how their edges look against the yellow and gradient blocks.

Some layout designers are opting to discontinue using PNG-8 in favor of using only PNG-24 instead.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>PNG-24 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

Assign the background image cat_cage.png to the elements with the class block.

PNG-24 format

Comments

Log in

Sign up

Restore access