Reduce blur of avatars on fronts (#14452)

* Add a highlights-card image size type for avatar images

* For avatars in the highlights container, use a 1:1 aspect ratio instead of forcing the height and width in the parent container. This prevents the image becoming distorted as avatars as actually a 6:5 ratio.

* Always use a 1:1 aspect ratio for avatars

Author: abeddow91

dotcom-rendering/src/components/Avatar.tsx

@@ -64,27 +64,74 @@ const decideImageWidths = (
 ): [ImageWidthType, ...ImageWidthType[]] => {
 	switch (imageSize) {
 		case 'small':
-			return [{ breakpoint: breakpoints.mobile, width: 80 }];
+			return [
+				{
+					breakpoint: breakpoints.mobile,
+					width: 80,
+					aspectRatio: '1:1',
+				},
+			];
 
 		case 'medium':
 		default:
 			return [
-				{ breakpoint: breakpoints.mobile, width: 80 },
-				{ breakpoint: breakpoints.desktop, width: 90 },
+				{
+					breakpoint: breakpoints.mobile,
+					width: 80,
+					aspectRatio: '1:1',
+				},
+				{
+					breakpoint: breakpoints.desktop,
+					width: 90,
+					aspectRatio: '1:1',
+				},
 			];
 
 		case 'large':
 			return [
-				{ breakpoint: breakpoints.mobile, width: 150 },
-				{ breakpoint: breakpoints.tablet, width: 130 },
-				{ breakpoint: breakpoints.desktop, width: 150 },
+				{
+					breakpoint: breakpoints.mobile,
+					width: 150,
+					aspectRatio: '1:1',
+				},
+				{
+					breakpoint: breakpoints.tablet,
+					width: 130,
+					aspectRatio: '1:1',
+				},
+				{
+					breakpoint: breakpoints.desktop,
+					width: 150,
+					aspectRatio: '1:1',
+				},
 			];
 
 		case 'jumbo':
 			return [
-				{ breakpoint: breakpoints.mobile, width: 180 },
-				{ breakpoint: breakpoints.tablet, width: 160 },
-				{ breakpoint: breakpoints.desktop, width: 190 },
+				{
+					breakpoint: breakpoints.mobile,
+					width: 180,
+					aspectRatio: '1:1',
+				},
+				{
+					breakpoint: breakpoints.tablet,
+					width: 160,
+					aspectRatio: '1:1',
+				},
+				{
+					breakpoint: breakpoints.desktop,
+					width: 190,
+					aspectRatio: '1:1',
+				},
+			];
+		/* Avatars on cards in the highlights container are fixed to 98px on all breakpoints */
+		case 'highlights-card':
+			return [
+				{
+					breakpoint: breakpoints.mobile,
+					width: 98,
+					aspectRatio: '1:1',
+				},
 			];
 	}
 };

dotcom-rendering/src/components/Masthead/HighlightsCardImage.tsx

@@ -10,9 +10,7 @@ const imageStyles = css`
 	position: relative;
 	align-self: flex-end;
 	flex-shrink: 0;
-	height: 98px;
 	width: 98px;
-
 	${until.tablet} {
 		margin-top: ${space[2]}px;
 	}