minify image and use avif when possible
This commit is contained in:
parent
8fb940771e
commit
266aafce13
11 changed files with 9 additions and 12 deletions
BIN
images/IMG_1270.JPG
Normal file
BIN
images/IMG_1270.JPG
Normal file
Binary file not shown.
After (image error) Size: 4 MiB |
Binary file not shown.
Before (image error) Size: 1,012 KiB |
Binary file not shown.
Before (image error) Size: 271 KiB |
BIN
images/sunset-square-bg-blue.min.avif
Normal file
BIN
images/sunset-square-bg-blue.min.avif
Normal file
Binary file not shown.
BIN
images/sunset-square-bg-blue.min.jpg
Normal file
BIN
images/sunset-square-bg-blue.min.jpg
Normal file
Binary file not shown.
After (image error) Size: 58 KiB |
BIN
images/sunset-square-bg.min.jpg
Normal file
BIN
images/sunset-square-bg.min.jpg
Normal file
Binary file not shown.
After (image error) Size: 56 KiB |
BIN
images/sunset-square.jpg
Normal file
BIN
images/sunset-square.jpg
Normal file
Binary file not shown.
After (image error) Size: 4.4 MiB |
BIN
images/sunset-square.min.jpg
Normal file
BIN
images/sunset-square.min.jpg
Normal file
Binary file not shown.
After (image error) Size: 110 KiB |
Binary file not shown.
Before (image error) Size: 168 KiB After (image error) Size: 5.4 MiB |
BIN
images/sunset.min.jpg
Normal file
BIN
images/sunset.min.jpg
Normal file
Binary file not shown.
After (image error) Size: 151 KiB |
21
index.html
21
index.html
|
@ -29,16 +29,9 @@ body {margin: auto; min-height: 100vh}
|
|||
section, footer {margin-top: 2.5rem}
|
||||
footer {padding-bottom: 1rem; display: flex; justify-content: center}
|
||||
.container {padding: 0 1rem; height: 100%;}
|
||||
header {
|
||||
background: url(./images/sunset-bg-blue.jpg);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
width: 100%; height: 100vw;
|
||||
max-height: 600px; background-position: bottom
|
||||
}
|
||||
header .container {
|
||||
display: grid; grid-template-rows: 1fr auto auto
|
||||
}
|
||||
header {position: relative;}
|
||||
header .container {position: absolute; bottom: 0; width: 100%; height: fit-content}
|
||||
header img {width: 100vw; height: 100vw; max-width: 100%; max-height: 600px; object-fit: cover; object-position: bottom}
|
||||
header h1 {grid-row: 2}
|
||||
header p {grid-row: 3}
|
||||
dl {display: grid; grid-template-columns: 6.5rem 1fr}
|
||||
|
@ -60,7 +53,7 @@ body:before {
|
|||
height: 100vh;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: url(./images/sunset-bg-blue.jpg);
|
||||
background: url(./images/sunset-square-bg-blue.min.jpg);
|
||||
background-size: cover; background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
filter: blur(1rem);
|
||||
|
@ -68,7 +61,7 @@ body:before {
|
|||
z-index: -1
|
||||
}
|
||||
html {background-color: #212121}
|
||||
body, header, section {background-color: #212227; color: white}
|
||||
body, header, section {background-color: #1D1B20; color: white}
|
||||
a {color: #64b5f6}
|
||||
a:visited {color: #d1c4e9}
|
||||
img {color: white}
|
||||
|
@ -91,6 +84,10 @@ img {color: white}
|
|||
<body>
|
||||
<main>
|
||||
<header id="top" class="section">
|
||||
<picture>
|
||||
<source srcset="./images/sunset-square-bg-blue.min.avif" type="image/avif">
|
||||
<img src="./images/sunset-square-bg-blue.min.jpg" alt="a picture i took of a sunset, but hue-shifted to be blue and purple" width="200" height="200">
|
||||
</picture>
|
||||
<div class="container">
|
||||
<h1>hi, i'm a.</h1>
|
||||
<p>i have approximate knowledge of many things. perpetual student. (nb/ace/they)</p>
|
||||
|
|
Loading…
Reference in a new issue