diff --git a/website/src/components/landing.js b/website/src/components/landing.js
index 084587b74..e7c671d7d 100644
--- a/website/src/components/landing.js
+++ b/website/src/components/landing.js
@@ -1,12 +1,12 @@
 import React from 'react'
 import classNames from 'classnames'
 
-import patternDefault from '../images/pattern_blue.jpg'
-import patternNightly from '../images/pattern_nightly.jpg'
-import patternLegacy from '../images/pattern_legacy.jpg'
-import overlayDefault from '../images/pattern_landing.jpg'
-import overlayNightly from '../images/pattern_landing_nightly.jpg'
-import overlayLegacy from '../images/pattern_landing_legacy.jpg'
+import patternDefault from '../images/pattern_blue.png'
+import patternNightly from '../images/pattern_nightly.png'
+import patternLegacy from '../images/pattern_legacy.png'
+import overlayDefault from '../images/pattern_landing.png'
+import overlayNightly from '../images/pattern_landing_nightly.png'
+import overlayLegacy from '../images/pattern_landing_legacy.png'
 
 import Grid from './grid'
 import { Content } from './main'
diff --git a/website/src/components/main.js b/website/src/components/main.js
index da7ab08ed..411423ba6 100644
--- a/website/src/components/main.js
+++ b/website/src/components/main.js
@@ -2,11 +2,11 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import patternBlue from '../images/pattern_blue.jpg'
-import patternGreen from '../images/pattern_green.jpg'
-import patternPurple from '../images/pattern_purple.jpg'
-import patternNightly from '../images/pattern_nightly.jpg'
-import patternLegacy from '../images/pattern_legacy.jpg'
+import patternBlue from '../images/pattern_blue.png'
+import patternGreen from '../images/pattern_green.png'
+import patternPurple from '../images/pattern_purple.png'
+import patternNightly from '../images/pattern_nightly.png'
+import patternLegacy from '../images/pattern_legacy.png'
 import classes from '../styles/main.module.sass'
 
 const patterns = {
diff --git a/website/src/images/pattern_blue.jpg b/website/src/images/pattern_blue.jpg
deleted file mode 100644
index 78153b9f8..000000000
Binary files a/website/src/images/pattern_blue.jpg and /dev/null differ
diff --git a/website/src/images/pattern_blue.png b/website/src/images/pattern_blue.png
new file mode 100644
index 000000000..fa28b0993
Binary files /dev/null and b/website/src/images/pattern_blue.png differ
diff --git a/website/src/images/pattern_green.jpg b/website/src/images/pattern_green.jpg
deleted file mode 100644
index 106541693..000000000
Binary files a/website/src/images/pattern_green.jpg and /dev/null differ
diff --git a/website/src/images/pattern_green.png b/website/src/images/pattern_green.png
new file mode 100644
index 000000000..ab665f2db
Binary files /dev/null and b/website/src/images/pattern_green.png differ
diff --git a/website/src/images/pattern_landing.jpg b/website/src/images/pattern_landing.jpg
deleted file mode 100644
index cdd1d23a7..000000000
Binary files a/website/src/images/pattern_landing.jpg and /dev/null differ
diff --git a/website/src/images/pattern_landing.png b/website/src/images/pattern_landing.png
new file mode 100644
index 000000000..43a8d9c6e
Binary files /dev/null and b/website/src/images/pattern_landing.png differ
diff --git a/website/src/images/pattern_landing_legacy.jpg b/website/src/images/pattern_landing_legacy.jpg
deleted file mode 100644
index 846b7b2c7..000000000
Binary files a/website/src/images/pattern_landing_legacy.jpg and /dev/null differ
diff --git a/website/src/images/pattern_landing_legacy.png b/website/src/images/pattern_landing_legacy.png
new file mode 100644
index 000000000..d4895e269
Binary files /dev/null and b/website/src/images/pattern_landing_legacy.png differ
diff --git a/website/src/images/pattern_landing_nightly.jpg b/website/src/images/pattern_landing_nightly.jpg
deleted file mode 100644
index 6ff0d574d..000000000
Binary files a/website/src/images/pattern_landing_nightly.jpg and /dev/null differ
diff --git a/website/src/images/pattern_landing_nightly.png b/website/src/images/pattern_landing_nightly.png
new file mode 100644
index 000000000..904cb3562
Binary files /dev/null and b/website/src/images/pattern_landing_nightly.png differ
diff --git a/website/src/images/pattern_legacy.jpg b/website/src/images/pattern_legacy.jpg
deleted file mode 100644
index 2d2e112f4..000000000
Binary files a/website/src/images/pattern_legacy.jpg and /dev/null differ
diff --git a/website/src/images/pattern_legacy.png b/website/src/images/pattern_legacy.png
new file mode 100644
index 000000000..90ea3c53e
Binary files /dev/null and b/website/src/images/pattern_legacy.png differ
diff --git a/website/src/images/pattern_nightly.jpg b/website/src/images/pattern_nightly.jpg
deleted file mode 100644
index a3fadd87b..000000000
Binary files a/website/src/images/pattern_nightly.jpg and /dev/null differ
diff --git a/website/src/images/pattern_nightly.png b/website/src/images/pattern_nightly.png
new file mode 100644
index 000000000..202fdc0d2
Binary files /dev/null and b/website/src/images/pattern_nightly.png differ
diff --git a/website/src/images/pattern_purple.jpg b/website/src/images/pattern_purple.jpg
deleted file mode 100644
index 3be869694..000000000
Binary files a/website/src/images/pattern_purple.jpg and /dev/null differ
diff --git a/website/src/images/pattern_purple.png b/website/src/images/pattern_purple.png
new file mode 100644
index 000000000..641b40c48
Binary files /dev/null and b/website/src/images/pattern_purple.png differ
diff --git a/website/src/styles/landing.module.sass b/website/src/styles/landing.module.sass
index 9629004b4..5c2a0754b 100644
--- a/website/src/styles/landing.module.sass
+++ b/website/src/styles/landing.module.sass
@@ -2,22 +2,25 @@
 
 .header
     background: var(--color-theme)
-    padding-top: calc(var(--height-nav) * 1.5)
+    padding-top: var(--height-nav)
     width: 100%
     text-align: center
+    --header-top-margin: 27px
 
 .header-wrapper
     background: var(--color-theme)
-    background-position: top center
+    background-position: center var(--header-top-margin)
     background-repeat: repeat
     width: 100%
+    background-size: 799px 643px
 
 .header-content
-    background: transparent
-    background-position: center -138px
+    background-position: center calc(-138px + var(--header-top-margin))
     background-repeat: no-repeat
     width: 100%
-    min-height: 573px
+    min-height: calc(573px + var(--header-top-margin))
+    background-size: 1444px 573px
+    padding-top: var(--header-top-margin)
 
 .title
     font: normal 600 7rem/#{1} var(--font-secondary)
diff --git a/website/src/styles/main.module.sass b/website/src/styles/main.module.sass
index d36c04efb..880d37016 100644
--- a/website/src/styles/main.module.sass
+++ b/website/src/styles/main.module.sass
@@ -26,6 +26,7 @@
         background-color: var(--color-theme)
         background-repeat: repeat
         background-position: center top
+        background-size: 799px 643px
         z-index: -1
         min-height: 100vh
 
diff --git a/website/src/widgets/styleguide.js b/website/src/widgets/styleguide.js
index c12d6d38c..8b3d3eeec 100644
--- a/website/src/widgets/styleguide.js
+++ b/website/src/widgets/styleguide.js
@@ -6,9 +6,9 @@ import Link from '../components/link'
 import SVG from 'react-inlinesvg'
 
 import logoSpacy from '../images/logo.svg'
-import patternBlue from '../images/pattern_blue.jpg'
-import patternGreen from '../images/pattern_green.jpg'
-import patternPurple from '../images/pattern_purple.jpg'
+import patternBlue from '../images/pattern_blue.png'
+import patternGreen from '../images/pattern_green.png'
+import patternPurple from '../images/pattern_purple.png'
 
 const colors = {
     dark: 'var(--color-front)',