Merge pull request #1781 from iFixit/Vulcan--add-html-image-dimensions

Vulcan: Add html image dimensions for lighthouse
iFixit · Jun 28, 2023 · d920ace · d920ace · vercel · Jun 28, 2023
2 parents 37478d3 + f96b134
commit d920ace
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 8 deletions.
diff --git a/frontend/templates/troubleshooting/Problem.tsx b/frontend/templates/troubleshooting/Problem.tsx
@@ -25,13 +25,15 @@ export default function ProblemCard({ problem }: { problem: Problem }) {
             >
                <Image
                   boxSize="48px"
+                  htmlWidth={48}
+                  htmlHeight={48}
                   objectFit="cover"
                   src={imageUrl}
                   alt=""
+                  outline="1px solid"
+                  outlineColor="gray.300"
                   borderRadius="4px"
-                  borderColor="gray.300"
-                  borderWidth="1px"
-                  borderStyle="solid"
+                  loading="lazy"
                />
                <Stack
                   justify="center"

diff --git a/frontend/templates/troubleshooting/index.tsx b/frontend/templates/troubleshooting/index.tsx
@@ -105,13 +105,12 @@ const Wiki: NextPageWithLayout<{
                   onClick={onOpen}
                   cursor="pointer"
                   alt={title}
-                  maxWidth="120px"
-                  minWidth="120px"
-                  minHeight="90.5px"
+                  htmlWidth={120}
+                  htmlHeight={90}
                   objectFit="contain"
                   borderRadius="4px"
-                  border="1px solid"
-                  borderColor="gray.300"
+                  outline="1px solid"
+                  outlineColor="gray.300"
                   marginRight="12px"
                   display={{ base: 'none', sm: 'block' }}
                />