Theory
Theory
Comments

PNG format

Unlike JPEG, PNG is a lossless compression format that allows you to save images that require special clarity. For example, it is great for screenshots of websites, drawings and printed text. The main feature of the PNG format is its support for transparency. In other words, you can set a custom degree of transparency for each pixel.

So, the PNG format is suitable for:

Images with transparency and translucency;
When you require the increased fidelity of full-color images;
For images with sharp color contrasts.

PNG is a relatively new format that was introduced as an alternative to the GIF format, which we will consider in the next step. Now let’s add a PNG image to the blog.

Please note that we will load some of the images from the img folder and the rest of the images from the files folder. For example:

<img src="img/raccoon.jpg">
<img src="files/portrait.png">

We decided to store the “interface” images in the img folder. Typically, these are images that are used to lay out the site. They can be repeated in many places within the website interface.

We decided to store the “content” images in the files folder. These are images that are typically used when filling the website with copy. The content manager can upload them to the website using the file manager. They can then be inserted into the content of individual pages.

It is useful to separate these resources. For example, we can prevent the manager from working with the img folder in order to prevent him from deleting some important interface images by mistake.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>The website of a beginning coder</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <p>Blog</p> <nav> <a href="index.html">Return to home</a> </nav> </header> <main> <article> <h1>Day Fourteen. A New Format</h1> <p>Yesterday, I discovered what image format is suitable for my avatar, and I added it to my blog. I really loved it. It’s so pretty. I decided to make a cheat sheet so that I would not forget what the other image formats are and what they are used for.</p> <p>Here we have the PNG format:</p>  <p>For example, we have such a format as JPEG:</p> <img src="files/instructor-muffin.jpg"> </article> <aside> Your ad could go here </aside> </main> <footer> Website footer </footer> </body> </html>

CSS

body { padding: 0 30px; font-size: 14px; line-height: 22px; font-family: "Georgia", serif; color: #222222; } h1 { font-size: 20px; line-height: normal; } aside { margin: 20px 0; color: #c4c4c4; } a[href] { color: #0099ef; text-decoration-line: underline; }

Goalscompleted

Insert the image with the address files/portrait.png to the blog entry.

PNG format

Comments

Log in

Sign up

Restore access