diff --git a/README.md b/README.md index 72ef9415c..df88e98d1 100644 --- a/README.md +++ b/README.md @@ -14,3 +14,26 @@ * for production builds simply run `npm run build` * for local development run `npm run dev` * for local production tests `npm run serve` + +## Optional Dependencies for Size Optimizations + +### Font Subsets +To create subsets of font files, e.g. when we know only very few characters are required to render the title of the page "CRYPTOMATOR HUB": + +1. First install `pip install fonttools brotli` +2. `pyftsubset quicksand-bold.woff2 --text="CRYPTOMATOR HUB" --verbose --flavor=woff2 --output-file=quicksand-bold.reduced.woff2` + +### Image Conversions +Using WebP (for smaller images) or AVIF (for >80 kiB due to larger overhead) may yield in better compression. [Here](https://www.reddit.com/r/AV1/comments/aabqdc/lossless_compression_test_png_vs_webp_vs_avif/) is a (rather old) comparison benchmark. However, we need to test the best format ourselves. + +* `brew install libavif` (see [GitHub Project Page](https://github.com/AOMediaCodec/libavif?tab=readme-ov-file#installation) for other installation methods) + * Example (lossless): `avifenc -l input.png output.avif` + * Example (lossy): `avifenc --qcolor 70 --qalpha 100 --depth 8 input.png output.avif` +* `brew install libwebm` + * Example (lossless): `cwebp -preset drawing -lossless -z 6 input.png -o output.webp` + * Example (lossy): `cwebp -preset drawing -q 90 -alpha_q 100 input.png -o output.webp` +* `brew install optipng` + * Example: `optipng -o3 image.png` + +> [!TIP] +> If you see color banding in lossy conversions, try avif with 10 bit color depth. diff --git a/assets/css/custom.css b/assets/css/custom.css index 0e763bad4..4e453a054 100644 --- a/assets/css/custom.css +++ b/assets/css/custom.css @@ -1,6 +1,6 @@ /* custom classes: */ .header-bg { - background-image: url(/img/home/header-background.png), linear-gradient(to bottom, #0b0f17 0%, #143454 38%, #3f8bd9 72%, #9ac7f5 90%); + background-image: url(/img/home/header-background.avif), linear-gradient(to bottom, #0b0f17 0%, #143454 38%, #3f8bd9 72%, #9ac7f5 90%); background-size: auto 100%; } diff --git a/content/_index.de.html b/content/_index.de.html index 5f16dda04..9e9479b2a 100644 --- a/content/_index.de.html +++ b/content/_index.de.html @@ -69,7 +69,7 @@

Wie schützt Cryptomator deine Daten?

Optimaler Schutz dank neuesten Technologie-Standards

- Gegenüberstellung von verschlüsselten und entschlüsselten Daten in einem Cryptomator-Tresor + Gegenüberstellung von verschlüsselten und entschlüsselten Daten in einem Cryptomator-Tresor
Schaut jemand in den Ordner in deiner Cloud, kann er keinerlei Rückschlüsse auf deine Daten ziehen.
diff --git a/content/_index.en.html b/content/_index.en.html index 4168a5cad..3f5f7b8ac 100644 --- a/content/_index.en.html +++ b/content/_index.en.html @@ -69,7 +69,7 @@

How does Cryptomator protect your data?

Optimal protection thanks to the latest technology standards

- Comparison of encrypted and decrypted data in a Cryptomator vault + Comparison of encrypted and decrypted data in a Cryptomator vault
If someone looks into the folder in your cloud, they cannot draw any conclusions about your data.
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 3767368e9..39cfbfea0 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -4,6 +4,13 @@ {{ .Title }} + {{ block "preloads" . }} + + {{ end }} + + + + {{ if and (eq .Section "blog") .IsPage }} @@ -62,9 +69,6 @@ {{ range .Translations }} {{ end }} - {{ block "head" . }} - - {{ end }} {{ partial "nav.html" . }} diff --git a/layouts/donate-thanks/single.html b/layouts/donate-thanks/single.html index b69579bcd..3b0d6d383 100644 --- a/layouts/donate-thanks/single.html +++ b/layouts/donate-thanks/single.html @@ -1,7 +1,7 @@ {{ define "main" }}
- Cryptomator Logo + Cryptomator Logo

{{ .Title }}

{{ .Content }}
diff --git a/layouts/downloads/list.html b/layouts/downloads/list.html index 7872c449d..44c919b67 100644 --- a/layouts/downloads/list.html +++ b/layouts/downloads/list.html @@ -1,4 +1,4 @@ -{{ define "head" }} +{{ define "preloads" }} {{ end }} {{ define "main" }} diff --git a/layouts/downloads/single.html b/layouts/downloads/single.html index 06e6e87a8..267e96f0f 100644 --- a/layouts/downloads/single.html +++ b/layouts/downloads/single.html @@ -1,4 +1,4 @@ -{{ define "head" }} +{{ define "preloads" }} {{ end }} {{ define "main" }} diff --git a/layouts/hub/single.html b/layouts/hub/single.html index 2d6a5feb7..09d5abc28 100644 --- a/layouts/hub/single.html +++ b/layouts/hub/single.html @@ -6,7 +6,7 @@
- Logo + Logo CRYPTOMATOR HUB

{{ i18n "hub_header_title" . | safeHTML }}

diff --git a/layouts/index.html b/layouts/index.html index 8445dc80a..f470bfbfb 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,5 +1,13 @@ -{{ define "head" }} +{{ define "preloads" }} + + + + + + + + {{ end }} {{ define "main" }}
@@ -36,7 +44,7 @@

- + CRYPTOMATOR

@@ -74,7 +82,7 @@

- + CRYPTOMATOR HUB

diff --git a/layouts/partials/nav.html b/layouts/partials/nav.html index 882d4e193..97ca4f36f 100644 --- a/layouts/partials/nav.html +++ b/layouts/partials/nav.html @@ -13,7 +13,7 @@ - Logo + Logo CRYPTOMATOR diff --git a/static/de/img/home/split-screenshots.avif b/static/de/img/home/split-screenshots.avif new file mode 100644 index 000000000..903f834ab Binary files /dev/null and b/static/de/img/home/split-screenshots.avif differ diff --git a/static/img/home/header-background.avif b/static/img/home/header-background.avif new file mode 100644 index 000000000..9225d40aa Binary files /dev/null and b/static/img/home/header-background.avif differ diff --git a/static/img/home/split-screenshots.avif b/static/img/home/split-screenshots.avif new file mode 100644 index 000000000..e508863d8 Binary files /dev/null and b/static/img/home/split-screenshots.avif differ