Search
Search Icon Icon to open search Tuning the Blog Last updated
May 6, 2023
While the development of the game is underway, we want to share our newest developments to this blog.
As you know, this blog is based on
Quartz , which is based on
Hugo .
Hugo is one of the fastest frameworks for static sites, and our site was scoring 93 out of a 100 on the
Google Lighthouse performance rating.
One diagnostic point Lighthouse had mentioned was, that pictures were shipped in many formats (.svg, .webp, .jpeg) instead of using the optimized .webp format.
As we delivered our blog through a
Github Actions-Pipeline , we thought of an additional step, to automatically convert all images in the images-folder, to be converted into .webp
We implemented the following step:
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
convert_images :
runs-on : ubuntu-20.04
steps :
- name : Checkout repository
uses : actions/checkout@v2
with :
ref : "hugo"
- name : Save original Markdown files
uses : actions/upload-artifact@v2
with :
name : original-markdown-files
path : content/
if-no-files-found : error
- name : Install ImageMagick
run : sudo apt-get install -y imagemagick
- name : Convert png to WebP
continue-on-error : true
run : |
if ls content/notes/images/*.webp 1> /dev/null 2>&1; then
for file in content/notes/images/*.webp; do
convert "$file" "${file%.*}.webp"
rm "$file"
find content -path content/notes/.obsidian -prune -o -name '*.md' -type f -print0 | xargs -0 sed -i 's/\.\(png\)/.webp/g'
done
fi
- name : Convert jpg to WebP
continue-on-error : true
run : |
if ls content/notes/images/*.webp 1> /dev/null 2>&1; then
for file in content/notes/images/*.webp; do
convert "$file" "${file%.*}.webp"
rm "$file"
find content -path content/notes/.obsidian -prune -o -name '*.md' -type f -print0 | xargs -0 sed -i 's/\.\(jpg\)/.webp/g'
done
fi
- name : Convert jpeg to WebP
continue-on-error : true
run : |
if ls content/notes/images/*.jpeg 1> /dev/null 2>&1; then
for file in content/notes/images/*.jpeg; do
convert "$file" "${file%.*}.webp"
rm "$file"
find content -path content/notes/.obsidian -prune -o -name '*.md' -type f -print0 | xargs -0 sed -i 's/\.\(jpeg\)/.webp/g'
done
fi
- name : Convert svg to WebP
continue-on-error : true
run : |
if ls content/notes/images/*.svg 1> /dev/null 2>&1; then
for file in content/notes/images/*.svg; do
convert "$file" "${file%.*}.webp"
rm "$file"
find content -path content/notes/.obsidian -prune -o -name '*.md' -type f -print0 | xargs -0 sed -i 's/\.\(svg\)/.webp/g'
done
fi
- name : Commit changes
uses : stefanzweifel/[email protected]
with :
commit_message : "Convert images to WebP format"
- name : Save converted Markdown files
uses : actions/upload-artifact@v2
with :
name : converted-markdown-files
path : content/notes/
if-no-files-found : ignore
Full Source
Now, all images, we use, are converted into .webp and the references in the markdown files are automatically changed as well.
Now we reach the following Lighthouse Score:
