10-11-2018, 09:12 AM
Design faster web pages, part 1: Image compression
<div style="margin: 5px 5% 10px 5%;"><img src="http://www.sickgaming.net/blog/wp-content/uploads/2018/10/design-faster-web-pages-part-1-image-compression.jpg" width="781" height="731" title="" alt="" /></div><div><p>Lots of web developers want to achieve fast loading web pages. As more page views come from mobile devices, making websites look better on smaller screens using responsive design is just one side of the coin. <em>Browser Calories</em> can make the difference in loading times, which satisfies not just the user but search engines that rank on loading speed. This article series covers how to slim down your web pages with tools Fedora offers.</p>
<p><span id="more-20195"></span></p>
<h2>Preparation</h2>
<p>Before you sart to slim down your web pages, you need to identify the core issues. For this, you can use <a href="https://browserdiet.com/calories/" target="_blank" rel="noopener">Browserdiet</a>. It’s a browser add-on available for Firefox, Opera and Chrome and other browsers. It analyzes the performance values of the actual open web page, so you know where to start slimming down.</p>
<p>Next you’ll need some pages to work on. The example screenshot shows a test of <a href="http://getfedora.org">getfedora.org</a>. At first it looks very simple and responsive.</p>
<div id="attachment_20196" style="width: 791px" class="wp-caption aligncenter"><img class="wp-image-20196 size-full" src="http://www.sickgaming.net/blog/wp-content/uploads/2018/10/design-faster-web-pages-part-1-image-compression.jpg" alt="Browser Diet - values of getfedora.org" width="781" height="731" /></p>
<p class="wp-caption-text">Browser Diet – values of getfedora.org</p>
</div>
<p>However, BrowserDiet’s page analysis shows there are 1.8MB in files downloaded. Therefore, there’s some work to do!</p>
<h2><span id="result_box" class="short_text" lang="en">Web optimization<br />
</span></h2>
<p>There are over 281 KB of JavaScript files, 203 KB more in CSS files, and 1.2 MB in images. Start with the biggest issue — the images. The tool set you need for this is GIMP, ImageMagick, and optipng. You can easily install them using the following command:</p>
<pre>sudo dnf install gimp imagemagick optipng</pre>
<p>For example, take the <a href="http://www.sickgaming.net/blog/wp-content/uploads/2018/10/design-faster-web-pages-part-1-image-compression.png">following file</a> which is 6.4 KB:</p>
<p><img class="alignnone size-full" src="http://www.sickgaming.net/blog/wp-content/uploads/2018/10/design-faster-web-pages-part-1-image-compression.png" width="60" height="60" /></p>
<p>First, use the <em>file</em> command to get some basic information about this image:</p>
<pre>$ <strong>file cinnamon.png</strong> cinnamon.png: PNG image data, 60 x 60, 8-bit/color RGBA, non-interlaced </pre>
<p>The image — which is only in grey and white — is saved in 8-bit/color RGBA mode. That’s not as efficient as it could be.</p>
<p>Start GIMP so you can set a more appropriate color mode. Open <em>cinnamon.png</em> in GIMP. Then go to <em>Image>Mode</em> and set it to <em>greyscale</em>. Export the image as PNG with compression factor 9. All other settings in the export dialog should be the default.</p>
<pre>$ <strong>file cinnamon.png</strong> cinnamon.png: PNG image data, 60 x 60, 8-bit gray+alpha, non-interlaced </pre>
<p>The output shows the file’s now in <em>8bit gray+alpha</em> mode. The file size has shrunk from 6.4 KB to 2.8 KB. That’s already only 43.75% of the original size. But there’s more you can do!</p>
<p>You can also use the ImageMagick tool <em>identify</em> to provide more information about the image.</p>
<pre>$ <strong>identify cinnamon2.png</strong> cinnamon.png PNG 60x60 60x60+0+0 8-bit Grayscale Gray 2831B 0.000u 0:00.000</pre>
<p>This tells you the file is 2831 bytes. Jump back into GIMP, and export the file. In the export dialog disable the storing of the time stamp and the alpha channel color values to reduce this a little more. Now the <em>file</em> output shows:</p>
<pre>$ <strong>identify cinnamon.png</strong> cinnamon.png PNG 60x60 60x60+0+0 8-bit Grayscale Gray 2798B 0.000u 0:00.000</pre>
<p>Next, use <em>optipng</em> to losslessly optimize your PNG images. There are other tools that do similar things, including <strong>advdef</strong> (which is part of advancecomp), <strong>pngquant </strong>and<strong> pngcrush.</strong></p>
<p>Run<em> optipng</em> on your file. Note that this will replace your original:</p>
<pre>$ <strong>optipng -o7 cinnamon.png</strong> ** Processing: cinnamon.png 60x60 pixels, 2x8 bits/pixel, grayscale+alpha Reducing image to 8 bits/pixel, grayscale Input IDAT size = 2720 bytes Input file size = 2812 bytes Trying: zc = 9 zm = 8 zs = 0 f = 0 IDAT size = 1922 zc = 9 zm = 8 zs = 1 f = 0 IDAT size = 1920 Selecting parameters: zc = 9 zm = 8 zs = 1 f = 0 IDAT size = 1920 Output IDAT size = 1920 bytes (800 bytes decrease) Output file size = 2012 bytes (800 bytes = 28.45% decrease)</pre>
<p>The option <em>-o7</em> is the slowest to process, but provides the best end results. You’ve knocked 800 more bytes off the file size, which is now 2012 bytes.</p>
<p>To resize all of the PNGs in a directory, use this command:</p>
<pre>$ <strong>optipng -o7 -dir=<<em>directory></em> *.png</strong></pre>
<p>The option <em>-dir</em> lets you give a target directory for the output. If this option is not used, <em>optipng</em> would overwrite the original images.</p>
<h2>Choosing the right file format</h2>
<p>When it comes to pictures for the usage in the internet, you have the choice between:</p>
<ul>
<li><a href="https://en.wikipedia.org/wiki/JPEG">JPG or JPEG</a></li>
<li><a href="https://en.wikipedia.org/wiki/GIF">GIF</a></li>
<li><a href="https://en.wikipedia.org/wiki/Portable_Network_Graphics">PNG</a></li>
<li><a href="https://en.wikipedia.org/wiki/APNG">aPNG</a></li>
<li><a href="https://en.wikipedia.org/wiki/JPEG_2000">JPG-LS</a></li>
<li><a href="https://en.wikipedia.org/wiki/JPEG_2000">JPG 2000 or JP2</a></li>
<li><a href="https://en.wikipedia.org/wiki/Scalable_Vector_Graphics">SVG</a></li>
</ul>
<p>JPG-LS and JPG 2000 are not widely used. Only a few digital cameras support these formats, so they can be ignored. aPNG is an animated PNG, and not widely used either.</p>
<p>You could save a few bytes more through changing the compression rate or choosing another file format. The first option you can’t do in GIMP, as it’s already using the highest compression rate. As there are no <a href="https://www.webopedia.com/TERM/A/alpha_channel.html">alpha channels</a> in the picture, you can choose JPG as file format instead. For now use the default value of 90% quality — you could change it down to 85%, but then alias effects become visible. This saves a few bytes more:</p>
<pre>$ <strong>identify cinnamon.jpg</strong> cinnamon.jpg JPEG 60x60 60x60+0+0 8-bit sRGB 2676B 0.000u 0:00.000 </pre>
<p>Alone this conversion to the right color space and choosing JPG as file format brought down the file size from 23 KB to 12.3 KB, a reduction of nearly 50%.</p>
<h3>PNG vs. JPG: quality and compression rate</h3>
<p>So what about the rest of the images? This method would work for all the other pictures, except the Fedora “flavor” logos and the logos for the four foundations. Those are presented on a white background.</p>
<p>One of the main differences between PNG and JPG is that JPG has no alpha channel. Therefore it can’t handle <span id="result_box" class="short_text" lang="en">transparency</span>. If you rework these images by using a JPG on a white background, you can reduce the file size from 40.7 KB to 28.3 KB.</p>
<p>Now there are four more images you can rework: the backgrounds. For the grey background, set the mode to greyscale again. With this bigger picture, the savings also is bigger. It shrinks from 216.2 KB to 51.0 KB — it’s now barely 25% of its original size. All in all, you’ve shrunk 481.1 KB down to 191.5 KB — only 39.8% of the starting size.</p>
<h3>Quality vs. Quantity</h3>
<p>Another difference between PNG and JPG is the quality. PNG is a lossless compressed raster graphics format. But JPG loses size through compression, and thus affects quality. That doesn’t mean you shouldn’t use JPG, though. But you have to find a balance between file size and quality.</p>
<h2>Achievement</h2>
<p>This is the end of Part 1. After following the techniques described above, here are the results:</p>
<p><img class="aligncenter size-full wp-image-20205" src="http://www.sickgaming.net/blog/wp-content/uploads/2018/10/design-faster-web-pages-part-1-image-compression-1.jpg" alt="" width="781" height="731" /></p>
<p>You brought image size down to 488.9 KB versus 1.2MB at the start. That’s only about a third of the size, just through optimizing with <em>optipng</em>. This page can probably be made to load faster still. On the scale from snail to hypersonic, it’s not reached racing car speed yet!</p>
<p>Finally you can check the results in <a href="https://developers.google.com/speed/pagespeed/insights/?url=getfedora.org&tab=mobile">Google Insights</a>, for example:</p>
<p><img class="aligncenter size-full wp-image-20222" src="http://www.sickgaming.net/blog/wp-content/uploads/2018/10/design-faster-web-pages-part-1-image-compression-1.png" alt="" width="798" height="478" /></p>
<p>In the Mobile area the page gathered 10 points on scoring, but is still in the <em>Medium</em> sector. It looks totally different for the Desktop, which has gone from 62/100 to 91/100 and went up to <em>Good</em>. As mentioned before, this test isn’t the be all and end all. Consider scores such as these to help you go in the right direction. Keep in mind you’re optimizing for the user e<span id="result_box" class="short_text" lang="en">xperience,</span> and not for a search engine.</p>
</div>
<div style="margin: 5px 5% 10px 5%;"><img src="http://www.sickgaming.net/blog/wp-content/uploads/2018/10/design-faster-web-pages-part-1-image-compression.jpg" width="781" height="731" title="" alt="" /></div><div><p>Lots of web developers want to achieve fast loading web pages. As more page views come from mobile devices, making websites look better on smaller screens using responsive design is just one side of the coin. <em>Browser Calories</em> can make the difference in loading times, which satisfies not just the user but search engines that rank on loading speed. This article series covers how to slim down your web pages with tools Fedora offers.</p>
<p><span id="more-20195"></span></p>
<h2>Preparation</h2>
<p>Before you sart to slim down your web pages, you need to identify the core issues. For this, you can use <a href="https://browserdiet.com/calories/" target="_blank" rel="noopener">Browserdiet</a>. It’s a browser add-on available for Firefox, Opera and Chrome and other browsers. It analyzes the performance values of the actual open web page, so you know where to start slimming down.</p>
<p>Next you’ll need some pages to work on. The example screenshot shows a test of <a href="http://getfedora.org">getfedora.org</a>. At first it looks very simple and responsive.</p>
<div id="attachment_20196" style="width: 791px" class="wp-caption aligncenter"><img class="wp-image-20196 size-full" src="http://www.sickgaming.net/blog/wp-content/uploads/2018/10/design-faster-web-pages-part-1-image-compression.jpg" alt="Browser Diet - values of getfedora.org" width="781" height="731" /></p>
<p class="wp-caption-text">Browser Diet – values of getfedora.org</p>
</div>
<p>However, BrowserDiet’s page analysis shows there are 1.8MB in files downloaded. Therefore, there’s some work to do!</p>
<h2><span id="result_box" class="short_text" lang="en">Web optimization<br />
</span></h2>
<p>There are over 281 KB of JavaScript files, 203 KB more in CSS files, and 1.2 MB in images. Start with the biggest issue — the images. The tool set you need for this is GIMP, ImageMagick, and optipng. You can easily install them using the following command:</p>
<pre>sudo dnf install gimp imagemagick optipng</pre>
<p>For example, take the <a href="http://www.sickgaming.net/blog/wp-content/uploads/2018/10/design-faster-web-pages-part-1-image-compression.png">following file</a> which is 6.4 KB:</p>
<p><img class="alignnone size-full" src="http://www.sickgaming.net/blog/wp-content/uploads/2018/10/design-faster-web-pages-part-1-image-compression.png" width="60" height="60" /></p>
<p>First, use the <em>file</em> command to get some basic information about this image:</p>
<pre>$ <strong>file cinnamon.png</strong> cinnamon.png: PNG image data, 60 x 60, 8-bit/color RGBA, non-interlaced </pre>
<p>The image — which is only in grey and white — is saved in 8-bit/color RGBA mode. That’s not as efficient as it could be.</p>
<p>Start GIMP so you can set a more appropriate color mode. Open <em>cinnamon.png</em> in GIMP. Then go to <em>Image>Mode</em> and set it to <em>greyscale</em>. Export the image as PNG with compression factor 9. All other settings in the export dialog should be the default.</p>
<pre>$ <strong>file cinnamon.png</strong> cinnamon.png: PNG image data, 60 x 60, 8-bit gray+alpha, non-interlaced </pre>
<p>The output shows the file’s now in <em>8bit gray+alpha</em> mode. The file size has shrunk from 6.4 KB to 2.8 KB. That’s already only 43.75% of the original size. But there’s more you can do!</p>
<p>You can also use the ImageMagick tool <em>identify</em> to provide more information about the image.</p>
<pre>$ <strong>identify cinnamon2.png</strong> cinnamon.png PNG 60x60 60x60+0+0 8-bit Grayscale Gray 2831B 0.000u 0:00.000</pre>
<p>This tells you the file is 2831 bytes. Jump back into GIMP, and export the file. In the export dialog disable the storing of the time stamp and the alpha channel color values to reduce this a little more. Now the <em>file</em> output shows:</p>
<pre>$ <strong>identify cinnamon.png</strong> cinnamon.png PNG 60x60 60x60+0+0 8-bit Grayscale Gray 2798B 0.000u 0:00.000</pre>
<p>Next, use <em>optipng</em> to losslessly optimize your PNG images. There are other tools that do similar things, including <strong>advdef</strong> (which is part of advancecomp), <strong>pngquant </strong>and<strong> pngcrush.</strong></p>
<p>Run<em> optipng</em> on your file. Note that this will replace your original:</p>
<pre>$ <strong>optipng -o7 cinnamon.png</strong> ** Processing: cinnamon.png 60x60 pixels, 2x8 bits/pixel, grayscale+alpha Reducing image to 8 bits/pixel, grayscale Input IDAT size = 2720 bytes Input file size = 2812 bytes Trying: zc = 9 zm = 8 zs = 0 f = 0 IDAT size = 1922 zc = 9 zm = 8 zs = 1 f = 0 IDAT size = 1920 Selecting parameters: zc = 9 zm = 8 zs = 1 f = 0 IDAT size = 1920 Output IDAT size = 1920 bytes (800 bytes decrease) Output file size = 2012 bytes (800 bytes = 28.45% decrease)</pre>
<p>The option <em>-o7</em> is the slowest to process, but provides the best end results. You’ve knocked 800 more bytes off the file size, which is now 2012 bytes.</p>
<p>To resize all of the PNGs in a directory, use this command:</p>
<pre>$ <strong>optipng -o7 -dir=<<em>directory></em> *.png</strong></pre>
<p>The option <em>-dir</em> lets you give a target directory for the output. If this option is not used, <em>optipng</em> would overwrite the original images.</p>
<h2>Choosing the right file format</h2>
<p>When it comes to pictures for the usage in the internet, you have the choice between:</p>
<ul>
<li><a href="https://en.wikipedia.org/wiki/JPEG">JPG or JPEG</a></li>
<li><a href="https://en.wikipedia.org/wiki/GIF">GIF</a></li>
<li><a href="https://en.wikipedia.org/wiki/Portable_Network_Graphics">PNG</a></li>
<li><a href="https://en.wikipedia.org/wiki/APNG">aPNG</a></li>
<li><a href="https://en.wikipedia.org/wiki/JPEG_2000">JPG-LS</a></li>
<li><a href="https://en.wikipedia.org/wiki/JPEG_2000">JPG 2000 or JP2</a></li>
<li><a href="https://en.wikipedia.org/wiki/Scalable_Vector_Graphics">SVG</a></li>
</ul>
<p>JPG-LS and JPG 2000 are not widely used. Only a few digital cameras support these formats, so they can be ignored. aPNG is an animated PNG, and not widely used either.</p>
<p>You could save a few bytes more through changing the compression rate or choosing another file format. The first option you can’t do in GIMP, as it’s already using the highest compression rate. As there are no <a href="https://www.webopedia.com/TERM/A/alpha_channel.html">alpha channels</a> in the picture, you can choose JPG as file format instead. For now use the default value of 90% quality — you could change it down to 85%, but then alias effects become visible. This saves a few bytes more:</p>
<pre>$ <strong>identify cinnamon.jpg</strong> cinnamon.jpg JPEG 60x60 60x60+0+0 8-bit sRGB 2676B 0.000u 0:00.000 </pre>
<p>Alone this conversion to the right color space and choosing JPG as file format brought down the file size from 23 KB to 12.3 KB, a reduction of nearly 50%.</p>
<h3>PNG vs. JPG: quality and compression rate</h3>
<p>So what about the rest of the images? This method would work for all the other pictures, except the Fedora “flavor” logos and the logos for the four foundations. Those are presented on a white background.</p>
<p>One of the main differences between PNG and JPG is that JPG has no alpha channel. Therefore it can’t handle <span id="result_box" class="short_text" lang="en">transparency</span>. If you rework these images by using a JPG on a white background, you can reduce the file size from 40.7 KB to 28.3 KB.</p>
<p>Now there are four more images you can rework: the backgrounds. For the grey background, set the mode to greyscale again. With this bigger picture, the savings also is bigger. It shrinks from 216.2 KB to 51.0 KB — it’s now barely 25% of its original size. All in all, you’ve shrunk 481.1 KB down to 191.5 KB — only 39.8% of the starting size.</p>
<h3>Quality vs. Quantity</h3>
<p>Another difference between PNG and JPG is the quality. PNG is a lossless compressed raster graphics format. But JPG loses size through compression, and thus affects quality. That doesn’t mean you shouldn’t use JPG, though. But you have to find a balance between file size and quality.</p>
<h2>Achievement</h2>
<p>This is the end of Part 1. After following the techniques described above, here are the results:</p>
<p><img class="aligncenter size-full wp-image-20205" src="http://www.sickgaming.net/blog/wp-content/uploads/2018/10/design-faster-web-pages-part-1-image-compression-1.jpg" alt="" width="781" height="731" /></p>
<p>You brought image size down to 488.9 KB versus 1.2MB at the start. That’s only about a third of the size, just through optimizing with <em>optipng</em>. This page can probably be made to load faster still. On the scale from snail to hypersonic, it’s not reached racing car speed yet!</p>
<p>Finally you can check the results in <a href="https://developers.google.com/speed/pagespeed/insights/?url=getfedora.org&tab=mobile">Google Insights</a>, for example:</p>
<p><img class="aligncenter size-full wp-image-20222" src="http://www.sickgaming.net/blog/wp-content/uploads/2018/10/design-faster-web-pages-part-1-image-compression-1.png" alt="" width="798" height="478" /></p>
<p>In the Mobile area the page gathered 10 points on scoring, but is still in the <em>Medium</em> sector. It looks totally different for the Desktop, which has gone from 62/100 to 91/100 and went up to <em>Good</em>. As mentioned before, this test isn’t the be all and end all. Consider scores such as these to help you go in the right direction. Keep in mind you’re optimizing for the user e<span id="result_box" class="short_text" lang="en">xperience,</span> and not for a search engine.</p>
</div>