bigger == better

img/convert.sh

@@ -24,6 +24,7 @@ for f in original/*.jpg; do
 done
 
 for img in *.jpg; do
+	make_jpg $img 2400
 	make_jpg $img 1600
 	make_jpg $img 1200
 	make_jpg $img 800
@@ -31,6 +32,7 @@ for img in *.jpg; do
 	make_jpg $img 400
 	make_jpg $img 200
 
+	make_webp $img 2400
 	make_webp $img 1600
 	make_webp $img 1200
 	make_webp $img 800

pub.py

@@ -145,6 +145,7 @@ def upload_images():
     upload_thumbnail(800)
     upload_thumbnail(1200)
     upload_thumbnail(1600)
+    upload_thumbnail(2400)
     upload_file('img/data.json')
 
 

src/components/picture.tsx

@@ -61,8 +61,8 @@ export class Picture extends React.PureComponent<Props, State> {
   private _srcset = (): SrcSetInfo => {
     const jpegSrcSet: string[] = [];
     const webpSrcSet: string[] = [];
-    let bestSize = 1600;
-    let bestRatio = Infinity;
+    let bestSize = 800;
+    let bestScale = Infinity;
 
     Model.SIZES.forEach(size => {
       const width =
@@ -72,14 +72,14 @@ export class Picture extends React.PureComponent<Props, State> {
 
       const scale = width / this.props.width;
 
-      if (scale >= 1) {
+      if (scale >= 1 || size === 2400) {
         const jpeg = `img/${size}/${this.props.image.src}`;
         const webp = jpeg.replace("jpg", "webp");
         jpegSrcSet.push(`${jpeg} ${scale}x`);
         webpSrcSet.push(`${webp} ${scale}x`);
-        if (scale < bestRatio) {
+        if (scale < bestScale) {
           bestSize = size;
-          bestRatio = scale;
+          bestScale = scale;
         }
       }
     });

src/model.ts

@@ -1,4 +1,4 @@
-export const SIZES = [1600, 1200, 800, 600, 400, 200];
+export const SIZES = [2400, 1600, 1200, 800, 600, 400, 200];
 
 export const dataUrl = "img/data.json";