feat: responsive images

This commit is contained in:
Caesar Schinas 2021-01-24 15:43:53 +00:00
parent d42cf61218
commit ba121567c2
8 changed files with 4 additions and 4 deletions

BIN
images/caesar-128.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.6 KiB

BIN
images/caesar-128.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

BIN
images/caesar-256.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

BIN
images/caesar-256.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.3 KiB

BIN
images/caesar-500.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

BIN
images/caesar-500.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 114 KiB

View file

@ -15,7 +15,7 @@
"@type": "Person", "@type": "Person",
"name": "Caesar Schinas", "name": "Caesar Schinas",
"url": "https://caesarschinas.com", "url": "https://caesarschinas.com",
"image": "https://caesarschinas.com/images/caesar.jpg", "image": "https://caesarschinas.com/images/caesar-500.jpg",
"sameAs": [ "sameAs": [
"https://github.com/caesar", "https://github.com/caesar",
"https://twitter.com/CaesarSchinas", "https://twitter.com/CaesarSchinas",
@ -29,9 +29,9 @@
<header> <header>
<h1>Caesar Schinas</h1> <h1>Caesar Schinas</h1>
<picture> <picture>
<source srcset="./images/caesar.webp" type="image/webp" /> <source srcset="./images/caesar-256.webp 256w, ./images/caesar-128.webp 128w" type="image/webp" />
<source srcset="./images/caesar.jpg" type="image/jpeg" /> <source srcset="./images/caesar-256.jpg 256w, ./images/caesar-128.jpg 128w" type="image/jpeg" />
<img class="profile" src="./images/caesar.jpg" width="120" height="120" /> <img class="profile" src="./images/caesar-128.jpg" width="128" height="128" />
</picture> </picture>
<p class="ipa" lang="en-fonipa">/ ˈsiːˈskɪnəs /</p> <p class="ipa" lang="en-fonipa">/ ˈsiːˈskɪnəs /</p>
<p class="dfn">Sailor;&nbsp; programmer;&nbsp; web designer;&nbsp; publisher.</p> <p class="dfn">Sailor;&nbsp; programmer;&nbsp; web designer;&nbsp; publisher.</p>