Theory
Theory
Comments

The PNG-8 Format

In fact, there is just one PNG format. PNG-8 and PNG-24 are its subtypes. There are also various save modes in Photoshop. We will not delve deep into details, but we will cover the standard features.

PNG-8 has characteristics that are similar to the GIF format. It works well for diagrams, drawings, graphs, and text, as well as for images where there are few colors. It supports a maximum of 256 colors.

PNG-8, like GIF, supports transparency. This means that the pixel is either completely transparent or completely opaque.

If you need to make an image with transparency, then it is better to set the outline to the same color as the background color. In Photoshop, when you save the outline, choose the “Matte” option. If you do not include an outline, your image with look nibbled away around the edges. If the background is not uniform (such as if it is a gradient, as in block 3 in the mini-browser), then a PNG-8 with an outline will look bad.

Why is PNG better than GIF? PNG is a more modern and open-source format, whereas GIF is older and more proprietary (it can be expensive to use). The compression level, quality, and other characteristics are about the same, so it’s best to always use PNG.

index.html
style.css

HTML

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

Set the background image cat_cage_8.png to the elements with the class block.
Then assign them the other image cat_cage_8_no_mate.png without an outline.

The PNG-8 Format

Comments

Log in

Sign up

Restore access