Switch to JPEGs and add image preloading

Author: gjanee

_quarto.yml

@@ -1,7 +1,7 @@
 project:
   type: website
   resources:
-    - "images/static-png/*.png"
+    - "images/static-png/*.jpg"
     - "data_processed/label_angles.csv"
 
 website:
@@ -30,3 +30,4 @@ format:
     toc: true
     toc-location: right
     toc-expand: true
+    include-in-header: images/image-preload-links.txt

code/001-data-viz.R

@@ -240,10 +240,14 @@ legend(
 dev.copy(png, "images/static-png/00-no-highlight.png", 
          width = 5, height = 5, units = "in", res = 600)
 dev.off()
+dev.copy(jpeg, "images/static-png/00-no-highlight.jpg", 
+         width = 5, height = 5, units = "in", res = 600)
+dev.off()
 
 
 
 # Chord diagram | Run loop and export visuals ----
+preload_link_file <- file("images/image-preload-links.txt", "wt")
 for(id in 1:nrow(list_coded)){
   # create visuals with highlight
   chord_diagram(highlight_id = id)
@@ -264,13 +268,25 @@ for(id in 1:nrow(list_coded)){
     title.font = 2      # bold title
   )
 
-  # export
+  # Export PNGs for building the GIF
   dev.copy(png, paste0("images/static-png/", sprintf("%02d", id), ".png"),
            width = 5, height = 5, units = "in", res = 600)
-  
   dev.off()
+  # Export JPEGs for the website (half the size of the PNGs)
+  dev.copy(jpeg, paste0("images/static-png/", sprintf("%02d", id), ".jpg"),
+           width = 5, height = 5, units = "in", res = 600)
+  dev.off()
+  writeLines(
+    paste(
+      "<link rel=\"preload\" href=\"images/static-png/",
+      sprintf("%02d", id),
+      ".jpg\" as=\"image\"/>",
+      sep=""
+    ),
+    preload_link_file
+  )
 }
-
+close(preload_link_file)
 
 
 # Create gif from png ----

images/chord-diagram.gif

@@ -0,0 +1,55 @@
+<link rel="preload" href="images/static-png/01.jpg" as="image"/>
+<link rel="preload" href="images/static-png/02.jpg" as="image"/>
+<link rel="preload" href="images/static-png/03.jpg" as="image"/>
+<link rel="preload" href="images/static-png/04.jpg" as="image"/>
+<link rel="preload" href="images/static-png/05.jpg" as="image"/>
+<link rel="preload" href="images/static-png/06.jpg" as="image"/>
+<link rel="preload" href="images/static-png/07.jpg" as="image"/>
+<link rel="preload" href="images/static-png/08.jpg" as="image"/>
+<link rel="preload" href="images/static-png/09.jpg" as="image"/>
+<link rel="preload" href="images/static-png/10.jpg" as="image"/>
+<link rel="preload" href="images/static-png/11.jpg" as="image"/>
+<link rel="preload" href="images/static-png/12.jpg" as="image"/>
+<link rel="preload" href="images/static-png/13.jpg" as="image"/>
+<link rel="preload" href="images/static-png/14.jpg" as="image"/>
+<link rel="preload" href="images/static-png/15.jpg" as="image"/>
+<link rel="preload" href="images/static-png/16.jpg" as="image"/>
+<link rel="preload" href="images/static-png/17.jpg" as="image"/>
+<link rel="preload" href="images/static-png/18.jpg" as="image"/>
+<link rel="preload" href="images/static-png/19.jpg" as="image"/>
+<link rel="preload" href="images/static-png/20.jpg" as="image"/>
+<link rel="preload" href="images/static-png/21.jpg" as="image"/>
+<link rel="preload" href="images/static-png/22.jpg" as="image"/>
+<link rel="preload" href="images/static-png/23.jpg" as="image"/>
+<link rel="preload" href="images/static-png/24.jpg" as="image"/>
+<link rel="preload" href="images/static-png/25.jpg" as="image"/>
+<link rel="preload" href="images/static-png/26.jpg" as="image"/>
+<link rel="preload" href="images/static-png/27.jpg" as="image"/>
+<link rel="preload" href="images/static-png/28.jpg" as="image"/>
+<link rel="preload" href="images/static-png/29.jpg" as="image"/>
+<link rel="preload" href="images/static-png/30.jpg" as="image"/>
+<link rel="preload" href="images/static-png/31.jpg" as="image"/>
+<link rel="preload" href="images/static-png/32.jpg" as="image"/>
+<link rel="preload" href="images/static-png/33.jpg" as="image"/>
+<link rel="preload" href="images/static-png/34.jpg" as="image"/>
+<link rel="preload" href="images/static-png/35.jpg" as="image"/>
+<link rel="preload" href="images/static-png/36.jpg" as="image"/>
+<link rel="preload" href="images/static-png/37.jpg" as="image"/>
+<link rel="preload" href="images/static-png/38.jpg" as="image"/>
+<link rel="preload" href="images/static-png/39.jpg" as="image"/>
+<link rel="preload" href="images/static-png/40.jpg" as="image"/>
+<link rel="preload" href="images/static-png/41.jpg" as="image"/>
+<link rel="preload" href="images/static-png/42.jpg" as="image"/>
+<link rel="preload" href="images/static-png/43.jpg" as="image"/>
+<link rel="preload" href="images/static-png/44.jpg" as="image"/>
+<link rel="preload" href="images/static-png/45.jpg" as="image"/>
+<link rel="preload" href="images/static-png/46.jpg" as="image"/>
+<link rel="preload" href="images/static-png/47.jpg" as="image"/>
+<link rel="preload" href="images/static-png/48.jpg" as="image"/>
+<link rel="preload" href="images/static-png/49.jpg" as="image"/>
+<link rel="preload" href="images/static-png/50.jpg" as="image"/>
+<link rel="preload" href="images/static-png/51.jpg" as="image"/>
+<link rel="preload" href="images/static-png/52.jpg" as="image"/>
+<link rel="preload" href="images/static-png/53.jpg" as="image"/>
+<link rel="preload" href="images/static-png/54.jpg" as="image"/>
+<link rel="preload" href="images/static-png/55.jpg" as="image"/>