Theory
Theory
Comments

PNG format

Unlike JPEG, PNG uses lossless compression, preserving the image’s detail. This makes it useful for website screenshots, drawings and images of 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 or translucency;
full-color images whose detail must be preserved;
images with sharp color boundaries.

PNG was introduced as an alternative to GIF, which we’ll explore in the next step. For 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 store “content” images in the files folder. These images illustrate individual pages and blog entries. A content manager can upload them using the file manager and then insert them into the relevant page content.

Keeping these resources separate is useful. For example, we can restrict the content manager’s access to the img folder to avoid accidental deletion of important interface images.

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 found the right format for my avatar and added the image to my blog. I love how it looks! I decided to make a cheat sheet to remember the other image formats and what each one is used for.</p> <p>Here is a PNG image:</p>  <p>For example, here is a JPEG image:</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 into the blog entry.

PNG format

Comments

Log in

Sign up

Restore access