0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>Muffin is dissatisfied. He checked the website on his mobile phone while he was out catching mice (hey, even a successful businesscat deserves some down-time), and it took too long to render over his mobile network away from Wi-Fi. The website turned out to be sending a lot of data to his device. What happened? The problem is that we accidentally loaded the wrong image format. But let’s not get upset. Let’s see what formats exist and correct the format to an appropriate one.</p>
1
<p>Muffin is dissatisfied. He checked the website on his mobile phone while he was out catching mice (hey, even a successful businesscat deserves some down-time), and it took too long to render over his mobile network away from Wi-Fi. The website turned out to be sending a lot of data to his device. What happened? The problem is that we accidentally loaded the wrong image format. But let’s not get upset. Let’s see what formats exist and correct the format to an appropriate one.</p>
2
<p>There are quite a few formats. However, there are just four main ones: JPEG, PNG, SVG and GIF. Let’s learn more about them.</p>
2
<p>There are quite a few formats. However, there are just four main ones: JPEG, PNG, SVG and GIF. Let’s learn more about them.</p>
3
<p>In this step, we will take a closer look at the SVG format. SVG stands for “scalable vector graphics.” The quality of such images does not change when they are resized, and they also have a small file size. The SVG format is great for graphs, logos and icons that are not color intensive.</p>
3
<p>In this step, we will take a closer look at the SVG format. SVG stands for “scalable vector graphics.” The quality of such images does not change when they are resized, and they also have a small file size. The SVG format is great for graphs, logos and icons that are not color intensive.</p>
4
<p>SVG is somewhat similar to HTML: it is described in human readable text format. In other words, you can “code” SVG images manually.</p>
4
<p>SVG is somewhat similar to HTML: it is described in human readable text format. In other words, you can “code” SVG images manually.</p>
5
<p>The SVG format is suitable if:</p>
5
<p>The SVG format is suitable if:</p>
6
<ul><li>We need to be able to scale the image in a lossless fashion;</li>
6
<ul><li>We need to be able to scale the image in a lossless fashion;</li>
7
<li>We want to change the color of the image elements;</li>
7
<li>We want to change the color of the image elements;</li>
8
<li>We need to animate parts of the image.</li>
8
<li>We need to animate parts of the image.</li>
9
</ul><p>In the next steps, we will analyze the remaining formats, and now let’s add the avatar in the correct SVG format to our blog.</p>
9
</ul><p>In the next steps, we will analyze the remaining formats, and now let’s add the avatar in the correct SVG format to our blog.</p>