diff options
Diffstat (limited to 'content/bandwidth.md')
| -rw-r--r-- | content/bandwidth.md | 88 |
1 files changed, 88 insertions, 0 deletions
diff --git a/content/bandwidth.md b/content/bandwidth.md new file mode 100644 index 0000000..2313524 --- /dev/null +++ b/content/bandwidth.md @@ -0,0 +1,88 @@ +--- +title: "Loading Fast and Saving Bandwidth" +draft: true +--- +## Images + +Image files will usually have the most impact on the speed of your +websites (aside from Ad/tracker scripts). Learn to slim down your images +using the ubiquitous *ImageMagick* to make your websites faster on slow +internet connections. + + + +There are some rules of thumb to keep in mind with images: + +1. Only use images as large as you need on the webpage. +2. Use the proper containers. E.g. a photograph should never be a + `.png`, but a `.jpg`, or even better, a `.webp`. +3. Where it will not be visible, reduce image quality. + +### webp vs. png vs. svg + +`png` images are best for accurately recording images **without color +gradients**. A `png` photograph will be massive in size, but a `png` +cartoon without color + +#### An imagemagick experiment + +We can illustrate this difference with imagemagick. Run the following +two commands. They will create two png files containing nothing by the +color red. The first will create a 100x100 pixel image, and the second +will create a massive 10,000x10,000 image. (The second command will take +a few seconds to finish.) + + magick -size 100x100 canvas:red red-small.png + magick -size 10000x10000 canvas:red red-large.png + +Once we\'ve done that, let\'s rerun the same commands, except for let\'s +output them into `jpg` containers: + + magick -size 100x100 canvas:red red-small.jpg + magick -size 10000x10000 canvas:red red-large.jpg + +Once we\'ve run all those commands, you will see that `red-large.jpg` is +a massive 1.2M, while `red-large.png`, despite still being 10,000 square +pixels like the jpg, is a mere 13K in filesize. + +------------------------------------------------------------------------ + +For the examples, I decided to use +[this](https://commons.wikimedia.org/wiki/File:Tabby_cat_with_blue_eyes-3336579.jpg) +public domain image. + +{style="width: 50%;"} + +There are many ways to decrease image size using ImageMagick, the +simplest is to use the `-quality` option, which will compress the image +without changing the resolution. This option takes the value you want to +compress by (between 1 and 100, the lower the value, the lower the file +size). For example: + + convert in.jpg -quality 50 out.jpg + +Compressing the example image above results in the following file size +changes: + + Quality Size + ---------- ------ + Original 2.1M + 90 1.7M + 80 844K + 70 588K + 60 448K + 50 368K + 40 308K + 30 248K + 20 184K + 10 116K + +Due to the images high resolution, it is usable in this website even +when highly compressed (30% quality, still looks decent in my opinion). + +## Contribution + +- [Musse](https://na20a.neocities.org/) +- Monero: + `83is3y69Xv4fkFsTpZhw5c3bfxtimupfgTdpERHM1WtMNAwSqFjTCJm3VabyBKXKnL873dWPmqj4bRcgkm9oCktgQrzmhHd`{.crypto} |