0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>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.</p>
1
<p>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.</p>
2
<p>So, the PNG format is suitable for:</p>
2
<p>So, the PNG format is suitable for:</p>
3
<ul><li>Images with transparency and translucency;</li>
3
<ul><li>Images with transparency and translucency;</li>
4
<li>When you require the increased fidelity of full-color images;</li>
4
<li>When you require the increased fidelity of full-color images;</li>
5
<li>For images with sharp color contrasts.</li>
5
<li>For images with sharp color contrasts.</li>
6
</ul><p>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.</p>
6
</ul><p>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.</p>
7
<p>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:</p>
7
<p>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:</p>
8
<img src="img/raccoon.jpg"> <img src="files/portrait.png"><p>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<em>interface</em>.</p>
8
<img src="img/raccoon.jpg"> <img src="files/portrait.png"><p>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<em>interface</em>.</p>
9
<p>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<em>content</em>of individual pages.</p>
9
<p>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<em>content</em>of individual pages.</p>
10
<p>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.</p>
10
<p>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.</p>