c3cat/c3cat-landingpage
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Activity Actions

load images of rgb-ears instructions lazily
All checks were successful
/ build (pull_request) Successful in 58s
Details

Browse source 
This way, the user agent can decide when it wants to load the image.
Usually this depends on how close the image is to the viewport.
This commit is contained in:
lilly 2025-12-18 16:25:03 +01:00
commit 9de06a2455
Signed by: lilly
SSH key fingerprint: SHA256:y9T5GFw2A20WVklhetIxG1+kcg/Ce0shnQmbu1LQ37g
1 changed files with 18 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

18
rgb-ears-39c3.html
View file

@ -150,6 +150,7 @@
class="hero-img detail-hide-short"
style="aspect-ratio: 16/10;"
alt="A picture of an assembled set of LED catears"
loading="lazy"
srcset="assets/img/rgb-ears-39c3/22_1280.webp 1280w,
assets/img/rgb-ears-39c3/22_1920.webp 1920w,
assets/img/rgb-ears-39c3/22_6845.webp 6845w"
@ -190,6 +191,7 @@
class="hero-img"
style="aspect-ratio: 16/10;"
alt="A picture of the kit content layed out on a rat mat. It contains the items listed below"
loading="lazy"
srcset="assets/img/rgb-ears-39c3/1_1280.webp 1280w,
assets/img/rgb-ears-39c3/1_1919.webp 1919w,
assets/img/rgb-ears-39c3/1_6928.webp 6982w"
@ -283,6 +285,7 @@
style="aspect-ratio: 16/10;"
width=500
alt="A picture of the backside of an LED strip exposed. The ou label is visible on the part of it not connected to another strip segment."
loading="lazy"
srcset="assets/img/rgb-ears-39c3/2_1280.webp 1280w,
assets/img/rgb-ears-39c3/2_1920.webp 1920w,
assets/img/rgb-ears-39c3/2_3032.webp 3032w"
@ -295,6 +298,7 @@
style="aspect-ratio: 16/10;"
width=500
alt="A picture of the backside of an LED strip exposed. The in label is visible on the part of it not connected to another strip segment."
loading="lazy"
srcset="assets/img/rgb-ears-39c3/3_1280.webp 1280w,
assets/img/rgb-ears-39c3/3_1920.webp 1920w,
assets/img/rgb-ears-39c3/3_3273.webp 3273w"
@ -318,6 +322,7 @@
style="aspect-ratio: 16/10;"
width=500
alt="A picture of one end of the long wire but the insulation has been stripped off"
loading="lazy"
srcset="assets/img/rgb-ears-39c3/4_1280.webp 1280w,
assets/img/rgb-ears-39c3/4_1920.webp 1920w,
assets/img/rgb-ears-39c3/4_3336.webp 3336w"
@ -356,6 +361,7 @@
style="aspect-ratio: 16/10;"
width=500
alt="A picture of the long wire soldered to the LED strip"
loading="lazy"
srcset="assets/img/rgb-ears-39c3/5_1280.webp 1280w,
assets/img/rgb-ears-39c3/5_1920.webp 1920w,
assets/img/rgb-ears-39c3/5_3200.webp 3200w"
@ -381,6 +387,7 @@
style="aspect-ratio: 16/10;"
width=500
alt="A picture of the led-to-cable-connection but with a heatshrink over the soldering points"
loading="lazy"
srcset="assets/img/rgb-ears-39c3/12_1280.webp 1280w,
assets/img/rgb-ears-39c3/12_1920.webp 1920w,
assets/img/rgb-ears-39c3/12_6133.webp 6133w"
@ -427,6 +434,7 @@
style="aspect-ratio: 16/10;"
width=500
alt="A picture of the heatshrinks prepared as described"
loading="lazy"
srcset="assets/img/rgb-ears-39c3/9_1280.webp 1280w,
assets/img/rgb-ears-39c3/9_1920.webp 1920w,
assets/img/rgb-ears-39c3/9_5824.webp 5842w"
@ -453,6 +461,7 @@
style="aspect-ratio: 16/10; margin-top: 1rem;"
width=500
alt="A picture of the pluggable connector cables soldered to the cores of the long cable"
loading="lazy"
srcset="assets/img/rgb-ears-39c3/10_1280.webp 1280w,
assets/img/rgb-ears-39c3/10_1920.webp 1920w,
assets/img/rgb-ears-39c3/10_4960.webp 4960w"
@ -475,6 +484,7 @@
style="aspect-ratio: 16/10; margin-top: 1rem;"
width=500
alt="A picture of the connection between long cable and plug where each core is protected by an individual heatshrink"
loading="lazy"
srcset="assets/img/rgb-ears-39c3/11_1280.webp 1280w,
assets/img/rgb-ears-39c3/11_1920.webp 1920w,
assets/img/rgb-ears-39c3/11_5984.webp 5984w"
@ -484,6 +494,7 @@
style="aspect-ratio: 16/10; margin-top: 1rem;"
width=500
alt="A picture of the connection between long cable and plug where the connection is protected as a whole by one heatshrink"
loading="lazy"
srcset="assets/img/rgb-ears-39c3/13_1280.webp 1280w,
assets/img/rgb-ears-39c3/13_1920.webp 1920w,
assets/img/rgb-ears-39c3/13_5888.webp 5888w"
@ -508,6 +519,7 @@
style="aspect-ratio: 1/1; flex-basis: 300px;"
width=300
alt="The front side of the included microcontroller"
loading="lazy"
srcset="assets/img/rgb-ears-39c3/14_1280.webp 1280w,
assets/img/rgb-ears-39c3/14_1920.webp 1920w,
assets/img/rgb-ears-39c3/14_2641.webp 2641w"
@ -517,6 +529,7 @@
style="aspect-ratio: 1/1; max-width: 300px;"
width=300
alt="The backside of the included microcontroller"
loading="lazy"
srcset="assets/img/rgb-ears-39c3/15_1280.webp 1280w,
assets/img/rgb-ears-39c3/15_1920.webp 1920w,
assets/img/rgb-ears-39c3/15_2757.webp 2757w"
@ -540,6 +553,7 @@
style="aspect-ratio: 16/10;"
width=500
alt="Picture of the cables of the pluggable connector soldered to the microcontroller"
loading="lazy"
srcset="assets/img/rgb-ears-39c3/16_1280.webp 1280w,
assets/img/rgb-ears-39c3/16_1920.webp 1920w,
assets/img/rgb-ears-39c3/16_3064.webp 3064w"
@ -566,6 +580,7 @@
style="aspect-ratio: 16/10; margin-top: 1rem;"
width=500
alt="Picture of the microcontroller nested into the open case"
loading="lazy"
srcset="assets/img/rgb-ears-39c3/17_1280.webp 1280w,
assets/img/rgb-ears-39c3/17_1920.webp w,
assets/img/rgb-ears-39c3/17_6477.webp 6477w"
@ -584,6 +599,7 @@
style="aspect-ratio: 16/10; margin-top: 1rem;"
width=500
alt="Picture of the microcontroller nested into the open case"
loading="lazy"
srcset="assets/img/rgb-ears-39c3/19_1280.webp 1280w,
assets/img/rgb-ears-39c3/19_1920.webp 1920w,
assets/img/rgb-ears-39c3/19_7352.webp 7352w"
@ -612,6 +628,7 @@
style="aspect-ratio: 16/10;"
width=500
alt="Picture of one cat ear with the LED strip partially applied. The image is focused on the alignment of the LED strip with the catear."
loading="lazy"
srcset="assets/img/rgb-ears-39c3/20_1280.webp 1280w,
assets/img/rgb-ears-39c3/20_1919.webp 1919w,
assets/img/rgb-ears-39c3/20_5944.webp 5944w"
@ -637,6 +654,7 @@
style="aspect-ratio: 16/10; margin-top: 1rem;"
width=500
alt="Picture of one cat ear with the LED strip partially applied. The image is focused on the alignment of the LED strip with the catear."
loading="lazy"
srcset="assets/img/rgb-ears-39c3/21_1280.webp 1280w,
assets/img/rgb-ears-39c3/21_1920.webp 1920w,
assets/img/rgb-ears-39c3/21_7960.webp 7960w"