matrix-art

commit 23b1c2f6e6c1123748c900a7b7e5fe51c56b42ed
parent 709b379a5879b9a11b542a5f52996e531b06e85d
Author: MTRNord <mtrnord1@gmail.com>
Date:   Fri, 14 Jan 2022 02:54:50 +0100

Make google pagespeed happier about the image sizes

Diffstat:
M
components/FrontPageImage.tsx
 | 
4
++--
M
pages/post/[id].tsx
 | 
8
++++----

2 files changed, 6 insertions(+), 6 deletions(-)
diff --git a/components/FrontPageImage.tsx b/components/FrontPageImage.tsx
@@ -112,10 +112,10 @@ export default class FrontPageImage extends PureComponent<Props, State> {
                     height={this.state.imageHeight}
                     width="100%"
                 />
-                <img loading="lazy" alt={caption} title={caption} style={{ height: this.state.imageHeight }} className="relative -ml-[100%] max-w-full object-cover align-bottom" src={this.context.client?.thumbnailLink(thumbnail_url, "scale", Number.parseInt(this.state.imageHeight?.replace("px", "")!), Number.parseInt(this.state.imageHeight?.replace("px", "")!))}></img>
+                <img loading="lazy" width="640" height="360" alt={caption} title={caption} style={{ height: this.state.imageHeight }} className="h-auto w-full relative -ml-[100%] max-w-full object-cover align-bottom" src={this.context.client?.thumbnailLink(thumbnail_url, "scale", Number.parseInt(this.state.imageHeight?.replace("px", "")!), Number.parseInt(this.state.imageHeight?.replace("px", "")!))}></img>
             </div>
         ) : (
-            <img alt={caption} title={caption} style={{ height: this.state.imageHeight }} className={`relative max-w-full object-cover align-bottom z-0`} src={this.context.client?.thumbnailLink(thumbnail_url, "scale", Number.parseInt(this.state.imageHeight?.replace("px", "")!), Number.parseInt(this.state.imageHeight?.replace("px", "")!))}></img>
+                <img alt={caption} width="640" height="360" title={caption} style={{ height: this.state.imageHeight }} className={`h-auto w-full relative max-w-full object-cover align-bottom z-0`} src={this.context.client?.thumbnailLink(thumbnail_url, "scale", Number.parseInt(this.state.imageHeight?.replace("px", "")!), Number.parseInt(this.state.imageHeight?.replace("px", "")!))}></img>
         );
         return (
             <li style={{ height: this.state.imageHeight }} key={id}>
diff --git a/pages/post/[id].tsx b/pages/post/[id].tsx
@@ -256,10 +256,10 @@ class Post extends PureComponent<Props, State> {
                     width="100%"
                     height=""
                 />
-                <img loading="eager" alt={caption} title={caption} className="relative -ml-[100%] object-cover align-bottom" src={thumbnail_url} />
+                <img loading="eager" width="640" height="360" alt={caption} title={caption} className="h-auto w-full relative -ml-[100%] object-cover align-bottom" src={thumbnail_url} />
             </div>
         ) : (
-            <img loading="eager" alt={caption} title={caption} src={thumbnail_url} />
+            <img loading="eager" width="640" height="360" className="h-auto w-full" alt={caption} title={caption} src={thumbnail_url} />
         );
         return (
             <>
@@ -314,10 +314,10 @@ class Post extends PureComponent<Props, State> {
                         width="100%"
                         height=""
                     />
-                    <img loading="eager" alt={caption} title={caption} className="relative -ml-[100%] object-cover align-bottom" src={thumbnail_url} />
+                    <img loading="eager" width="640" height="360" alt={caption} title={caption} className="h-auto w-full relative -ml-[100%] object-cover align-bottom" src={thumbnail_url} />
                 </div>
             ) : (
-                <img loading="eager" alt={caption} title={caption} src={thumbnail_url} />
+                <img loading="eager" width="640" height="360" className="h-auto w-full" alt={caption} title={caption} src={thumbnail_url} />
             );
             return (
                 <a key={url} href={url} title={caption} data-src={url}>