1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
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}
|
