sites
/
trwnh.com
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

minify image and use avif when possible

This commit is contained in:
a 2022-01-18 16:45:14 -06:00
parent 8fb940771e
commit 266aafce13
11 changed files with 9 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/IMG_1270.JPG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.0 MiB

BIN
images/sunset-bg-blue.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1012 KiB

BIN
images/sunset-bg.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 271 KiB

BIN
images/sunset-square-bg-blue.min.avif Normal file
View File

Binary file not shown.

BIN
images/sunset-square-bg-blue.min.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 58 KiB

BIN
images/sunset-square-bg.min.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 56 KiB

BIN
images/sunset-square.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 MiB

BIN
images/sunset-square.min.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 110 KiB

BIN
images/sunset.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 168 KiB

After

Width:  |  Height:  |  Size: 5.4 MiB

BIN
images/sunset.min.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 151 KiB

21
index.html
View File

@ -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>